/* 枠：スマホでは画面いっぱい、PCではスマホの大きさで真ん中に置く。画面そのものの見た目は app.css（src/screens から作る） */
:root { --ground: #e6ecf4; --ink: #16202e; }
html, body { margin: 0; height: 100%; background: var(--ground); color: var(--ink); font-family: 'BIZ UDPGothic', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif; -webkit-text-size-adjust: 100%; }
a { color: #244e9e; text-decoration: none; }
#stage { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
#phone { position: relative; flex: none; border-radius: 36px; overflow: hidden; background: #f4f7fb; box-shadow: 0 0 0 8px #16202e, 0 30px 60px rgba(22,32,46,.28); }
#screen { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform-origin: 0 0; }
/* スマホ：枠を外して画面いっぱい（幅に合わせて縮める） */
@media (max-width: 520px) {
  #stage { padding: 0; align-items: center; background: #f4f7fb; }
  #phone { border-radius: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { #screen * { animation: none !important; transition: none !important; } }