# 舞彩浅山多线路攻略 · 交互版


这里是可以真正动手的版本：按强度筛选线路、卡片／对比表切换、点开看分步路书、装备清单可勾选（勾选状态存在你自己的浏览器里）。线路里程与爬升取自两步路、六只脚的真实轨迹记录与公开路书。

<div class="wq">
<div class="hero">
  <div class="hero-inner">
    <div class="kicker">北京 · 顺义 · 京郊彩丘徒步</div>
    <h1>舞彩浅山多线路攻略</h1>
    <p class="sub">里程与爬升取自两步路、六只脚上的真实轨迹记录与公开路书，按「带谁去、有多少时间」直接选线。</p>
    <div class="factbar">
      <div class="fact"><b>免费开放</b>无门票</div>
      <div class="fact"><b>约 9 个登山口</b>步道百余公里</div>
      <div class="fact"><b>降魔顶 627 m</b>顺义最高峰</div>
      <div class="fact"><b>10 月中–11 月中</b>彩叶巅峰</div>
    </div>
  </div>
  <svg class="hills" viewBox="0 0 1200 90" preserveAspectRatio="none" aria-hidden="true">
    <path d="M0,62 C120,30 220,70 330,50 C430,32 520,66 640,44 C760,22 850,58 970,40 C1070,25 1140,52 1200,42 L1200,90 L0,90 Z" fill="#fff" opacity=".85"/>
    <path d="M0,74 C140,52 260,82 400,66 C540,50 660,80 800,64 C940,48 1060,76 1200,62 L1200,90 L0,90 Z" fill="#fff" opacity=".6"/>
  </svg>
