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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  /* 与图片底色一致的暖金色，宽屏两侧自然过渡 */
  background: #f6efe1;
  background-image: linear-gradient(180deg, #f9f4e9 0%, #f2e8d5 50%, #f5eddd 100%);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/*
 * 内容区宽度锁定为图片原始宽度 449px：
 * 屏幕够宽时按 1:1 原尺寸显示（不放大、不变形）；
 * 屏幕较窄时通过 max-width:100% 等比缩小，父级不设固定高度，高度始终由图片自身比例决定。
 */
.page {
  width: 449px;
  max-width: 100%;
  margin: 0 auto;
  font-size: 0;            /* 消除 inline 元素底部间隙 */
  line-height: 0;
  background: #f7f1e4;
  box-shadow: 0 0 24px rgba(120, 88, 30, 0.12);
}

.page__img {
  display: block;
  width: 100%;
  height: auto;            /* 关键：高度由原始比例自动计算，绝不压缩拉伸 */
  border: 0;
  outline: none;
  object-fit: contain;     /* 兜底：任何情况下都完整等比显示，不裁剪不拉伸 */
  vertical-align: bottom;  /* 清除行内元素底部多余间隙，图片之间无缝衔接 */
  user-select: none;
  -webkit-user-drag: none;
}