/* 기존 보라·파랑·노랑 색상에 맞춘 별도 계정 UI */
.school-account-button{width:40px;height:40px;flex:none;border:1px solid #dedaff;border-radius:50%;background:#f0edff;color:#5149c3;font-size:20px;position:relative}
.school-account-button[data-signed-in="true"]:after{content:"";position:absolute;right:0;bottom:0;width:11px;height:11px;border:2px solid white;border-radius:50%;background:#218861}
.school-account-dialog{width:min(480px,calc(100vw - 28px));max-height:calc(100dvh - 30px);overflow:auto;border:0;border-radius:24px;padding:24px;color:#23234a;background:#fcfbff;box-shadow:0 20px 70px #221c5755}
.school-account-dialog::backdrop{background:#201d4577}
.school-account-dialog [hidden]{display:none!important}
.school-account-header{display:flex;align-items:center;justify-content:space-between;gap:14px}
.school-account-header h2{font-size:22px;margin:0}
.school-account-close{width:44px;height:44px;border:0;border-radius:12px;background:#ece9ff;color:#5149c3;font-size:24px;flex:none}
.school-account-dialog p{font-size:15px;line-height:1.7;overflow-wrap:anywhere}
.school-auth-status{background:#eeeaff;border-radius:14px;padding:13px 15px;min-height:50px}
.school-auth-status[data-state="unavailable"]{background:#fff3d4;color:#72530a}
.school-login-options{display:grid;gap:16px;margin:18px 0}
.school-remember-label{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.6}
.school-remember-label input{width:20px;height:20px;accent-color:#665de8;flex:none;margin-top:2px}
.school-account-action{min-height:46px;justify-content:center;width:100%;margin-top:10px}
.school-profile{background:#fff;border:1px solid #e9e5fb;border-radius:18px;padding:20px;text-align:center}
.school-profile-photo,.school-profile-fallback{width:72px;height:72px;border-radius:50%;object-fit:cover;margin:0 auto 12px;background:#e8e4ff}
.school-profile-fallback{display:grid;place-items:center;font-size:35px}
.school-profile h3{font-size:20px;margin:6px 0;overflow-wrap:anywhere}
.school-account-notice{border-left:4px solid #e8bd42;background:#fff9e6;padding:12px 14px;border-radius:10px;margin-top:18px}
.school-account-dialog button:focus-visible,.school-account-button:focus-visible,.school-remember-label input:focus-visible{outline:3px solid #e5b623;outline-offset:3px}
@media(max-width:560px){.top-right{gap:8px}.top-right>.avatar{display:none}.school-account-dialog{padding:18px}.school-account-header h2{font-size:20px}}

/* Keep the account controls inside the viewport on narrow screens. */
.school-account-button{overflow:clip}