</div>
<div class="wrap">
  <section>
    <h2>选线器：先筛强度，再点开看路书</h2>
    <p class="hint">里程 / 爬升为轨迹记录与公开路书整理值，同一条线不同走法会有出入，出发前用轨迹 App 复核。</p>
    <div class="toolbar">
      <button class="chip on" data-f="all">全部 8 条</button>
      <button class="chip" data-f="lv1">轻松 · 带娃带长辈</button>
      <button class="chip" data-f="lv2">适中 · 有运动基础</button>
      <button class="chip" data-f="lv3">挑战 · 拉练级</button>
      <span class="spacer"></span>
      <div class="viewtoggle">
        <button id="vCard" class="on">卡片</button>
        <button id="vTable">对比表</button>
      </div>
    </div>
    <div class="grid" id="grid"></div>
    <div class="tablewrap" id="tablewrap">
      <table>
        <thead><tr><th>线路</th><th>强度</th><th>里程</th><th>爬升</th><th>用时</th><th>起点登山口</th><th>数据源</th></tr></thead>
        <tbody id="tbody"></tbody>
      </table>
    </div>
    <div class="detail" id="detail"></div>
  </section>
  <section>
    <h2>强度分布：一张图看懂该选哪条</h2>
    <p class="hint">横轴里程、纵轴累计爬升，越靠右上越野。圆点颜色即强度等级，只标出已验证里程与爬升的线路。</p>
    <div class="chart">
      <svg viewBox="0 0 700 350" role="img" aria-label="舞彩浅山各线路里程与爬升散点图">
        <line x1="70" y1="290" x2="665" y2="290" stroke="#e8ddcd" stroke-width="1.5"/>
        <line x1="70" y1="25" x2="70" y2="290" stroke="#e8ddcd" stroke-width="1.5"/>
        <line x1="70" y1="226" x2="665" y2="226" stroke="#f2ece2" stroke-width="1" stroke-dasharray="3 4"/>
        <line x1="70" y1="162" x2="665" y2="162" stroke="#f2ece2" stroke-width="1" stroke-dasharray="3 4"/>
        <line x1="70" y1="98" x2="665" y2="98" stroke="#f2ece2" stroke-width="1" stroke-dasharray="3 4"/>
        <line x1="217.5" y1="25" x2="217.5" y2="290" stroke="#f2ece2" stroke-width="1" stroke-dasharray="3 4"/>
        <line x1="365" y1="25" x2="365" y2="290" stroke="#f2ece2" stroke-width="1" stroke-dasharray="3 4"/>
        <line x1="512.5" y1="25" x2="512.5" y2="290" stroke="#f2ece2" stroke-width="1" stroke-dasharray="3 4"/>
        <text x="70" y="308" font-size="11" fill="#9a8877" text-anchor="middle">0</text>
        <text x="217.5" y="308" font-size="11" fill="#9a8877" text-anchor="middle">6 km</text>
        <text x="365" y="308" font-size="11" fill="#9a8877" text-anchor="middle">12 km</text>
        <text x="512.5" y="308" font-size="11" fill="#9a8877" text-anchor="middle">18 km</text>
        <text x="660" y="308" font-size="11" fill="#9a8877" text-anchor="middle">24 km</text>
        <text x="63" y="294" font-size="11" fill="#9a8877" text-anchor="end">0</text>
        <text x="63" y="230" font-size="11" fill="#9a8877" text-anchor="end">450 m</text>
        <text x="63" y="166" font-size="11" fill="#9a8877" text-anchor="end">900 m</text>
        <text x="63" y="102" font-size="11" fill="#9a8877" text-anchor="end">1350 m</text>
        <text x="63" y="38" font-size="11" fill="#9a8877" text-anchor="end">1800 m</text>
        <text x="367" y="334" font-size="12" fill="#6b5b4b" text-anchor="middle">里程 →</text>
        <text x="18" y="158" font-size="12" fill="#6b5b4b" text-anchor="middle" transform="rotate(-90 18 158)">累计爬升 →</text>
        <circle cx="144" cy="276" r="8" fill="#5c7f4f" opacity=".85"/>
        <text x="156" y="273" font-size="11.5" fill="#2b2118">唐指山小环线 3 km</text>
        <circle cx="205" cy="252" r="8" fill="#d99a2b" opacity=".9"/>
        <text x="197" y="249" font-size="11.5" fill="#2b2118" text-anchor="end">峪子沟—双佛山 5.5 km</text>
        <circle cx="205" cy="236" r="8" fill="#5c7f4f" opacity=".85"/>
        <text x="217" y="233" font-size="11.5" fill="#2b2118">月明涧小环线 5.5 km</text>
        <circle cx="256" cy="198" r="8" fill="#d99a2b" opacity=".9"/>
        <text x="248" y="188" font-size="11.5" fill="#2b2118" text-anchor="end">轨迹 46472814 · 7.58 km</text>
        <circle cx="267" cy="232" r="8" fill="#d99a2b" opacity=".9"/>
        <text x="279" y="246" font-size="11.5" fill="#2b2118">白毛峪—月明涧 8 km</text>
        <circle cx="331" cy="220" r="8" fill="#d99a2b" opacity=".9"/>
        <text x="343" y="210" font-size="11.5" fill="#2b2118">轨迹 50480863 · 10.63 km</text>
        <circle cx="365" cy="148" r="9" fill="#c8552f" opacity=".9"/>
        <text x="377" y="137" font-size="11.5" fill="#2b2118">降魔顶—丰台顶 12 km</text>
        <circle cx="466" cy="146" r="9" fill="#c8552f" opacity=".9"/>
        <text x="478" y="166" font-size="11.5" fill="#2b2118">安辛庄—降魔顶 16.1 km</text>
        <circle cx="660" cy="41" r="10" fill="#c8552f" opacity=".9"/>
        <text x="652" y="60" font-size="11.5" fill="#2b2118" text-anchor="end">拉练 A 线 24 km</text>
        <circle cx="96" cy="44" r="6" fill="#5c7f4f" opacity=".85"/>
        <text x="108" y="48" font-size="11" fill="#6b5b4b">轻松 · 带娃带长辈</text>
        <circle cx="240" cy="44" r="6" fill="#d99a2b" opacity=".9"/>
        <text x="252" y="48" font-size="11" fill="#6b5b4b">适中 · 有运动基础</text>
        <circle cx="400" cy="44" r="6" fill="#c8552f" opacity=".9"/>
        <text x="412" y="48" font-size="11" fill="#6b5b4b">挑战 · 拉练级</text>
      </svg>
    </div>
  </section>
  <section>
    <h2>红叶季停车：最大的坑不是坡，是车位</h2>
    <div class="park">
      <table>
        <thead><tr><th>登山口</th><th>停车实况</th><th>配套</th><th>建议</th></tr></thead>
        <tbody>
          <tr><td><b>白毛峪</b></td><td>最难停。早上 9 点前后，通往山口的路上约 3 公里已停满</td><td>中龙休闲驿站停车场，卫生间在登山口附近</td><td>要么 8 点前到，要么换月明涧</td></tr>
          <tr><td><b>月明涧</b></td><td>9 点前尚可；中午 12 点前后车已排出去约 1 公里</td><td>停车场有公共卫生间，老乡摆摊卖吃的</td><td>红叶季最推荐的折中选择</td></tr>
          <tr><td><b>峪子沟 / 茶棚村</b></td><td>峪子沟停车场免费，压力小于白毛峪</td><td>停车场有小摊贩，售卖食品与用品</td><td>走双佛山、降魔顶、十二涧的首选</td></tr>
          <tr><td><b>唐指山（木林段）</b></td><td>贾山停车场免费，车位相对宽裕</td><td>木林段步道，近唐指山水库</td><td>带老人小孩、不想抢车位就走这里</td></tr>
          <tr><td><b>酸枣峪沟 / 杏花沟</b></td><td>景区入口处免费停车</td><td>春季杏花线路，全线约 2–3 小时</td><td>春天来，避开秋天的车流</td></tr>
        </tbody>
      </table>
    </div>
  </section>
  <section>
    <h2>越野拉练：想跑长线看这里</h2>
    <p class="hint">两步路上常见的三条拉练配置，适合有长距离经验的徒步者，可按体能自行裁剪。</p>
    <div class="park">
      <table>
        <thead><tr><th>配置</th><th>里程</th><th>累计爬升</th><th>说明</th></tr></thead>
        <tbody>
          <tr><td><b>A 线</b></td><td>24 km</td><td>1750 m</td><td>整片浅山串联，需一整天，早出发</td></tr>
          <tr><td><b>B 线</b></td><td>14 km</td><td>1000 m</td><td>与降魔顶—丰台顶量级相当</td></tr>
          <tr><td><b>C 线</b></td><td>8 km</td><td>600 m</td><td>半天可完成，入门拉练</td></tr>
          <tr><td><b>深度赏秋大环线</b></td><td>41.34 km</td><td>1666 m</td><td>大北坞—焦庄户—月明涧—白毛峪—镜山—降魔顶—丰台顶—十二涧—茶棚村，多为两日或强拉练</td></tr>
        </tbody>
      </table>
    </div>
  </section>
  <section>
    <h2>出行前清单</h2>
    <p class="hint">山上无售卖、卫生间少且不稳定，水与如厕都要进山前解决。勾选状态存在本机浏览器。</p>
    <div class="checks" id="checks"></div>
  </section>
  <section>
    <h2>交通 · 季节 · 安全</h2>
    <div class="cols">
      <div class="panel">
        <h4>🚗 自驾</h4>
        <ul>
          <li>白毛峪方向导航<b>中龙休闲驿站</b>；木林段导航<b>唐指山水库</b>；走双佛山 / 降魔顶导航<b>峪子沟停车场</b>（免费）</li>
          <li>市区出发多走京承高速转木燕路，全程约 40 km</li>
          <li>红叶季周末务必早到，停车是头号瓶颈</li>
        </ul>
      </div>
      <div class="panel">
        <h4>🚌 公交</h4>
        <ul>
          <li>地铁顺义站换乘<b>顺 59 路</b>，至「茶棚村峪子沟停车场」或「杏花沟公园」站</li>
          <li>木林段：俸伯地铁站乘<b>970 路</b>至「唐指山水库站」</li>
          <li>安辛庄—小北坞方向可乘<b>顺 36 路</b>（东直门 918 路到俸伯站换乘）</li>
          <li>班次稀疏、末班早，建议自驾</li>
        </ul>
      </div>
      <div class="panel">
        <h4>🍁 季节</h4>
        <div class="season">
          <div class="mon ok"><b>3–5月</b>杏花山花</div>
          <div class="mon ok"><b>6–8月</b>避暑溪谷</div>
          <div class="mon hot"><b>10月中–11月中</b>彩叶巅峰</div>
          <div class="mon"><b>12–2月</b>防火封山</div>
        </div>
        <p style="margin-top:10px">黄栌、元宝枫、火炬、银杏等次第变色，10 月中下旬最盛；晴天上午 9–11 点、下午 3–5 点光线最柔和。往年约 11 月中旬进入防火封山，出行前确认当年公告。</p>
      </div>
      <div class="panel">
        <h4>⚠️ 路况风险</h4>
        <ul>
          <li>双佛山、降魔顶一带<b>石头路段多、部分陡峭，有落石</b>，需防滑鞋与头盔意识</li>
          <li>山上<b>卫生间少或不开</b>，山下先解决</li>
          <li>部分区域<b>手机信号不稳</b>，提前下载离线轨迹</li>
          <li>沿途基本<b>无补给</b>，水与路餐自备</li>
        </ul>
      </div>
      <div class="panel">
        <h4>🎒 强度怎么估</h4>
        <ul>
          <li><b>轻松</b>：3–6 km、爬升 350 m 以内，孩子可全程自走</li>
          <li><b>适中</b>：5.5–10.6 km、爬升 300–500 m，含连续爬坡</li>
          <li><b>挑战</b>：12 km 以上或爬升 800 m 以上，含岩石路段</li>
          <li>亲子首推：白毛峪超小环线、月明涧小环线、唐指山小环线</li>
        </ul>
      </div>
      <div class="panel">
        <h4>🐕 其他</h4>
        <ul>
          <li>宠物友好，牵绳并清理粪便</li>
          <li>爬完可顺路去顺义农村买菜：萝卜、白菜、甘蔗（价格随季节浮动）</li>
          <li>山下「浅山漫步集中售卖区」有咖啡饮品；木林段近唐指山水库</li>
          <li>无痕山林：垃圾带走，不采挖、不用火</li>
        </ul>
      </div>
    </div>
  </section>
  <div class="srcnote">
    <b>数据来源：</b>线路里程与爬升主要取自两步路（2bulu）公开轨迹与活动页——轨迹 40947072（月明涧小环线）、46472814（7.58 km / 640 m）、50480863（伴驴部落环线 10.63 km / 492 m）、拉练 A/B/C 三线（24 km/1750 m、14 km/1000 m、8 km/600 m）、2025-11-02 深度赏秋大环线（41.34 km / 1666 m）；安辛庄—丰台顶—降魔顶—小北坞 16.1 km / 上升 1012 m、降魔顶海拔 627 m 来自六只脚行程记录；月明涧与降魔顶—丰台顶的路书细节、停车实况来自阅微堂户外笔记（2025-11-01、2023-11-04、2020-11-01）；峪子沟—双佛山 5.5 km / 284 m 与白毛峪环线 8.96 km / 575 m 来自 2025 年 10 月媒体报道；酸枣峪沟杏花线、木林段唐指山环线来自携程与北京旅游网公开稿件。<br>
    以上均为<b>公开资料与网友轨迹整理，非景区官方路书</b>：轨迹受设备、走法、季节影响会有出入；开放时间、封山期、停车场与卫生间状况以出行当天景区现场公告为准。
  </div>
  <p class="xlink">📄 纯文字版：<a href="https://blog.geluli.cn/wucai-qianshan-hiking-guide/">舞彩浅山多线路攻略</a>　·　🌐 独立网页版：<a href="https://workbuddy.link/p/VJmN2qziOs4wQ1R7HHKtte">workbuddy.link/p/VJmN2qziOs4wQ1R7HHKtte</a></p>
