/* hk3 的增量样式：修 hk2 里"弹层内滑图会带动外层滚动"的问题，并加顺路加站卡片 */

/* 1) 轮播只吃横向手势，不把纵向滚动传给页面 */
.carousel-track{
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: none;
}

/* 2) 弹层自己滚，不外溢到 body */
.sheet-panel{
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.sheet .carousel-track{
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}
/* 3) 弹层打开时锁住 body 滚动（JS 会给 body 加 fixed），再加一道保险 */
body[style*="position: fixed"]{overflow:hidden;touch-action:none}

/* 4) 顺路加站 */
.extras{display:flex;flex-direction:column;gap:12px}
.extra{
  display:flex;gap:12px;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:#fbf8f1;
}
.extra img{width:112px;height:112px;object-fit:cover;flex:0 0 112px;background:#e8e2d4}
.extra-body{padding:10px 12px 10px 0;flex:1;min-width:0}
.extra h3{margin:0 0 4px;font-size:15px;line-height:1.35;font-family:"Songti SC","Noto Serif SC",Georgia,serif}
.extra .extra-meta{margin:0 0 4px;font-size:11.5px;color:var(--clay)}
.extra p{margin:0 0 6px;font-size:12.5px;color:var(--ink-2);line-height:1.55}
.extra-link{font-size:12px;color:var(--green-2);font-weight:600;text-decoration:none}

@media (max-width:360px){
  .extra img{width:92px;height:104px;flex-basis:92px}
}

/* ===== hk4：顶部一图流 + 边走边吃 ===== */
.routeflow-wrap{
  background:var(--card);border-radius:18px;border:1px solid rgba(230,224,210,.7);
  box-shadow:var(--shadow);padding:16px;margin:14px 0 18px;
}
.rf-head h2{margin:0 0 2px;font-size:20px;font-family:"Songti SC","Noto Serif SC",Georgia,serif;font-weight:600}
.rf-head p{margin:0 0 14px;font-size:12px;color:var(--ink-3)}
.routeflow{display:flex;flex-direction:column;align-items:stretch}
.rf-item{position:relative;margin:0;border-radius:14px;overflow:hidden;background:#e8e2d4;box-shadow:0 2px 10px rgba(20,40,34,.10)}
.rf-item img{width:100%;height:126px;object-fit:cover;display:block}
.rf-item figcaption{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:baseline;gap:8px;
  padding:26px 12px 9px;color:#fff;background:linear-gradient(transparent,rgba(8,24,20,.82));
}
.rf-item figcaption b{
  font-size:11px;letter-spacing:.06em;background:#c8542f;color:#fff;padding:1px 7px;border-radius:6px;font-weight:600;
}
.rf-item figcaption span{font-size:16px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.rf-item figcaption small{margin-left:auto;font-size:11px;opacity:.9;white-space:nowrap}
.rf-arrow{position:relative;display:flex;justify-content:center;padding:13px 0}
.rf-arrow::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-1px);
  background:repeating-linear-gradient(180deg,#f0c9b3 0 4px,transparent 4px 8px);
}
.rf-arrow span{
  position:relative;z-index:1;background:#fff3e3;color:#b8441c;font-size:11.5px;font-weight:600;
  padding:3px 11px;border-radius:999px;border:1px solid #f0d3bd;
}
.rf-arrow::after{
  content:"▼";position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);
  color:#c8542f;font-size:9px;line-height:1;
}
.rf-item:nth-of-type(4n+3){transform:translateX(6px)}
.rf-item:nth-of-type(4n+1){transform:translateX(-6px)}

.snacks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.snack{display:flex;gap:8px;border:1px solid var(--line);border-radius:12px;padding:8px;background:#fbf8f1;align-items:flex-start}
.snack img{width:62px;height:62px;object-fit:cover;border-radius:8px;flex:0 0 62px;background:#e8e2d4}
.snack-area{font-size:10.5px;color:#7c8c84;letter-spacing:.06em;display:block}
.snack h4{margin:1px 0 2px;font-size:13px;line-height:1.3}
.snack p{margin:0;font-size:11px;color:#4a5d55;line-height:1.45}
@media (max-width:380px){.snacks{grid-template-columns:1fr}}
/* 没有配到图时的兜底，保证每块都有高度 */
.rf-item.noimg{min-height:118px;background:linear-gradient(135deg,#e9e2d2,#d8e0d6)}
.rf-item.noimg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.5),transparent 60%)}
.rf-item.noimg figcaption{position:relative;padding-top:64px}
/* ===== hk4：拼图式路线（小红书同款） ===== */
.routeflow.collage{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;
}
.routeflow.collage .tile{
  position:relative;margin:0;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#e8e2d4;
}
.routeflow.collage .tile img{width:100%;height:100%;object-fit:cover;display:block}
.routeflow.collage .tile figcaption{
  position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:5px;
  padding:30px 7px 6px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.8));
}
.tile .no{background:#e8562a;color:#fff;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:5px;line-height:1.5}
.tile .nm{font-size:19px;font-weight:800;line-height:1.12;text-shadow:0 2px 8px rgba(0,0,0,.75);letter-spacing:.01em}
.tile small{flex:0 0 100%;font-size:10.5px;opacity:.95;line-height:1.3;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.route-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
/* 拼图海报（一张图，点开放大） */
.rf-poster{display:block;width:100%;border-radius:12px;cursor:zoom-in;background:#e8e2d4}
/* 每站上下车位置 */
.board{
  margin:0 0 12px;padding:7px 10px;font-size:12.5px;line-height:1.55;color:#2c473f;
  background:#f2f8f3;border-left:3px solid #1d5a4d;border-radius:0 8px 8px 0;
}