地图铺满整个视口宽度（批 18）

反馈：界面宽度是固定的（正文版心 1080px 居中），地图也被框在这一条里。
按用户选择：**只让地图突破版心、占满整屏**，列表与文字仍保持版心（宽屏下好读）。

- 首页「旅行地图」与详情页「行程路线」都铺满整个视口宽度，
  高度改成 `clamp(460px, calc(100vh - 190px), 1000px)` —— 屏幕越大容器越大，
  地图显示的地理范围也越大（AMap 填满容器 + fitView 按当前视野重算），
  等于跟着分辨率自动缩放。
- 改窗口大小 / 旋转屏幕时：重算出量 → `map.resize()` → 重新适配视野并重排标记
  （200ms 防抖）。

🔴 出血量为什么由 JS 给（模板里的 `bleed()`）：
版心留白是 `max(gutter, (100% - 1080px)/2)`，**自定义属性里的 100% 是在「使用它的
那个元素」上解析的** —— 把它取负直接写在地图元素（它在版心内部，宽 1080）上，
算出来只有 -gutter，实测地图只铺到 1128/1440。
所以改成读 container 实际渲染出来的 `padding-left` 再取负。
也不写 `width: 100vw`：它含滚动条宽度，会让整页横向溢出。

验证：两条几何断言钉住「铺满」+「不溢出」（详情页 18 项 / 首页 29 项），
首页还逐档改视口（390 / 768 / 1280 / 1920 / 2560）各量一次 —— 是真的改视口，
不是只看默认尺寸。另重抓了一次线上快照，用工作树 CSS 跑布局几何检查 385 项。
本地全链 13 步全绿（渲染检查 372 项）；远端 e2e 365 项 0 失败；
部署静态断言 213 条 0 FAIL、双 PHP 渲染逐字节一致、内容断言全过。

assets/style.css

@@ -1334,9 +1334,6 @@ video.video-thumb.video-thumb-mini {
 .loc-detail { margin-top: 6px; font-size: 12.5px; word-break: break-all; }
 
 /* ── 22. 首页：旅行地图 + 活动列表两个标签页（批 16）───────────── */
-/* 首页的地图是主视图，比详情页那张再高一点 */
-.home-map { height: clamp(520px, 78vh, 920px); }
-
 /* 一次旅行一枚图标：圆形（有封面放封面，没有放 📍）+ 下面一行活动名 */
 .home-marker-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
 .home-marker {
@@ -1398,5 +1395,29 @@ video.video-thumb.video-thumb-mini {
 
 @media (max-width: 560px) {
     .act-row { grid-template-columns: 104px 1fr; gap: 12px; padding: 10px; }
-    .home-map { height: clamp(420px, 62vh, 620px); }
+}
+
+/* ── 23. 地图铺满整屏（批 18）──────────────────────────────────────────── */
+/* 行程路线 / 旅行地图：**突破正文版心，占满整个视口宽度**；
+   高度跟着视口高度走 —— 屏幕越大容器越大，地图显示的地理范围也越大
+   （AMap 填满容器，fitView 按当前视野重算，等于跟着分辨率自动缩放）。
+   ⚠️ 左右出血的 margin **由 JS 给**：版心留白是 `max(gutter, (100% - 1080px)/2)`，
+      而这个 100% 在**使用它的元素**上解析 —— 直接写「负的版心留白」在地图元素上
+      算出来只有 -gutter（实测 156px vs 该有的 180px），铺不满。
+      所以改成读 container 实际渲染出来的 padding-left 再取负（见模板里的 bleed()）。
+      ⚠️ 更不能写 `width: 100vw`：它含滚动条宽度，会让整页横向溢出。
+   ⚠️ 已经贴着视口边缘了，就不要左右边框和圆角了（看着才像一整屏）。 */
+#home-panel-map .route-map,
+#route-panel-map .route-map {
+    height: clamp(460px, calc(100vh - 190px), 1000px);
+    border-radius: 0;
+    border-left: 0;
+    border-right: 0;
+}
+/* 地图下面那句说明：跟着一起出血，只留一个 gutter
+   （不然会孤零零悬在离地图左边缘很远的地方） */
+#home-panel-map .route-map-hint,
+#route-panel-map .route-map-hint {
+    padding-left: var(--gutter);
+    padding-right: var(--gutter);
 }

templates/activities/index.php

@@ -38,7 +38,7 @@ foreach ($activities as $a) {
 </div>
 
 <div class="route-panel" id="home-panel-map">
-    <div class="route-map home-map" id="home-map-canvas"
+    <div class="route-map" id="home-map-canvas"
          data-spots="<?= e(json_encode($spots, JSON_UNESCAPED_UNICODE)) ?>"></div>
     <p class="route-map-hint">每一枚图标是一次旅行（落在那次旅行去过的地方的重心），点图标就进那次旅行的详情。</p>
 </div>
@@ -161,6 +161,21 @@ foreach ($activities as $a) {
             .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
     }
 
+    /* 地图铺满整个视口宽度：把正文版心的左右留白用负 margin 还回去。
+       ⚠️ 不能用 CSS `calc(-1 * var(--shell-pad))`：自定义属性里的 `100%` 是在
+          **使用它的元素**上解析的，写在地图（它在版心内部，宽 1080）上算出来
+          只有 -gutter，实测只能铺到 1128/1440。这里按 container 实际渲染出的
+          padding 反推，才铺得满；也不用 100vw（含滚动条宽度会撑出横向滚动条）。 */
+    function bleed() {
+        var host = el.closest('.container');
+        if (!host) return;
+        var pad = parseFloat(window.getComputedStyle(host).paddingLeft) || 0;
+        if (pad <= 0) return;
+        el.style.marginLeft = (-pad) + 'px';
+        el.style.marginRight = (-pad) + 'px';
+    }
+    bleed();
+
     map = new AMap.Map(el, { viewMode: '2D', zoom: 5 });
     window.__homeMap = map;
 
@@ -244,6 +259,20 @@ foreach ($activities as $a) {
     }
     relayout();
     map.on('zoomend', relayout);
+
+    /* 改窗口大小 / 旋转屏幕 / 换分辨率：地图容器跟着变（宽度是铺满视口的），
+       视野和图标排布都得按新尺寸重算一次。防抖 200ms，别在拖动时反复重排。 */
+    var resizeTimer = null;
+    window.addEventListener('resize', function () {
+        clearTimeout(resizeTimer);
+        resizeTimer = setTimeout(function () {
+            if (!map) return;
+            bleed();            // 版心留白变了，出血量跟着变
+            map.resize();
+            fitView();
+            relayout();
+        }, 200);
+    });
 })();
 </script>
 <?php endif; ?>

