/* 8788 로그인 밖 화면 공통 틀(PM 10/26 14:5x) — 가입 · 계정 · 비밀번호 · 증권사 연결 · 완료 안내 · 기기 등록.
   wishora-brand.css → wishora-lock.css 다음에 읽는다. 로그인 화면과 같은 바탕 · 카드 · 글꼴 · 색 토큰 · W 로고 · 버튼.
   화면마다 CSS 를 따로 두지 않는다 — 이 한 파일만. 인라인 style · script 없음(CSP style-src 'self'). */

body.wz-gate{justify-content:flex-start;padding-top:56px;font-family:var(--wz-font);color:var(--wz-text);-webkit-font-smoothing:antialiased}
.wz-gate-main{position:relative;z-index:1;display:flex;flex-direction:column;align-items:stretch;gap:14px;width:100%;max-width:400px}
.wz-gate-main.is-wide{max-width:560px}
.wz-gate-logo{align-self:center;width:64px;height:64px;margin-bottom:6px}

/* 카드 — 로그인 화면 칸과 같은 바탕 · 선 · 모서리 */
.gate-card{box-sizing:border-box;width:100%;padding:22px 20px;border-radius:var(--wz-r-xl);background:var(--wz-card);
  border:1px solid var(--wz-line-strong);box-shadow:var(--wz-shadow);text-align:left;
  animation:wzGateIn .52s var(--wz-e-out) 1 both}
.gate-card:nth-of-type(2){animation-delay:.06s}
.gate-card:nth-of-type(3){animation-delay:.12s}
@keyframes wzGateIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.gate-card h1{margin:0 0 8px;font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--wz-text)}
.gate-card h2{margin:0 0 8px;font-size:16px;font-weight:700;color:var(--wz-text)}
.gate-card p{margin:0 0 12px;font-size:14px;line-height:1.6;color:var(--wz-text-2)}
.gate-card .gate-lead{color:var(--wz-text-3);font-size:13px}
.gate-card a,.gate-back a{color:var(--wz-gold);text-decoration:none}
.gate-card a:hover,.gate-back a:hover{color:var(--wz-gold-hover)}
.gate-card b{color:var(--wz-text)}
.gate-error{margin:0 0 12px;padding:10px 12px;border-radius:var(--wz-r-md);background:var(--wz-warn-fill);color:var(--wz-warn-soft);font-size:13px;line-height:1.5;overflow-wrap:anywhere}

/* 칸 · 버튼 — 로그인 화면의 .wz-input · .wz-btn-primary 와 같은 값 */
.gate-card form{display:flex;flex-direction:column;margin:14px 0 0}
.gate-label{margin:0 0 8px;font-size:12px;color:var(--wz-text-2)}
.gate-hint{margin-left:6px;color:var(--wz-text-3)}
.gate-card input[type=text],.gate-card input[type=password]{width:100%;height:52px;box-sizing:border-box;margin:0 0 12px;padding:0 16px;
  border-radius:var(--wz-r-input);background:rgba(18,25,34,.85);border:1px solid var(--wz-line-strong);color:var(--wz-text);font:inherit;font-size:16px}
.gate-card input[type=text]:focus,.gate-card input[type=password]:focus{outline:none;border-color:var(--wz-gold);box-shadow:0 0 0 3px rgba(224,178,92,.16)}
/* 칸 안내 글(초대 코드 · 아이디 · 비밀번호): 브라우저 기본 회색 #757575 는 카드 바탕에서 3.8:1 — 설명 글자색(text-3)으로 올린다. */
.gate-card input::placeholder{color:var(--wz-text-3);opacity:1}
.gate-card button{height:52px;padding:0 18px;border-radius:var(--wz-r-input);border:0;cursor:pointer;font:inherit;font-size:15px;font-weight:700;
  background:linear-gradient(180deg,var(--wz-gold-btn-hi) 0%,var(--wz-gold-btn-lo) 100%);color:var(--wz-gold-ink);
  box-shadow:0 6px 18px -6px rgba(224,178,92,.55),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform var(--wz-m-fast) var(--wz-e-out),filter var(--wz-m-fast) var(--wz-e-out)}
.gate-card form > button{width:100%;margin-top:4px}
.gate-card button:active{transform:scale(.98);filter:brightness(.94)}               /* 버튼 눌림 */
.gate-card button.secondary{height:44px;background:var(--wz-card-2);color:var(--wz-text);border:1px solid var(--wz-line-strong);box-shadow:none;font-weight:600}
.gate-card button.danger{height:auto;padding:6px 4px;background:none;border:0;box-shadow:none;color:var(--wz-up);font-size:13px;font-weight:600}
.gate-card button:focus-visible{outline:2px solid var(--wz-gold);outline-offset:2px}

/* 동의 체크 */
.gate-check{display:flex;align-items:flex-start;gap:10px;margin:2px 0 16px;font-size:13px;line-height:1.55;color:var(--wz-text-2);cursor:pointer}
.gate-check input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--wz-gold)}

.gate-foot-link{margin:16px 0 0!important;text-align:center;font-size:13px}
.gate-back{margin:2px 0 0;text-align:center;font-size:12px;line-height:1.7;color:var(--wz-text-3)}