</div>
<script>
const ROUTES = [
  {
    id:"bmy", lv:"lv1", name:"白毛峪核心赏叶小环线", tag:"轻松 · 红叶最密集",
    dist:"1–2 km", climb:"缓坡", time:"1 h 左右", start:"白毛峪（中龙休闲驿站停车场）",
    src:"阅微堂路书", badges:["免费","宠物友好","老人小孩可"],
    highlight:"一两公里的超小环线就能看到舞彩浅山红叶最密集、最壮观的区域",
    steps:[
      "<b>停车整备</b>：中龙休闲驿站停车，卫生间在登山口附近，先解决如厕",
      "<b>进入登山口</b>：沿主步道上山，坡度平缓",
      "<b>核心赏叶区</b>：红叶密集段慢慢走、慢慢拍",
      "<b>环线折返</b>：体力有余可继续向月明涧方向延伸",
      "<b>提示</b>：9 点前到才有车位，晚了路上三公里已停满"
    ],
    fit:"只为看红叶、带老人小孩、带宠物、只有半天时间的人",
    gear:"运动鞋、饮水、外套；拍照建议带充电宝",
    warn:"停车是最大难点，务必早到；仅走核心段约 1 小时，若连走白毛峪—月明涧则升到 8 km 量级"
  },
  {
    id:"ymj", lv:"lv1", name:"月明涧小环线", tag:"轻松 · 避开人潮的赏秋首选",
    dist:"约 5.5 km", climb:"约 350 m", time:"约 3 h", start:"月明涧停车场",
    src:"两步路轨迹 40947072", badges:["免费","有卫生间","老乡摆摊"],
    highlight:"一样能看到最精华的红叶区，最高点可俯视整个前山区域，车比白毛峪好停",
    steps:[
      "<b>月明涧停车场起步</b>：有公共卫生间，很多老乡摆摊，可补给",
      "<b>建议顺时针走</b>：开局一段急促陡坡上升，之后平缓下坡，对膝盖更友好",
      "<b>上到最高点</b>：俯视整个前山区域",
      "<b>后半程是红叶</b>：顺路慢慢游玩，不必赶时间",
      "<b>回到停车场</b>：全程不到 5.5 km"
    ],
    fit:"想要红叶又不想抢车位的人；带娃家庭、休闲游",
    gear:"徒步鞋或防滑运动鞋、1 L 饮水、路餐",
    warn:"9 点前停车还行，12 点后车会排出去约 1 公里；周末尽量上午出发"
  },
  {
    id:"tzs", lv:"lv1", name:"唐指山小环线（木林段）", tag:"轻松 · 湖景躺平版",
    dist:"约 3 km", climb:"约 100 余米", time:"1–1.5 h", start:"唐指山水库 · 贾山停车场（免费）",
    src:"北京旅游网 / 北京国旅稿件", badges:["免费","湖景","观鸟台"],
    highlight:"爬升仅百余米，观景台俯瞰唐指山水库如蓝宝石，秋日有机会邂逅黑鹳",
    steps:[
      "<b>贾山停车场起步</b>：免费停车，车位相对宽裕",
      "<b>平路 + 山地混合</b>：缓坡上行，原始石板路",
      "<b>登顶凉亭</b>：休憩纳凉，林间光影很出片",
      "<b>观景台</b>：俯瞰唐指山水库，运气好可见国家一级保护动物黑鹳",
      "<b>环线返回停车场</b>"
    ],
    fit:"不想爬太多、想看湖景与秋色的人；带老人小孩",
    gear:"常规运动鞋、饮水；观鸟可带望远镜",
    warn:"木林段开放时间约 8:30–17:00，别贪晚；公交可乘 970 路到唐指山水库站"
  },
  {
    id:"yzg", lv:"lv2", name:"峪子沟—双佛山", tag:"适中 · 地貌野趣",
    dist:"5.5 km", climb:"284 m", time:"约 2 h 45 min", start:"峪子沟停车场 / 茶棚村",
    src:"2025-10 媒体路书", badges:["免费","彩丘地貌","碎石陡窄段"],
    highlight:"可近距离看彩丘丹霞地貌，主支线自由组合，两个岔口都能进出不易走错",
    steps:[
      "<b>进景区</b>：正前方与右侧均有入口通往双佛山，任选其一进出",
      "<b>选线</b>：支线经四合院—小五台—骆驼峰回到峪子沟，景观更多",
      "<b>前段约 2 km</b>：路况较好，走起来轻松",
      "<b>进入双佛山后</b>：路段明显变陡变窄，多为碎石",
      "<b>岔路选择</b>：平坦公路省力，原生态步道更有野趣"
    ],
    fit:"有徒步经验、喜欢地貌与野趣的人",
    gear:"防滑登山鞋必备，建议登山杖与护膝",
    warn:"双佛山段碎石陡滑，雨后慎行；不建议带低龄儿童"
  },
  {
    id:"bmymj", lv:"lv2", name:"白毛峪—月明涧", tag:"适中 · 山脊视野",
    dist:"约 8 km", climb:"接近 400 m", time:"3.5–4 h", start:"白毛峪 / 月明涧停车场",
    src:"阅微堂路书（2020）", badges:["免费","山脊行走","红叶"],
    highlight:"很长一段走在山脊上，视野开阔，是通常两千米以上高山才有的观感",
    steps:[
      "<b>白毛峪或月明涧起步</b>：两口之间互通，可按停车情况选起点",
      "<b>爬升至山脊</b>：连续爬坡后进入开阔山脊路段",
      "<b>山脊横切</b>：视野开阔，秋色层次完整，适合拍照",
      "<b>下撤至另一口</b>：可走环线回到起点，也可两口对穿",
      "<b>秋季重点</b>：红叶集中在白毛峪一侧"
    ],
    fit:"走过几次山、想看更开阔风景的亲子或成人队伍",
    gear:"登山鞋、1.5 L 饮水、防风外套",
    warn:"山脊段无遮挡，风大、日晒强；两头停车情况差异大，提前定好起点"
  },
  {
    id:"track105", lv:"lv2", name:"舞彩浅山环线（轨迹 50480863）", tag:"适中 · 纯轨迹线",
    dist:"10.63 km", climb:"492 m", time:"约 3 h 27 min", start:"按轨迹起点（伴驴部落记录）",
    src:"两步路轨迹 50480863", badges:["免费","均速 3.07 km/h","最高 319 m"],
    highlight:"一条完整环线的真实记录：10.63 km、累计爬升 492 m、均速 3.07 km/h，可直接照着走",
    steps:[
      "<b>导入轨迹</b>：两步路 App 内搜索轨迹编号 50480863",
      "<b>按记录节奏走</b>：全程 3 小时 27 分，均速约 3 km/h",
      "<b>爬升集中在中段</b>：累计 492 m，最高海拔 319 m",
      "<b>环线闭合</b>：回到起点，不必接驳",
      "<b>可裁剪</b>：体力不足可在中段提前下撤"
    ],
    fit:"习惯用轨迹 App 导航、想照着真实记录走的人",
    gear:"登山鞋、1.5 L 饮水、路餐、离线轨迹",
    warn:"轨迹为网友记录，路况与通行性可能变化，出发前确认岔口是否仍可通行"
  },
  {
    id:"xmf", lv:"lv3", name:"降魔顶—丰台顶", tag:"挑战 · 顺义最高峰",
    dist:"近 12 km", climb:"接近 1000 m", time:"5–7 h", start:"峪子沟停车场（免费，有小摊贩）",
    src:"阅微堂路书（2023）", badges:["免费","顺义最高峰","岩石路段"],
    highlight:"登顺义最高峰降魔顶（627 m），可连走丰台顶双峰；北侧秋色略逊，但爬升体验极强",
    steps:[
      "<b>峪子沟停车场起步</b>：停车免费，有小摊贩可补给",
      "<b>向降魔顶爬升</b>：石头路段繁多，部分陡峭，技术要求较高",
      "<b>登顶降魔顶</b>：海拔 627 m，顶有小方水泥墩，顺义与密云界山",
      "<b>连走丰台顶双峰</b>：体力有余可继续，距离与爬升相应增加",
      "<b>环线下撤</b>：也可沿山脊绕行一周，先降魔顶后丰台顶"
    ],
    fit:"有岩石路段经验、体力充沛的徒步者；不建议低龄儿童",
    gear:"登山鞋、头盔可选、手套、2 L 饮水、路餐、头灯",
    warn:"落石风险不可忽视，陡峭处手脚并用；缺乏经验的孩子务必谨慎，雨雪天不要走"
  },
  {
    id:"long", lv:"lv3", name:"安辛庄—降魔顶—小北坞 穿越", tag:"挑战 · 长距离穿越",
    dist:"16.1 km", climb:"累计上升 1012 m", time:"7 h 左右", start:"安辛庄（顺 36 路可达）",
    src:"六只脚行程记录", badges:["免费","界山穿越","最高 627 m"],
    highlight:"经典长穿：海拔 42–627 m，累计上升 1012 m、下降 997 m，路线强度约 2.2（初级偏上）",
    steps:[
      "<b>公交到达安辛庄</b>：东直门 918 路到俸伯站，换乘顺 36 路",
      "<b>向丰台顶、降魔顶爬升</b>：累计上升约 1012 m，为主爬升段",
      "<b>降魔顶</b>：海拔 627 m，顺义与密云界山",
      "<b>下撤至小北坞</b>：累计下降约 997 m，注意膝盖与防滑",
      "<b>小北坞村北坐顺 36 路回城</b>"
    ],
    fit:"有长穿经验、能走满一天的人；需自行安排接驳或公交末班",
    gear:"登山鞋、登山杖、2 L 以上饮水、路餐、头灯、保暖层、离线轨迹",
    warn:"出发早、算好末班车；全程 7 小时左右，冬季与防火期禁止进入"
  }
];
const LVNAME = {lv1:"轻松", lv2:"适中", lv3:"挑战"};
const grid = document.getElementById("grid");
const tbody = document.getElementById("tbody");
const detail = document.getElementById("detail");
function cardHTML(r){
  return '<div class="card '+r.lv+'" data-id="'+r.id+'">'
    + '<div class="stripe"></div>'
    + '<h3>'+r.name+'<small>'+r.tag+'</small></h3>'
    + '<div class="badges"><span class="badge '+r.lv+'">'+LVNAME[r.lv]+'</span>'
    + r.badges.map(b=>'<span class="badge">'+b+'</span>').join('')
    + '</div>'
    + '<div style="font-size:13.5px;color:var(--ink-2)">'+r.highlight+'</div>'
    + '<div class="metrics">'
    + '<div class="metric">里程<b>'+r.dist+'</b></div>'
    + '<div class="metric">爬升<b>'+r.climb+'</b></div>'
    + '<div class="metric">用时<b>'+r.time+'</b></div>'
    + '</div></div>';
}
function render(filter){
  const list = ROUTES.filter(r=>filter==="all"||r.lv===filter);
  grid.innerHTML = list.map(cardHTML).join('');
  tbody.innerHTML = ROUTES.map(r=>'<tr><td><b>'+r.name+'</b><br><span style="color:var(--ink-3);font-size:12px">'+r.tag+'</span></td>'
    +'<td>'+LVNAME[r.lv]+'</td><td>'+r.dist+'</td><td>'+r.climb+'</td><td>'+r.time+'</td>'
    +'<td>'+r.start+'</td><td style="color:var(--ink-3);font-size:12.5px">'+r.src+'</td></tr>').join('');
  grid.querySelectorAll(".card").forEach(c=>{
    c.onclick = ()=>{
      grid.querySelectorAll(".card").forEach(x=>x.classList.remove("active"));
      c.classList.add("active");
      showDetail(c.dataset.id);
      if(window.innerWidth<700){detail.scrollIntoView({behavior:"smooth",block:"start"});}
    };
  });
}
function showDetail(id){
  const r = ROUTES.find(x=>x.id===id);
  if(!r) return;
  detail.innerHTML = '<h3>'+r.name+'</h3>'
    + '<div class="dsub">'+r.tag+' · 建议 '+r.time+' · 起点：'+r.start+'</div>'
    + '<div class="dgrid">'
    + '<div class="dbox"><h4>路书（按顺序走）</h4><ol class="steps">'+r.steps.map(s=>'<li>'+s+'</li>').join('')+'</ol></div>'
    + '<div class="dbox"><h4>适合谁</h4><ul><li>'+r.fit+'</li></ul>'
    + '<h4 style="margin-top:14px">建议装备</h4><ul><li>'+r.gear+'</li></ul></div>'
    + '</div>'
    + '<div class="trk">数据来源：'+r.src+'。里程 / 爬升为记录值，实际以轨迹 App 与现场导览牌为准。</div>'
    + '<div class="warn"><b>注意：</b>'+r.warn+'</div>';
  detail.classList.add("show");
}
document.querySelectorAll(".chip").forEach(b=>{
  b.onclick = ()=>{
    document.querySelectorAll(".chip").forEach(x=>x.classList.remove("on"));
    b.classList.add("on");
    detail.classList.remove("show");
    render(b.dataset.f);
  };
});
const vc = document.getElementById("vCard"), vt = document.getElementById("vTable");
const tw = document.getElementById("tablewrap");
vt.onclick = ()=>{vt.classList.add("on");vc.classList.remove("on");tw.classList.add("show");grid.style.display="none";detail.classList.remove("show");};
vc.onclick = ()=>{vc.classList.add("on");vt.classList.remove("on");tw.classList.remove("show");grid.style.display="grid";};
const CHECKS = [
  ["防滑登山鞋","双佛山、降魔顶多石头陡段，普通鞋极易打滑"],
  ["饮水 1.5–2 L","沿途基本无售卖，补水点不稳定"],
  ["路餐 / 能量补给","长线建议正餐级补给，能量棒与巧克力常备"],
  ["离线轨迹（提前下载）","山里信号不稳，两步路 / 六只脚导入轨迹号"],
  ["防风保暖外套 + 防晒帽","山脊无遮挡，早晚温差大"],
  ["登山杖 / 护膝","长下坡能省不少膝盖"],
  ["头灯 + 充电宝","12 km 以上线路必备，防止走夜路"],
  ["创可贴、纸巾、垃圾袋","无痕山林，垃圾全部带走"],
  ["停车预案","红叶季 9 点前到，备选月明涧或峪子沟"]
];
const KEY = "wucai-checks-v2";
let saved = {};
try{ saved = JSON.parse(localStorage.getItem(KEY)||"{}"); }catch(e){ saved = {}; }
const cbox = document.getElementById("checks");
cbox.innerHTML = CHECKS.map((c,i)=>'<label class="check'+(saved[i]?" done":"")+'">'
  +'<input type="checkbox" data-i="'+i+'"'+(saved[i]?" checked":"")+'>'
  +'<span class="ct">'+c[0]+'<small>'+c[1]+'</small></span></label>').join('');
