/* 대원 등록 모달 스타일. account.js가 만드는 DOM에 대응하며, 페이지 자체
   CSS(:root 변수)가 먼저 주입되어 있어야 var(--*) 값이 해석된다. */
.account-overlay{position:fixed; inset:0; background:rgba(20,16,30,.55); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;}
.account-overlay[hidden]{display:none;}
.account-modal{background:var(--bg); border-radius:20px; padding:40px 44px; width:min(520px, 100%); max-height:90vh; overflow-y:auto; box-shadow:0 30px 80px rgba(0,0,0,.35); position:relative;}
.account-modal-close{position:absolute; top:16px; right:16px; width:32px; height:32px; padding:0; border:none; background:transparent; color:var(--ink-faint); cursor:pointer; border-radius:8px; display:flex; align-items:center; justify-content:center;}
.account-modal-close:hover{background:var(--surface-2); color:var(--ink);}
.account-modal-close svg{width:16px; height:16px;}
.account-modal-header{display:flex; align-items:center; gap:8px; margin:0 0 28px;}
.account-back-btn{flex-shrink:0; width:28px; height:28px; padding:0; border:none; background:transparent; color:var(--ink-dim); cursor:pointer; border-radius:8px; display:flex; align-items:center; justify-content:center;}
.account-back-btn:hover{background:var(--surface-2); color:var(--ink);}
.account-back-btn svg{width:16px; height:16px;}
.account-modal h2{font-family:'Noto Sans KR',sans-serif; font-weight:700; font-size:22px; margin:0; color:var(--ink);}
.account-field{margin-bottom:26px;}
.account-field label{display:block; font-size:14.5px; font-weight:500; color:var(--ink); margin-bottom:10px; font-family:'Noto Sans KR',sans-serif;}
.account-name-input{width:100%; box-sizing:border-box; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:10px; padding:12px 14px; font-size:15px; font-family:'Noto Sans KR',sans-serif; color:var(--ink);}
.account-name-input::placeholder{color:var(--ink-faint);}
.account-name-input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
.account-error{margin:8px 0 0; font-size:12.5px; color:#d64545; font-family:'Noto Sans KR',sans-serif;}
.account-pin-row{display:flex; gap:12px;}
.account-pin-box{width:56px; height:64px; box-sizing:border-box; text-align:center; font-size:24px; font-family:'JetBrains Mono',monospace; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:10px; color:var(--ink);}
.account-pin-box:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
.account-submit-btn{width:100%; margin-top:8px; padding:14px; border:none; border-radius:999px; background:var(--accent); color:#fff; font-family:'Noto Sans KR',sans-serif; font-weight:700; font-size:15px; cursor:pointer;}
.account-submit-btn:disabled{background:var(--surface-2); color:var(--ink-faint); cursor:default;}
.account-submit-btn:not(:disabled):hover{background:var(--accent-soft);}
.account-btn-sub{width:100%; margin-top:8px; padding:13px; border:1px solid var(--accent-soft); border-radius:999px; background:transparent; color:var(--accent); font-family:'Noto Sans KR',sans-serif; font-weight:700; font-size:15px; cursor:pointer;}
.account-btn-sub:hover{background:var(--accent-soft); color:#fff;}
.account-modal-small{padding:36px 40px; width:min(400px, 100%); text-align:center;}
.account-confirm-text{font-family:'Noto Sans KR',sans-serif; font-size:16px; color:var(--ink); margin:0 0 28px; line-height:1.5;}
.account-confirm-actions{display:flex; gap:10px;}
.account-btn-secondary, .account-btn-primary{flex:1; padding:12px; border-radius:999px; font-family:'Noto Sans KR',sans-serif; font-weight:700; font-size:14.5px; cursor:pointer;}
.account-btn-secondary{border:1px solid var(--border-strong); background:transparent; color:var(--ink-dim);}
.account-btn-secondary:hover{border-color:var(--accent-soft); color:var(--ink);}
.account-btn-primary{border:none; background:var(--accent); color:#fff;}
.account-btn-primary:hover{background:var(--accent-soft);}
@media (max-width:520px){
  .account-modal{padding:32px 24px;}
  .account-pin-box{width:100%;}
}