/* ==============================================
   港中坪原型 - 手机外框 (App 页面直接访问时)
   - 直接打开链接: 内容居中显示在 375px 手机外框内
   - 嵌入 iframe 时(< 500px 宽): 自动还原为正常页面布局
   ============================================== */

body {
  background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
  display: flex !important;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 16px;
  min-height: 100vh;
}

/* 第一个 div 子元素 = 主内容容器,套上手机外框样式 */
body > div:first-of-type {
  max-width: 375px !important;
  width: 100%;
  background: #ffffff;
  min-height: calc(100vh - 48px);
  border-radius: 24px;
  box-shadow:
    0 0 0 4px #1f2329,
    0 0 0 6px rgba(0, 0, 0, 0.05),
    0 25px 70px -10px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  position: relative;
}

/* 在 iframe 内时(< 500px 宽), 还原为正常页面布局 */
@media (max-width: 500px) {
  body {
    background: #ffffff;
    padding: 0;
    display: block !important;
  }
  body > div:first-of-type {
    max-width: none !important;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
  }
}