cbox.querySelectorAll("input").forEach(inp=>{
  inp.onchange = ()=>{
    saved[inp.dataset.i] = inp.checked;
    inp.closest(".check").classList.toggle("done", inp.checked);
    try{ localStorage.setItem(KEY, JSON.stringify(saved)); }catch(e){}
  };
});
render("all");
showDetail("ymj");
const first = grid.querySelector('.card[data-id="ymj"]');
if(first) first.classList.add("active");
</script>
</div>

<style>
.wq,.wq *{box-sizing:border-box;height:auto;max-height:none;min-height:0;filter:none}
.wq {
    --bg:#fbf7f1;--card:#fff;--ink:#2b2118;--ink-2:#6b5b4b;--ink-3:#9a8877;
    --line:#e8ddcd;--brand:#c8552f;--brand-soft:#fdeee5;--leaf:#5c7f4f;--leaf-soft:#eaf1e6;
    --gold:#d99a2b;--gold-soft:#fbf1de;--shadow:0 2px 10px rgba(90,66,40,.07);--radius:16px;
  }
.wq * {box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.wq {margin:0;background:var(--bg);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;}
.wq .wrap {max-width:980px;margin:0 auto;padding:0 18px 72px}
.wq .hero {position:relative;overflow:hidden;background:linear-gradient(160deg,#f6d9b0 0%,#e9a86b 38%,#c8552f 100%);
    color:#fff;padding:38px 20px 30px;margin-bottom:24px}
.wq .hero-inner {max-width:980px;margin:0 auto;position:relative;z-index:2}
.wq .kicker {font-size:13px;letter-spacing:.14em;opacity:.9;margin-bottom:8px}
.wq h1 {margin:0 0 10px;font-size:30px;line-height:1.25;letter-spacing:.5px}
.wq .sub {margin:0;max-width:660px;font-size:15px;opacity:.95}
.wq .hero svg.hills {position:absolute;left:0;right:0;bottom:-1px;width:100%;height:90px;display:block;z-index:1;opacity:.55}
.wq .factbar {display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;position:relative;z-index:2}
.wq .fact {background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.32);border-radius:12px;padding:8px 13px;font-size:13px}
.wq .fact b {display:block;font-size:16px;font-weight:700}
.wq section {margin-bottom:32px}
.wq h2 {font-size:20px;margin:0 0 4px;display:flex;align-items:center;gap:8px}
.wq h2::before {content:"";width:5px;height:18px;border-radius:3px;background:var(--brand)}
.wq .hint {color:var(--ink-3);font-size:13px;margin:0 0 14px}
.wq .toolbar {display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.wq .chip {border:1px solid var(--line);background:#fff;color:var(--ink-2);padding:7px 14px;border-radius:999px;font-size:13px;cursor:pointer;transition:.15s}
.wq .chip:hover {border-color:var(--brand);color:var(--brand)}
.wq .chip.on {background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.wq .spacer {flex:1}
.wq .viewtoggle {display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.wq .viewtoggle button {border:0;background:transparent;padding:7px 14px;font-size:13px;cursor:pointer;color:var(--ink-2)}
.wq .viewtoggle button.on {background:var(--brand);color:#fff;font-weight:600}
.wq .grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:14px}
.wq .card {background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);
    cursor:pointer;transition:.16s;display:flex;flex-direction:column;gap:9px;position:relative;overflow:hidden}
.wq .card:hover {transform:translateY(-2px);box-shadow:0 6px 18px rgba(90,66,40,.12);border-color:#dcc9b2}
.wq .card.active {border-color:var(--brand);box-shadow:0 6px 20px rgba(200,85,47,.2)}
.wq .card .stripe {position:absolute;top:0;left:0;right:0;height:4px}
.wq .lv1 .stripe {background:var(--leaf)}
.wq .lv2 .stripe {background:var(--gold)}
.wq .lv3 .stripe {background:var(--brand)}
.wq .card h3 {margin:0;font-size:16.5px;line-height:1.4}
.wq .card h3 small {display:block;font-weight:400;color:var(--ink-3);font-size:12.5px;margin-top:2px}
.wq .badges {display:flex;flex-wrap:wrap;gap:6px}
.wq .badge {font-size:11.5px;padding:3px 9px;border-radius:6px;background:#f3ece2;color:var(--ink-2)}
.wq .badge.lv1 {background:var(--leaf-soft);color:var(--leaf)}
.wq .badge.lv2 {background:var(--gold-soft);color:#a8721a}
.wq .badge.lv3 {background:var(--brand-soft);color:var(--brand)}
.wq .metrics {display:flex;gap:12px;border-top:1px dashed var(--line);padding-top:10px;margin-top:auto}
.wq .metric {font-size:12px;color:var(--ink-3)}
.wq .metric b {display:block;font-size:16.5px;color:var(--ink);font-weight:700;line-height:1.25}
.wq .detail {background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-top:16px;display:none}
.wq .detail.show {display:block;animation:fade .25s ease}
@keyframes fade {from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wq .detail h3 {margin:0 0 2px;font-size:19px}
.wq .detail .dsub {color:var(--ink-3);font-size:13px;margin-bottom:14px}
.wq .dgrid {display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.wq .dbox h4 {margin:0 0 6px;font-size:13.5px;color:var(--brand);letter-spacing:.3px}
.wq .dbox ul {margin:0;padding-left:18px;font-size:14px;color:var(--ink-2)}
.wq .dbox li {margin-bottom:5px}
.wq .steps {margin:0;padding:0;list-style:none;counter-reset:s}
.wq .steps li {counter-increment:s;position:relative;padding:0 0 13px 34px;font-size:14px;color:var(--ink-2);
    border-left:1.5px dashed var(--line);margin-left:10px}
.wq .steps li:last-child {border-left-color:transparent;padding-bottom:0}
.wq .steps li::before {content:counter(s);position:absolute;left:-11px;top:0;width:22px;height:22px;border-radius:50%;
    background:var(--brand);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.wq .steps li b {color:var(--ink)}
.wq .trk {margin-top:12px;font-size:12.5px;color:var(--ink-3);background:#f7f1e8;border-radius:8px;padding:8px 11px}
.wq .warn {margin-top:12px;background:#fdf4ec;border:1px solid #f2d9c2;border-left:4px solid var(--brand);
    border-radius:10px;padding:11px 14px;font-size:13.5px;color:#8a4a25}
.wq .tablewrap {display:none;overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.wq .tablewrap.show {display:block}
.wq table {border-collapse:collapse;width:100%;min-width:700px;font-size:13.5px}
.wq th,
.wq td {padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.wq th {background:#f7f1e8;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.wq tbody tr:hover {background:#fdfaf5}
.wq td b {color:var(--ink)}
.wq .chart {background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.wq .chart svg {width:100%;height:auto;display:block}
.wq .checks {display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.wq .check {display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);
    border-radius:12px;padding:11px 13px;cursor:pointer;font-size:14px;transition:.15s}
.wq .check:hover {border-color:#dcc9b2}
.wq .check input {margin-top:4px;accent-color:var(--brand);width:15px;height:15px}
.wq .check.done {background:var(--leaf-soft);border-color:#cfe0c7}
.wq .check.done .ct {text-decoration:line-through;color:var(--ink-3)}
.wq .check small {display:block;color:var(--ink-3);font-size:12px;text-decoration:none!important}
.wq .cols {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.wq .panel {background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.wq .panel h4 {margin:0 0 8px;font-size:15px}
.wq .panel p,
.wq .panel li {font-size:13.5px;color:var(--ink-2);margin:0 0 6px}
.wq .panel ul {padding-left:18px;margin:0}
.wq .park {background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.wq .park table {min-width:520px}
.wq .season {display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.wq .mon {flex:1;min-width:62px;border-radius:10px;padding:8px 6px;text-align:center;font-size:12px;background:#f3ece2;color:var(--ink-2)}
.wq .mon b {display:block;font-size:13px}
.wq .mon.hot {background:linear-gradient(180deg,#f0b95c,#c8552f);color:#fff}
.wq .mon.ok {background:var(--leaf-soft);color:var(--leaf)}
.wq .srcnote {font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:18px;line-height:1.85;text-align:left}
.wq .srcnote b {color:var(--ink-2)}
.wq .xlink {text-align:center;font-size:13px;color:var(--ink-2);margin:26px 0 0}
.wq .xlink a {color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(200,85,47,.35)}
@media (max-width:600px) {.wq h1 {font-size:24px}
.wq .wrap {padding:0 14px 56px}
.wq .hero {padding:28px 14px 24px}}
</style>

<script>
const ROUTES = [
  {
    id:"bmy", lv:"lv1", name:"白毛峪核心赏叶小环线", tag:"轻松 · 红叶最密集",
    dist:"1–2 km", climb:"缓坡", time:"1 h 左右", start:"白毛峪（中龙休闲驿站停车场）",
    src:"阅微堂路书", badges:["免费","宠物友好","老人小孩可"],
    highlight:"一两公里的超小环线就能看到舞彩浅山红叶最密集、最壮观的区域",
    steps:[
      "<b>停车整备</b>：中龙休闲驿站停车，卫生间在登山口附近，先解决如厕",
      "<b>进入登山口</b>：沿主步道上山，坡度平缓",
      "<b>核心赏叶区</b>：红叶密集段慢慢走、慢慢拍",
      "<b>环线折返</b>：体力有余可继续向月明涧方向延伸",
      "<b>提示</b>：9 点前到才有车位，晚了路上三公里已停满"
    ],
    fit:"只为看红叶、带老人小孩、带宠物、只有半天时间的人",
    gear:"运动鞋、饮水、外套；拍照建议带充电宝",
    warn:"停车是最大难点，务必早到；仅走核心段约 1 小时，若连走白毛峪—月明涧则升到 8 km 量级"
  },
  {
    id:"ymj", lv:"lv1", name:"月明涧小环线", tag:"轻松 · 避开人潮的赏秋首选",
    dist:"约 5.5 km", climb:"约 350 m", time:"约 3 h", start:"月明涧停车场",
    src:"两步路轨迹 40947072", badges:["免费","有卫生间","老乡摆摊"],
    highlight:"一样能看到最精华的红叶区，最高点可俯视整个前山区域，车比白毛峪好停",
    steps:[
      "<b>月明涧停车场起步</b>：有公共卫生间，很多老乡摆摊，可补给",
      "<b>建议顺时针走</b>：开局一段急促陡坡上升，之后平缓下坡，对膝盖更友好",
      "<b>上到最高点</b>：俯视整个前山区域",
      "<b>后半程是红叶</b>：顺路慢慢游玩，不必赶时间",
      "<b>回到停车场</b>：全程不到 5.5 km"
    ],
    fit:"想要红叶又不想抢车位的人；带娃家庭、休闲游",
    gear:"徒步鞋或防滑运动鞋、1 L 饮水、路餐",
    warn:"9 点前停车还行，12 点后车会排出去约 1 公里；周末尽量上午出发"
  },
  {
    id:"tzs", lv:"lv1", name:"唐指山小环线（木林段）", tag:"轻松 · 湖景躺平版",
    dist:"约 3 km", climb:"约 100 余米", time:"1–1.5 h", start:"唐指山水库 · 贾山停车场（免费）",
    src:"北京旅游网 / 北京国旅稿件", badges:["免费","湖景","观鸟台"],
    highlight:"爬升仅百余米，观景台俯瞰唐指山水库如蓝宝石，秋日有机会邂逅黑鹳",
    steps:[
      "<b>贾山停车场起步</b>：免费停车，车位相对宽裕",
      "<b>平路 + 山地混合</b>：缓坡上行，原始石板路",
      "<b>登顶凉亭</b>：休憩纳凉，林间光影很出片",
      "<b>观景台</b>：俯瞰唐指山水库，运气好可见国家一级保护动物黑鹳",
      "<b>环线返回停车场</b>"
    ],
    fit:"不想爬太多、想看湖景与秋色的人；带老人小孩",
    gear:"常规运动鞋、饮水；观鸟可带望远镜",
    warn:"木林段开放时间约 8:30–17:00，别贪晚；公交可乘 970 路到唐指山水库站"
  },
  {
    id:"yzg", lv:"lv2", name:"峪子沟—双佛山", tag:"适中 · 地貌野趣",
    dist:"5.5 km", climb:"284 m", time:"约 2 h 45 min", start:"峪子沟停车场 / 茶棚村",
    src:"2025-10 媒体路书", badges:["免费","彩丘地貌","碎石陡窄段"],
    highlight:"可近距离看彩丘丹霞地貌，主支线自由组合，两个岔口都能进出不易走错",
    steps:[
      "<b>进景区</b>：正前方与右侧均有入口通往双佛山，任选其一进出",
      "<b>选线</b>：支线经四合院—小五台—骆驼峰回到峪子沟，景观更多",
      "<b>前段约 2 km</b>：路况较好，走起来轻松",
      "<b>进入双佛山后</b>：路段明显变陡变窄，多为碎石",
      "<b>岔路选择</b>：平坦公路省力，原生态步道更有野趣"
    ],
    fit:"有徒步经验、喜欢地貌与野趣的人",
    gear:"防滑登山鞋必备，建议登山杖与护膝",
    warn:"双佛山段碎石陡滑，雨后慎行；不建议带低龄儿童"
  },
  {
    id:"bmymj", lv:"lv2", name:"白毛峪—月明涧", tag:"适中 · 山脊视野",
    dist:"约 8 km", climb:"接近 400 m", time:"3.5–4 h", start:"白毛峪 / 月明涧停车场",
    src:"阅微堂路书（2020）", badges:["免费","山脊行走","红叶"],
    highlight:"很长一段走在山脊上，视野开阔，是通常两千米以上高山才有的观感",
    steps:[
      "<b>白毛峪或月明涧起步</b>：两口之间互通，可按停车情况选起点",
      "<b>爬升至山脊</b>：连续爬坡后进入开阔山脊路段",
      "<b>山脊横切</b>：视野开阔，秋色层次完整，适合拍照",
      "<b>下撤至另一口</b>：可走环线回到起点，也可两口对穿",
      "<b>秋季重点</b>：红叶集中在白毛峪一侧"
    ],
    fit:"走过几次山、想看更开阔风景的亲子或成人队伍",
    gear:"登山鞋、1.5 L 饮水、防风外套",
    warn:"山脊段无遮挡，风大、日晒强；两头停车情况差异大，提前定好起点"
  },
  {
    id:"track105", lv:"lv2", name:"舞彩浅山环线（轨迹 50480863）", tag:"适中 · 纯轨迹线",
    dist:"10.63 km", climb:"492 m", time:"约 3 h 27 min", start:"按轨迹起点（伴驴部落记录）",
    src:"两步路轨迹 50480863", badges:["免费","均速 3.07 km/h","最高 319 m"],
    highlight:"一条完整环线的真实记录：10.63 km、累计爬升 492 m、均速 3.07 km/h，可直接照着走",
    steps:[
      "<b>导入轨迹</b>：两步路 App 内搜索轨迹编号 50480863",
      "<b>按记录节奏走</b>：全程 3 小时 27 分，均速约 3 km/h",
      "<b>爬升集中在中段</b>：累计 492 m，最高海拔 319 m",
      "<b>环线闭合</b>：回到起点，不必接驳",
      "<b>可裁剪</b>：体力不足可在中段提前下撤"
    ],
    fit:"习惯用轨迹 App 导航、想照着真实记录走的人",
    gear:"登山鞋、1.5 L 饮水、路餐、离线轨迹",
    warn:"轨迹为网友记录，路况与通行性可能变化，出发前确认岔口是否仍可通行"
  },
  {
    id:"xmf", lv:"lv3", name:"降魔顶—丰台顶", tag:"挑战 · 顺义最高峰",
    dist:"近 12 km", climb:"接近 1000 m", time:"5–7 h", start:"峪子沟停车场（免费，有小摊贩）",
    src:"阅微堂路书（2023）", badges:["免费","顺义最高峰","岩石路段"],
    highlight:"登顺义最高峰降魔顶（627 m），可连走丰台顶双峰；北侧秋色略逊，但爬升体验极强",
    steps:[
      "<b>峪子沟停车场起步</b>：停车免费，有小摊贩可补给",
      "<b>向降魔顶爬升</b>：石头路段繁多，部分陡峭，技术要求较高",
      "<b>登顶降魔顶</b>：海拔 627 m，顶有小方水泥墩，顺义与密云界山",
      "<b>连走丰台顶双峰</b>：体力有余可继续，距离与爬升相应增加",
      "<b>环线下撤</b>：也可沿山脊绕行一周，先降魔顶后丰台顶"
    ],
    fit:"有岩石路段经验、体力充沛的徒步者；不建议低龄儿童",
    gear:"登山鞋、头盔可选、手套、2 L 饮水、路餐、头灯",
    warn:"落石风险不可忽视，陡峭处手脚并用；缺乏经验的孩子务必谨慎，雨雪天不要走"
  },
  {
    id:"long", lv:"lv3", name:"安辛庄—降魔顶—小北坞 穿越", tag:"挑战 · 长距离穿越",
    dist:"16.1 km", climb:"累计上升 1012 m", time:"7 h 左右", start:"安辛庄（顺 36 路可达）",
    src:"六只脚行程记录", badges:["免费","界山穿越","最高 627 m"],
    highlight:"经典长穿：海拔 42–627 m，累计上升 1012 m、下降 997 m，路线强度约 2.2（初级偏上）",
    steps:[
      "<b>公交到达安辛庄</b>：东直门 918 路到俸伯站，换乘顺 36 路",
      "<b>向丰台顶、降魔顶爬升</b>：累计上升约 1012 m，为主爬升段",
      "<b>降魔顶</b>：海拔 627 m，顺义与密云界山",
      "<b>下撤至小北坞</b>：累计下降约 997 m，注意膝盖与防滑",
      "<b>小北坞村北坐顺 36 路回城</b>"
    ],
    fit:"有长穿经验、能走满一天的人；需自行安排接驳或公交末班",
    gear:"登山鞋、登山杖、2 L 以上饮水、路餐、头灯、保暖层、离线轨迹",
    warn:"出发早、算好末班车；全程 7 小时左右，冬季与防火期禁止进入"
  }
];

const LVNAME = {lv1:"轻松", lv2:"适中", lv3:"挑战"};
const grid = document.getElementById("grid");
const tbody = document.getElementById("tbody");
const detail = document.getElementById("detail");

function cardHTML(r){
  return '<div class="card '+r.lv+'" data-id="'+r.id+'">'
    + '<div class="stripe"></div>'
    + '<h3>'+r.name+'<small>'+r.tag+'</small></h3>'
    + '<div class="badges"><span class="badge '+r.lv+'">'+LVNAME[r.lv]+'</span>'
    + r.badges.map(b=>'<span class="badge">'+b+'</span>').join('')
    + '</div>'
    + '<div style="font-size:13.5px;color:var(--ink-2)">'+r.highlight+'</div>'
    + '<div class="metrics">'
    + '<div class="metric">里程<b>'+r.dist+'</b></div>'
    + '<div class="metric">爬升<b>'+r.climb+'</b></div>'
    + '<div class="metric">用时<b>'+r.time+'</b></div>'
    + '</div></div>';
}

function render(filter){
  const list = ROUTES.filter(r=>filter==="all"||r.lv===filter);
  grid.innerHTML = list.map(cardHTML).join('');
  tbody.innerHTML = ROUTES.map(r=>'<tr><td><b>'+r.name+'</b><br><span style="color:var(--ink-3);font-size:12px">'+r.tag+'</span></td>'
    +'<td>'+LVNAME[r.lv]+'</td><td>'+r.dist+'</td><td>'+r.climb+'</td><td>'+r.time+'</td>'
    +'<td>'+r.start+'</td><td style="color:var(--ink-3);font-size:12.5px">'+r.src+'</td></tr>').join('');
  grid.querySelectorAll(".card").forEach(c=>{
    c.onclick = ()=>{
      grid.querySelectorAll(".card").forEach(x=>x.classList.remove("active"));
      c.classList.add("active");
      showDetail(c.dataset.id);
      if(window.innerWidth<700){detail.scrollIntoView({behavior:"smooth",block:"start"});}
    };
  });
}

function showDetail(id){
  const r = ROUTES.find(x=>x.id===id);
  if(!r) return;
  detail.innerHTML = '<h3>'+r.name+'</h3>'
    + '<div class="dsub">'+r.tag+' · 建议 '+r.time+' · 起点：'+r.start+'</div>'
    + '<div class="dgrid">'
    + '<div class="dbox"><h4>路书（按顺序走）</h4><ol class="steps">'+r.steps.map(s=>'<li>'+s+'</li>').join('')+'</ol></div>'
    + '<div class="dbox"><h4>适合谁</h4><ul><li>'+r.fit+'</li></ul>'
    + '<h4 style="margin-top:14px">建议装备</h4><ul><li>'+r.gear+'</li></ul></div>'
    + '</div>'
    + '<div class="trk">数据来源：'+r.src+'。里程 / 爬升为记录值，实际以轨迹 App 与现场导览牌为准。</div>'
    + '<div class="warn"><b>注意：</b>'+r.warn+'</div>';
  detail.classList.add("show");
}

document.querySelectorAll(".chip").forEach(b=>{
  b.onclick = ()=>{
    document.querySelectorAll(".chip").forEach(x=>x.classList.remove("on"));
    b.classList.add("on");
    detail.classList.remove("show");
    render(b.dataset.f);
  };
});

const vc = document.getElementById("vCard"), vt = document.getElementById("vTable");
const tw = document.getElementById("tablewrap");
vt.onclick = ()=>{vt.classList.add("on");vc.classList.remove("on");tw.classList.add("show");grid.style.display="none";detail.classList.remove("show");};
vc.onclick = ()=>{vc.classList.add("on");vt.classList.remove("on");tw.classList.remove("show");grid.style.display="grid";};

const CHECKS = [
  ["防滑登山鞋","双佛山、降魔顶多石头陡段，普通鞋极易打滑"],
  ["饮水 1.5–2 L","沿途基本无售卖，补水点不稳定"],
  ["路餐 / 能量补给","长线建议正餐级补给，能量棒与巧克力常备"],
  ["离线轨迹（提前下载）","山里信号不稳，两步路 / 六只脚导入轨迹号"],
  ["防风保暖外套 + 防晒帽","山脊无遮挡，早晚温差大"],
  ["登山杖 / 护膝","长下坡能省不少膝盖"],
  ["头灯 + 充电宝","12 km 以上线路必备，防止走夜路"],
  ["创可贴、纸巾、垃圾袋","无痕山林，垃圾全部带走"],
  ["停车预案","红叶季 9 点前到，备选月明涧或峪子沟"]
];
const KEY = "wucai-checks-v2";
let saved = {};
try{ saved = JSON.parse(localStorage.getItem(KEY)||"{}"); }catch(e){ saved = {}; }
const cbox = document.getElementById("checks");
cbox.innerHTML = CHECKS.map((c,i)=>'<label class="check'+(saved[i]?" done":"")+'">'
  +'<input type="checkbox" data-i="'+i+'"'+(saved[i]?" checked":"")+'>'
  +'<span class="ct">'+c[0]+'<small>'+c[1]+'</small></span></label>').join('');
cbox.querySelectorAll("input").forEach(inp=>{
  inp.onchange = ()=>{
    saved[inp.dataset.i] = inp.checked;
    inp.closest(".check").classList.toggle("done", inp.checked);
    try{ localStorage.setItem(KEY, JSON.stringify(saved)); }catch(e){}
  };
});

render("all");
showDetail("ymj");
const first = grid.querySelector('.card[data-id="ymj"]');
if(first) first.classList.add("active");
</script>