/* Account entry reuses the existing card, field and button components. */
:root{--auth-width:440px;--auth-control-height:56px;--auth-pill:999px;--auth-icon:20px;--auth-stroke:#747775;--auth-ink:#1f1f1f}
body:is([data-account-page="login"],[data-account-page="signup"]) main.container{max-width:var(--auth-width);padding-top:var(--space-5)}
body:is([data-account-page="login"],[data-account-page="signup"]) main h1{text-align:center;margin:var(--space-5) 0 var(--space-3)}
body:is([data-account-page="login"],[data-account-page="signup"]) #accountNotice{text-align:center;margin-bottom:var(--space-5)}
body:is([data-account-page="login"],[data-account-page="signup"]) .auth-card{margin:0;padding:var(--space-5);background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
body .auth-methods{display:grid;gap:var(--space-3);margin:var(--space-4) 0}
body[data-account-page] main .auth-method{display:flex;align-items:center;justify-content:center;gap:var(--space-3);width:100%;min-height:var(--auth-control-height);padding:var(--space-3) var(--space-4);margin:0;background:var(--card);background-image:none;border:1px solid var(--auth-stroke);border-radius:var(--auth-pill);color:var(--auth-ink);font-size:var(--type-body);font-weight:500;line-height:1.4;letter-spacing:normal;box-shadow:none}
body[data-account-page] main .auth-method img,body[data-account-page] main .auth-method svg{width:var(--auth-icon);height:var(--auth-icon);flex:0 0 var(--auth-icon);object-fit:contain}
body[data-account-page] main .auth-method:hover:not(:disabled){background:var(--bg)}
body[data-account-page] main .auth-method:focus-visible,.email-auth summary:focus-visible{outline:var(--focus-width) solid var(--brand);outline-offset:var(--focus-width)}
body[data-account-page] main .auth-method:disabled{opacity:1;color:var(--ink-muted);background:var(--bg);border-color:var(--border);cursor:not-allowed}
.auth-method-badge{font-size:var(--type-small);font-weight:600;white-space:nowrap}
body[data-account-page] main .auth-help{font-size:var(--type-small);line-height:1.65;color:var(--ink-muted);text-align:center;margin:var(--space-4) 0}
#socialAuthStatus:empty{display:none}#socialAuthStatus,#phoneAuthStatus{font-size:var(--type-small);color:var(--ink-body);margin:var(--space-3) 0}
.email-auth{margin-top:var(--space-5);padding-top:var(--space-3);border-top:1px solid var(--border)}
.email-auth summary{display:list-item;min-height:var(--touch-target);padding:var(--space-3) 0;color:var(--ink-muted);font-size:var(--type-label);cursor:pointer}
body[data-account-page] main .email-auth .btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--touch-target);font-size:var(--type-label);margin:var(--space-2) 0}
#phoneAuthPanel{padding-top:var(--space-4);border-top:1px solid var(--border)}
body[data-account-page] main #phoneAuthPanel h2{font-size:var(--type-section);margin:0 0 var(--space-2)}
body .public-signup #phoneAuthPanel form,.phone-verification-form{display:grid;gap:var(--space-3)}
body .phone-verification-form label.field{margin:0;display:grid;gap:var(--space-2)}
body .phone-verification-form input{min-height:var(--auth-control-height);border-radius:var(--radius-control);font-size:var(--type-body)}
body .phone-verification-form .btn{margin:0;min-height:var(--auth-control-height);width:100%}
body .phone-verification-form input:disabled{background:var(--bg)}

/* Signup choice: readable Korean phrases, stable selection and one outer gutter. */
body[data-account-page="signup"] main :is(h1,.signup-roles strong,.role-description,#accountNotice,#roleHelp,.auth-help,.auth-method-label){word-break:keep-all;overflow-wrap:break-word;white-space:normal}
body[data-account-page="signup"] main .signup-roles{grid-template-columns:minmax(0,1fr);gap:12px}
body[data-account-page="signup"] main .signup-roles button{position:relative;display:block;width:100%;min-width:0;min-height:0;height:auto;padding:18px 16px;margin:0;border:2px solid var(--border);border-radius:16px;background:var(--card);text-align:left;font-weight:400;box-shadow:none}
body[data-account-page="signup"] main .signup-roles strong{display:block;padding-right:28px;margin:0 0 8px;font-size:1.125rem;font-weight:700;line-height:1.5;color:var(--text)}
body[data-account-page="signup"] main .signup-roles .role-description{display:block;font-size:.9375rem;font-weight:400;line-height:1.6;color:var(--ink-muted);text-overflow:clip;overflow:visible}
body[data-account-page="signup"] main .signup-roles button[aria-pressed="true"]{background:var(--brand-soft);border-color:var(--brand)}
body[data-account-page="signup"] main .signup-roles button[aria-pressed="true"] strong{color:var(--brand)}
body[data-account-page="signup"] main .signup-roles .role-check{position:absolute;right:16px;top:18px;display:grid;place-items:center;width:20px;height:20px;font-size:14px;line-height:1;font-weight:700;border-radius:50%;background:var(--brand);color:white;visibility:hidden}
body[data-account-page="signup"] main .signup-roles button[aria-pressed="true"] .role-check{visibility:visible}
body[data-account-page="signup"] main :is(#accountNotice,#roleHelp,.auth-help,#socialAuthStatus){font-size:.875rem;font-weight:400;line-height:1.6}
body[data-account-page="signup"] main .auth-methods{gap:12px}
body[data-account-page="signup"] main .auth-method{min-height:52px;height:auto;padding:14px 16px;gap:10px;font-size:1rem;font-weight:500;line-height:1.5;white-space:normal;word-break:keep-all;overflow-wrap:break-word}
body[data-account-page="signup"] main .auth-method :is(img,svg){width:20px;height:20px;flex:0 0 20px}
@media(max-width:600px){
 body[data-account-page="signup"] main.container{width:100%;box-sizing:border-box;padding-left:16px;padding-right:16px}
 body[data-account-page="signup"] main .auth-card{padding:0;border:0;background:transparent;box-shadow:none}
}

/* Login shares the readable entry layout; forms and errors remain fully visible. */
body[data-account-page="login"] main :is(h1,p,label,summary,button,a,.auth-method-label){word-break:keep-all;overflow-wrap:break-word;white-space:normal}
body[data-account-page="login"] main :is(#accountNotice,.auth-help,#socialAuthStatus,#phoneAuthStatus){font-size:.875rem;font-weight:400;line-height:1.6}
body[data-account-page="login"] main .auth-methods{gap:12px}
body[data-account-page="login"] main .auth-method{min-height:52px;height:auto;padding:14px 16px;gap:10px;font-size:1rem;font-weight:500;line-height:1.5}
body[data-account-page="login"] main .auth-method-label{min-width:0}
body[data-account-page="login"] main .email-auth :is(summary,.btn){font-size:.9375rem;line-height:1.6;font-weight:500;height:auto}
body[data-account-page="login"] main .email-auth input{font-size:1rem;min-width:0;max-width:100%;box-sizing:border-box}
@media(max-width:600px){body[data-account-page="login"] main.container{width:100%;box-sizing:border-box;padding-left:16px;padding-right:16px}body[data-account-page="login"] main .auth-card{padding:0;border:0;background:transparent;box-shadow:none}}