/* 접힘(관리자 계정 · 로그인 실패 기록 · 기기 등록) */
.gate-card details{margin-top:14px;border-top:1px solid var(--wz-line);padding-top:12px}
.gate-card summary{cursor:pointer;list-style:none;font-size:13px;color:var(--wz-text-2)}
.gate-card summary::-webkit-details-marker{display:none}
.gate-card summary::after{content:" ▾";color:var(--wz-text-3)}
.gate-card details[open] > summary::after,details.gate-card[open] > summary::after{content:" ▴"}
details.gate-card.gate-fold{padding-top:18px;padding-bottom:18px}
details.gate-card.gate-fold > summary{display:flex;align-items:center;gap:10px}
details.gate-card.gate-fold > summary h2{margin:0;flex:1}
.gate-count{font-size:12px;color:var(--wz-text-3)}
details.gate-card.gate-fold[open] > summary{margin-bottom:12px}

/* ① 계정 목록 — 이름 · 마지막 접속 왼쪽, 역할 꼬리표 오른쪽, 삭제는 빨간 글자 */
.account-list{list-style:none;margin:12px 0 0;padding:0}
.account-list li{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--wz-line)}
.account-list li:first-child{border-top:0}
.account-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.account-name{font-weight:700;color:var(--wz-text);overflow-wrap:anywhere}
.account-seen{font-size:12px;color:var(--wz-text-3);overflow-wrap:anywhere}
.account-role{flex:none;padding:3px 9px;border-radius:var(--wz-r-pill);border:1px solid rgba(224,178,92,.35);color:var(--wz-gold-soft);
  font-size:12px;white-space:nowrap}
.account-list form{margin:0;flex:none}

/* ② 친구 초대 — 만든 링크는 큰 글자 + 복사 */
#invite-form{margin-top:4px}
.invite-result{margin:14px 0 0;padding:14px;border-radius:var(--wz-r-lg);background:var(--wz-gold-glow);border:1px solid rgba(224,178,92,.28);
  animation:wzGateIn .42s var(--wz-e-out) 1 both}
.invite-result[hidden]{display:none}
.invite-label{margin:0 0 8px!important;font-size:12px!important;color:var(--wz-gold-soft)!important}
.invite-link-row{display:flex;align-items:center;gap:10px}
.invite-link{flex:1;min-width:0;font-size:17px;font-weight:700;line-height:1.4;color:var(--wz-text);overflow-wrap:anywhere;user-select:all}
.invite-copy{flex:none}
.invite-note{margin:10px 0 0!important;font-size:12px!important;color:var(--wz-text-3)!important}
.invite-list{list-style:none;margin:14px 0 0;padding:0}
.invite-list li{padding:9px 0;border-top:1px solid var(--wz-line);font-size:13px;color:var(--wz-text-2);overflow-wrap:anywhere}
.invite-state.is-open{color:var(--wz-live)}
.invite-exp{color:var(--wz-text-3)}

/* ③ 로그인 실패 기록 — 날짜 · 이름 · 어디서 · 잠금 칸 */
.attempt-head,.attempt-list li{display:grid;grid-template-columns:140px minmax(0,1fr) minmax(0,1.4fr) 68px;gap:8px;align-items:baseline}
.attempt-head{padding:0 0 6px;font-size:11px;color:var(--wz-text-3);border-bottom:1px solid var(--wz-line)}
.attempt-list{list-style:none;margin:0;padding:0}
.attempt-list li{padding:9px 0;border-top:1px solid var(--wz-line);font-size:12px;color:var(--wz-text-2)}
.attempt-list li:first-child{border-top:0}
.attempt-list span{min-width:0;overflow-wrap:anywhere}
.attempt-at{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--wz-text-3)}
.attempt-name{color:var(--wz-text)}
.attempt-locked{color:var(--wz-warn)}
.attempt-empty{margin:0!important}

/* 증권사 연결 */
.gate-status{display:flex;align-items:center;gap:8px;color:var(--wz-text)!important}
.gate-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--wz-text-3)}
.gate-dot.is-on{background:var(--wz-live)}
.gate-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px}
.gate-actions form{margin:0}
.gate-rows{list-style:none;margin:0;padding:0}
.gate-rows li{padding:9px 0;border-top:1px solid var(--wz-line);font-size:13px;color:var(--wz-text-2);overflow-wrap:anywhere}
.gate-rows li:first-child{border-top:0}

@media (max-width:480px){
  body.wz-gate{padding:40px 16px 72px}
  .wz-gate-main,.wz-gate-main.is-wide{max-width:none}
  .gate-card{padding:20px 16px}
  /* 폰: 실패 기록은 두 줄(날짜 · 잠금 / 이름 · 어디서) */
  .attempt-head{display:none}
  .attempt-list li{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .attempt-list .attempt-lock{text-align:right}
  .attempt-list .attempt-at{order:1}.attempt-list .attempt-lock{order:2}.attempt-list .attempt-name{order:3}.attempt-list .attempt-source{order:4}
  .invite-link{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .gate-card,.invite-result{animation:none!important}
  .gate-card button{transition:none}
  .gate-card button:active{transform:none}
}