/* ==========================================================================
   绒华录 · 手机原型展示页
   --------------------------------------------------------------------------
   设计要点（按需求）：
     · body 不设置任何背景色
     · 页面不出现任何滚动条（横竖都没有）
     · 去掉底部控制条，只保留手机本体
     · 机身边框与页面严丝合缝，1px 都不差
     · 机身带多层仿真投影，像真机浮在页面上
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  background: none;          /* 需求：body 不要背景色 */
  overflow: hidden;          /* 需求：不出现滚动条 */
  font-family: "Microsoft YaHei", sans-serif;
}

.dev-stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.dev-wrap {
  position: relative;
  width: 411px;
  height: 848px;
  flex: 0 0 auto;
  transform-origin: center center;   /* 由脚本按视口自动缩放，永不溢出 */
}

/* -------- 仿真投影：机身四周的接触阴影 + 远处的柔和投影 -------- */
.dev-wrap::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  width: 399px;
  height: 836px;
  border-radius: 52px;
  z-index: 0;
  box-shadow:
    0 1px 2px rgba(56, 28, 18, .22),
    0 8px 16px rgba(56, 28, 18, .18),
    0 24px 40px rgba(56, 28, 18, .18),
    0 56px 88px rgba(56, 28, 18, .16);
}

/* -------- 屏幕：375 × 812，正好落在机身开孔里 -------- */
.dev-screen {
  position: absolute;
  left: 18px;
  top: 18px;
  width: 375px;
  height: 812px;
  border-radius: 40px;
  overflow: hidden;
  background: #F9EEE4;
  z-index: 1;
}

/* 关键：
   1) iframe 高度取 832px = 页面真实高度（上 10 + 手机 812 + 下 10），
      与内容等高 → 内部完全没有纵向溢出 → 右侧不会出现滚动条；
   2) 再整体上移 10px，让 .phone-box 正好落在屏幕开孔正中。
   注意：页面宽度在 375 视口下实测无横向溢出，所以底部也不会有滚动条。 */
.dev-screen iframe {
  position: absolute;
  left: 0;
  top: -10px;
  width: 375px;
  height: 832px;
  border: 0;
  display: block;
}

/* -------- 机身边框（覆盖在页面之上，但不拦截点击） -------- */
.dev-frame {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  user-select: none;
}
.dev-frame img { display: block; width: 411px; height: 848px; }