* { box-sizing: border-box; }
body.auth-page { margin: 0; background: #f2f6f3; color: #233d31; font-family: system-ui, "Noto Sans KR", sans-serif; }
.auth-page button, .auth-page input { font: inherit; }
.auth-shell { width: min(100%, 480px); margin: 32px auto; background: white; border: 1px solid #e3eae4; }
.auth-brand { padding: 22px 28px; }
.auth-brand a { font-size: 26px; font-weight: 850; text-decoration: none; color: #077b53; display: flex; gap: 14px; align-items: center; }
.auth-brand span { font-size: 12px; color: #748a7c; font-weight: 500; }
.auth-photo { display: block; width: 100%; height: 150px; object-fit: cover; }
.auth-content { padding: 28px; }
.auth-content h1 { font-size: 27px; margin: 0 0 8px; letter-spacing: 0; }
.auth-subtitle { font-size: 14px; line-height: 1.6; color: #75847b; margin: 0 0 26px; }
.auth-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; font-size: 13px; }
.auth-field > input, .auth-password { border: 1px solid #cdd9d1; border-radius: 6px; background: white; min-height: 48px; }
.auth-field input { width: 100%; min-width: 0; padding: 12px; font-size: 16px; color: #273e30; }
.auth-field > input:focus { outline: 2px solid #108257; }
.auth-password { display: flex; align-items: center; }
.auth-password input { border: 0; background: transparent; outline: 0; }
.auth-password:focus-within { outline: 2px solid #108257; }
.auth-password button { border: 0; width: 44px; height: 44px; display: grid; place-items: center; background: transparent; color: #7b8d82; flex-shrink: 0; cursor: pointer; }
.auth-password svg { width: 20px; height: 20px; }
.auth-options { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin: 16px 0 22px; font-size: 12px; }
.auth-options label { display: inline-flex; gap: 7px; align-items: center; }
.auth-options input { accent-color: #009956; width: 16px; height: 16px; }
.auth-link, .auth-options > button:not(.auth-submit) { border: 0; background: transparent; color: #1170a8; cursor: pointer; padding: 8px 0; }
.auth-submit { width: 100%; border: 0; border-radius: 26px; background: #00a953; color: white; padding: 14px; min-height: 50px; font-weight: 700 !important; cursor: pointer; }
.auth-submit:hover { background: #008e47; }
.auth-submit:disabled { opacity: .55; cursor: wait; }
.auth-alternate { font-size: 13px; text-align: center; color: #7f8b83; margin: 22px 0; }
.auth-alternate a { color: #087b51; margin-left: 8px; font-weight: 600; }
.auth-switch { border-top: 1px solid #e9eee8; padding-top: 20px; display: flex; justify-content: center; gap: 22px; font-size: 12px; }
.auth-switch a { color: #73887b; }
.auth-message { padding: 14px; margin-bottom: 20px; color: #a13a2b; background: #fff0eb; border-radius: 6px; font-size: 13px; line-height: 1.6; }
.auth-message.success { color: #0d784a; background: #eaf9ef; }
.auth-hint { font-size: 12px; color: #7a8c81; }
.auth-admin { margin-top: 12vh; border-top: 4px solid #0a6545; }
.auth-admin .auth-submit { background: #0a6545; }
.auth-dialog { border: 0; border-radius: 8px; width: min(430px, calc(100% - 32px)); padding: 24px; color: #273d30; }
.auth-dialog::backdrop { background: #112e21aa; }
.auth-dialog h2 { font-size: 21px; margin-bottom: 24px; }
.auth-dialog .auth-options > .auth-submit { width: auto; }
.auth-checking .app-shell { display: none !important; }
.auth-gate { min-height: 100vh; padding: 24px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 20px; font: 15px system-ui, sans-serif; }
.auth-gate a { color: #087753; }
.auth-account { display: flex; justify-content: flex-end; gap: 12px; align-items: center; padding: 10px 16px; font: 12px system-ui, sans-serif; color: #758277; max-width: 760px; margin: auto; }
.auth-account span { overflow-wrap: anywhere; min-width: 0; }
.auth-account button { border: 1px solid #cdd8cf; border-radius: 4px; padding: 6px 10px; background: white; color: #216044; cursor: pointer; flex-shrink: 0; }
@media (max-width: 520px) { .auth-shell { margin: 0 auto; min-height: 100dvh; border: 0; } .auth-content { padding: 24px; } .auth-admin { padding-top: 50px; } }