/* ============================================================ * phone-frame.css — Desktop "iPhone 14" preview shell * 目标：把 mobile-first 表单页在桌面浏览器里居中显示为手机壳预览 * * 激活条件：min-width: 481px（桌面 / 笔记本） * 移动端（<=480px）：本文件完全 inert，原 mobile 布局零变化 * * 影响的页面（消费方需在 里 ）： * - cosmetics-mode.html / cosmetics-board.html * - cosmetics-workflow.html / cosmetics-prompt.html * - shop-mode.html / shop-result.html * * 实现要点： * - .app 从 "页面容器" 升级为 "手机屏"，width: 390px / height: 844px * - .bottom-bar 从 viewport fixed 改为 .app-relative absolute（锁在手机底部） * - .enhance-panel (shop-mode 滑入面板) 同上，translateY 动画保留 * - 用 ::before / ::after 绘制 Dynamic Island 缺口和 "9:41" 状态栏 * - 移动端 media query 完全关闭 → 一切不生效 * ============================================================ */ @media (min-width: 481px) { /* === 桌面外壳：深色背景，居中布局 === */ html { background: linear-gradient(160deg, #0f172a 0%, #020617 100%); background-attachment: fixed; } body { background: transparent; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 30px 20px; overflow-y: auto; -webkit-font-smoothing: antialiased; } /* === 手机屏本体 === */ body > .app { position: relative; /* 新定位上下文 */ flex-shrink: 0; width: 390px; height: min(844px, calc(100vh - 60px)); max-width: 390px !important; /* 压过 480 / 640 / 100% */ min-height: 0 !important; /* 压过 min-height: 100vh */ margin: 0; border-radius: 48px; border: 8px solid #0a0a0a; background: hsl(var(--bg)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), /* 内圈高光 */ 0 30px 80px -20px rgba(0, 0, 0, 0.6), /* 主投影 */ 0 0 0 4px #1f1f1f; /* 外框线 */ overflow: hidden; padding: 56px 14px 28px !important; /* 顶 = Dynamic Island 留白，底 = 替代原 100/120px safe-area */ } /* === Dynamic Island 缺口 === */ body > .app::before { content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 124px; height: 32px; background: #050505; border-radius: 9999px; z-index: 1000; pointer-events: none; } /* === 状态栏时间 9:41 === */ body > .app::after { content: '9:41'; position: absolute; top: 19px; left: 38px; font-size: 15px; font-weight: 700; color: #fff; z-index: 1001; pointer-events: none; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; letter-spacing: -0.5px; } /* === 底部按钮栏：从 viewport fixed 重新锚定到手机屏底部 === */ body > .app .bottom-bar { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; transform: none !important; border-radius: 0 0 40px 40px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; } /* === 步骤条：在状态栏下方安全下沉 === */ body > .app .step-bar { margin-top: 6px; padding-top: 4px; } /* === shop-mode 滑入式面板（"AI 增强"用）：从 viewport fixed 锁到手机屏 === */ body > .app .enhance-panel { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; max-width: none !important; transform: translateY(100%) !important; } body > .app .enhance-panel.show { transform: translateY(0) !important; } } /* === <=480px：本文件 inert；移动端零变化 === */