templates/activities/show.php

@@ -166,6 +166,20 @@ require dirname(__DIR__) . '/comments/_block.php';
     }
     if (!route.length) return;
 
+    /* 地图铺满整个视口宽度：把正文版心的左右留白用负 margin 还回去。
+       ⚠️ 不能写 CSS `calc(-1 * var(--shell-pad))`：自定义属性里的 `100%` 在使用它的
+          元素上解析，地图在版心内部（宽 1080），算出来只有 -gutter，铺不满。
+          这里读 container 实际渲染出的 padding 反推；也不用 100vw（含滚动条会溢出）。 */
+    function bleed() {
+        var host = el.closest('.container');
+        if (!host) return;
+        var pad = parseFloat(window.getComputedStyle(host).paddingLeft) || 0;
+        if (pad <= 0) return;
+        el.style.marginLeft = (-pad) + 'px';
+        el.style.marginRight = (-pad) + 'px';
+    }
+    bleed();
+
     map = new AMap.Map(el, { viewMode: '2D', zoom: 5 });
     /* 挂到 window 供自动化测试（真浏览器量标记位置）与线上排查用；页面卸载即释放 */
     window.__routeMap = map;
@@ -377,6 +391,19 @@ require dirname(__DIR__) . '/comments/_block.php';
        所以缩放结束后按新的像素位置重排一次（不重新适配视野）。 */
     map.on('zoomend', function () { drawRoute(true); });
 
+    /* 改窗口大小 / 旋转屏幕 / 换分辨率：地图宽度是铺满视口的，容器一变
+       就要按新尺寸重新适配视野并重排标记。防抖 200ms。 */
+    var resizeTimer = null;
+    window.addEventListener('resize', function () {
+        clearTimeout(resizeTimer);
+        resizeTimer = setTimeout(function () {
+            if (!map) return;
+            bleed();            // 版心留白变了，出血量跟着变
+            map.resize();
+            drawRoute();        // 重新适配视野 + 按新像素重排标记
+        }, 200);
+    });
+
     /* 只有地名、没有坐标的地点：向高德地理编码查坐标（插件按需加载）。
        查到就补进数据并重画；查不到（地名太偏/写错）保持缺省，不硬造位置。 */
     function geocode(name, cb) {