* { box-sizing:border-box; }
body { margin:0; min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:32px 20px; background:#f7f9fc; color:#17211b; font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif; }
.login-card { width:min(440px,100%); padding:48px 40px 28px; text-align:center; background:white; border:1px solid #dfe5e0; border-radius:24px; box-shadow:0 12px 40px #24324a0c; }
.login-brand { display:flex; flex-direction:column; align-items:center; }
.brand-mark { display:grid; place-items:center; width:48px; height:48px; margin-bottom:12px; border-radius:13px; background:#315cf4; color:white; font-size:32px; font-weight:800; }
.login-brand strong { font-size:30px; letter-spacing:-.04em; line-height:1.3; }
.login-brand>span:last-child { margin-top:4px; color:#667169; font-size:12px; }
h1 { margin:38px 0 24px; font-size:22px; letter-spacing:-.03em; }
.google-login { display:flex; align-items:center; justify-content:center; gap:12px; min-height:52px; border:1px solid #315cf4; border-radius:11px; background:#315cf4; color:white; font-weight:700; text-decoration:none; box-shadow:0 4px 12px #315cf41a; }
.google-login:hover { background:#244ad1; }
.google-mark { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:white; color:#315cf4; font-family:Arial,sans-serif; font-size:18px; }
.google-login:focus-visible { outline:3px solid #176b45; outline-offset:4px; }
.muted { margin:24px 0 40px; color:#667169; font-size:13px; line-height:1.9; }
footer { padding-top:20px; border-top:1px solid #eef1f5; color:#78827e; font-size:11px; }
@media(max-width:480px) { .login-card { padding:36px 24px 24px; } }