* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height:100vh; display:flex; flex-direction:column;
}
.card {
    background:white; border-radius:24px; box-shadow:0 20px 60px rgba(0,0,0,0.3);
    width:100%; max-width:420px; padding:40px 32px; text-align:center;
    margin:auto;
}
@keyframes fadeIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes pop { 0%{transform:scale(0.9);opacity:0} 100%{transform:scale(1);opacity:1} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes checkmark { 0%{transform:scale(0)} 50%{transform:scale(1.2)} 100%{transform:scale(1)} }

/* SNS Grid */
.sns-grid {
    display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
    margin:28px 0 24px; max-width:320px; margin-left:auto; margin-right:auto;
}
.sns-item { text-align:center; }
.sns-btn {
    width:68px; height:68px; border-radius:18px; border:3px solid transparent;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:all 0.25s; position:relative; margin:0 auto;
    box-shadow:0 3px 12px rgba(0,0,0,0.1);
}
.sns-btn:hover { transform:translateY(-5px) scale(1.05); box-shadow:0 8px 25px rgba(0,0,0,0.18); }
.sns-btn:active { transform:translateY(-2px) scale(1.02); }
.sns-btn svg { width:32px; height:32px; }
.sns-name { font-size:11px; font-weight:700; color:#888; margin-top:8px; }

.sns-google { background:#fff; border-color:#e8e8e8; }
.sns-google:hover { border-color:#4285F4; }
.sns-kakao { background:#FEE500; border-color:#FEE500; }
.sns-kakao:hover { border-color:#e6cf00; }
.sns-apple { background:#000; border-color:#000; }
.sns-apple:hover { border-color:#333; }
.sns-x { background:#000; border-color:#000; }
.sns-x:hover { border-color:#333; }

/* Confirm screen (inline, replaces icons) */
.confirm-screen {
    display:none; animation:fadeIn 0.35s;
}
.confirm-screen.show { display:block; }
.confirm-avatar {
    width:64px; height:64px; border-radius:50%; margin:0 auto 14px;
    display:flex; align-items:center; justify-content:center;
    font-size:26px; font-weight:900; color:white;
}
.confirm-email {
    font-size:16px; font-weight:700; color:#333; margin-bottom:4px;
    word-break:break-all;
}
.confirm-provider { font-size:12px; color:#aaa; margin-bottom:20px; }
.confirm-btn {
    width:100%; padding:16px; border:none; border-radius:14px;
    font-size:16px; font-weight:800; color:white; cursor:pointer;
    transition:all 0.2s; letter-spacing:0.3px;
}
.confirm-btn:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,0.2); }
.confirm-back {
    background:none; border:none; color:#aaa; font-size:13px;
    cursor:pointer; margin-top:14px; padding:6px 12px;
}
.confirm-back:hover { color:#667eea; }

/* Success */
.success-screen { display:none; animation:pop 0.4s; }
.success-screen.show { display:block; }
.success-check {
    width:72px; height:72px; border-radius:50%; background:#22c55e;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 16px; animation:checkmark 0.5s;
}
.success-check svg { width:36px; height:36px; }

/* Divider & email */
.divider { display:flex; align-items:center; gap:12px; margin:20px 0; }
.divider::before,.divider::after { content:''; flex:1; height:1px; background:#eee; }
.divider span { font-size:11px; color:#ccc; }
.email-form { display:none; animation:fadeIn 0.3s; }
.email-form.show { display:block; }
.email-input {
    width:100%; padding:14px 16px; border:2px solid #e0e0e0; border-radius:12px;
    font-size:15px; outline:none; transition:border-color 0.2s; margin-bottom:10px;
}
.email-input:focus { border-color:#667eea; }
.email-btn {
    width:100%; padding:14px; border:none; border-radius:12px;
    background:linear-gradient(135deg,#667eea,#764ba2); color:white;
    font-size:15px; font-weight:700; cursor:pointer; transition:all 0.2s;
}
.email-btn:hover { transform:translateY(-1px); box-shadow:0 4px 15px rgba(102,126,234,0.4); }

.spinner { display:inline-block; width:22px; height:22px; border:3px solid #e0e0e0; border-top-color:#667eea; border-radius:50%; animation:spin 0.6s linear infinite; }

@media(max-width:400px) {
    .card { padding:32px 24px; }
    .sns-btn { width:60px; height:60px; border-radius:16px; }
    .sns-btn svg { width:28px; height:28px; }
    .sns-grid { gap:10px; }
}