/* ============================================================
   东方精工 (DF) 官网 — 设计转 HTML 共享样式
   来源: 15 张网页长截图 + 首页长图
   策略: 跟随原始画布(1920px) + 等比缩放自适应视口
   ============================================================ */

:root {
  /* —— 品牌色板(由像素分析推算, 东方精工主色) —— */
  --df-navy:    #003078;   /* 深蓝主色 r0 g48 b120 */
  --df-navy-dk: #001f4d;
  --df-red:     #c8102e;   /* 品牌红/强调 */
  --df-blue:    #0a66c2;   /* 链接蓝 */
  --ink:        #1f2937;
  --paper:      #ffffff;
  --bg:         #f5f5f7;   /* 画布外底色 */

  /* —— 原始画布宽度 —— */
  --canvas-w:   1920px;
}

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

html, body { width: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
               "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* —— 视口容器: 裁掉缩放产生的布局溢出(横+纵) ——
   关键: stage 用 transform:scale 缩放, 但 transform 不改布局盒高度,
   未缩放的原始高度会撑在文档流里导致底部留白/双重渲染。
   JS 用 getBoundingClientRect 读取缩放后真实高度赋给本容器,
   overflow:hidden 裁掉布局溢出, 使整页高度=缩放后图片高度。 */
.viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* —— 原始画布舞台: 固定 1920 宽, JS 等比缩放 —— */
/* 用 top-left 原点: 缩放后视觉宽度 = 1920*scale = 视口宽, 自然左对齐铺满, 无两侧留白 */
.stage {
  width: var(--canvas-w);
  transform-origin: top left;
  position: relative;
  margin: 0;
  background: var(--paper);
  box-shadow: 0 0 40px rgba(0, 0, 0, .12);
}

/* —— 设计稿图片: 原尺寸呈现, 命中区随舞台变换一同缩放 —— */
.stage > img {
  display: block;
  width: var(--canvas-w);
  height: auto;
  cursor: pointer;
}

/* 命中区鼠标手势 */
.stage area { cursor: pointer; }