#login-modal { --muted:#9a9ca6; --text:#f4f4f0; --accent:#d8ff3e; --panel:rgba(14,16,22,.86); --line:rgba(255,255,255,.11); color:var(--text); font-family:Inter,Pretendard,"Noto Sans KR",system-ui,sans-serif; }
#login-modal, #login-modal * { box-sizing:border-box; }
#login-modal.hidden, #login-modal .hidden { display:none !important; }
#login-modal button { font-family:inherit; color:inherit; cursor:pointer; }
#login-modal { position: fixed; inset: 0; z-index: 2000; background: rgba(4,5,8,.66); display: grid; place-items: center; padding: 20px; backdrop-filter: blur(8px); }
#login-modal .modal-card { width: min(560px, 100%); max-height: calc(100vh - 40px); overflow-x: hidden; overflow-y: auto; border-radius: 24px; padding: 22px; }
#login-modal .glass { background: var(--panel); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0,0,0,.3); backdrop-filter: blur(18px); }
#login-modal .brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #10120a; background: var(--accent); font-weight: 950; font-size: 22px; transform: rotate(-3deg); }
#login-modal .icon-button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); font-size: 20px; }
#login-modal .login-card { position: relative; width: min(390px, 100%); padding: 34px 30px 28px; text-align: center; }
#login-modal .login-close { position: absolute; top: 12px; right: 12px; }
#login-modal .login-logo { margin: 0 auto 15px; }
#login-modal .login-card h2 { margin: 0; font-size: 24px; }
#login-modal .login-card > p { margin: 10px 0 22px; color: var(--muted); font-size: 12px; line-height: 1.65; }
#login-modal .google-login, #login-modal .dev-login { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 13px; color: #202124; background: #fff; text-decoration: none; font-size: 14px; }
#login-modal .google-login span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #4285f4; border: 1px solid #dadce0; font-weight: 900; }
#login-modal .google-login.disabled { pointer-events: none; opacity: .42; filter: grayscale(1); }
#login-modal .dev-login { margin-top: 9px; color: var(--text); background: rgba(255,255,255,.07); cursor: pointer; }
#login-modal .login-card > small { display: block; margin-top: 14px; color: var(--muted); font-size: 10px; line-height: 1.5; }

#login-modal .login-legal-note a { color:inherit; text-decoration:none; }