/* =============================================================
 * 2026秋约魔都美术季 H5 微网站 —— 公共样式
 * 说明：使用原生 CSS，整页长图 + 透明热区链接。
 * ============================================================= */

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

html,
body {
  width: 100%;
  min-height: 100%;
  /* 长图两侧露出的底色，可根据实际设计调整 */
  background: #000;
}

/* 页面容器：包裹整页长图，居中并限制桌面端最大宽度 */
.page {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

/* 背景长图：占满容器宽度，高度按原始比例自适应 */
.page > .bg {
  display: block;
  width: 100%;
  height: auto;
}

/* 透明热区链接：盖在背景图上的透明 <a> 标签。
 * 具体位置用内联 style 逐条设置（left/top/width/height 均为相对图片的百分比）。 */
.page > a.link {
  position: absolute;
  display: block;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}

/* =============================================================
 * 调试模式：在地址栏加 ?debug=1（如 index.html?debug=1）
 * 可显示每个热区的边框与名称，方便核对、调整链接位置。
 * ============================================================= */
body.debug .page > a.link {
  outline: 2px dashed rgba(255, 60, 60, 0.9);
  background: rgba(255, 60, 60, 0.12);
}

body.debug .page > a.link::after {
  content: attr(data-name);
  position: absolute;
  left: 0;
  top: 0;
  padding: 1px 4px;
  font-size: 11px;
  line-height: 1.3;
  color: #fff;
  background: rgba(255, 60, 60, 0.9);
  white-space: nowrap;
}