/* 📱 移动端再度优化 - 更小更贴角 */
@media (max-width: 768px) {
  .phone-roller {
    bottom: -2px;              /* ✅ 几乎贴底 */
    left: -2px;                /* ✅ 更贴左边 */
    right: 1px;               /* ✅ 宽度仍自适应 */
    font-size: clamp(9px, 2vw, 11px);  /* ✅ 再缩小字号 */
    line-height: 1.6em;       /* ✅ 调整高度比例 */
    padding: 0 0.4em;         /* ✅ 缩小内边距 */
    border-radius: 0.25em;    /* ✅ 圆角更细腻 */
    background: rgba(0, 0, 0, 0.45); /* ✅ 背景更透明一点，不遮图片 */
    transform: translate(-6px, 6px);  /* ✅ 向左偏移4px，向下偏移3px */
  }

  .roller-item {
    max-width: 95%;           /* ✅ 限制最大宽度，防止文字过长挤出边框 */
    text-overflow: ellipsis;
    overflow: hidden;
  }
}





 /* 图片容器 */
    .image-container {
      position: relative;
      display: inline-block;
    }

    .main-image {
      width: 100%;
      max-width: 600px; /* 可根据需要调整 */
      height: auto;
    }

    /* 手机号翻滚区域 - 固定在图片左下角 */
.phone-roller {
  position: absolute;
  bottom: 6px;
  left: 6px;

  width: auto;
  height: 2.2em;            /* ✅ 用相对单位代替固定像素，避免缩放失真 */
  overflow: hidden;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 0.4em;
  color: #fff;
  font-size: clamp(12px, 2.5vw, 14px);  /* ✅ 字号自适应（最小12px，最大14px） */
  line-height: 2.2em;
  padding: 0 0.8em;
  box-sizing: border-box;
  white-space: nowrap;
}

    /* 内部滚动列表 */
    .roller-list {
      position: relative;
      transition: transform 0.4s ease-in-out;
    }

    .roller-item {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }