/* ================================================================
   auth.css — 로그인 / 회원가입 모달 + nav 계정 버튼
   KOREA 3.0 디자인 시스템(블랙+골드, 다크/라이트 테마 토큰)에 맞춤.
   ⚠ UI 목업 — 실제 인증 백엔드 미연결(데모). 토큰은 index.html :root와 공유.
   ================================================================ */

/* ── nav 계정 버튼 (auth.js가 .lang-toggle 앞에 주입) ── */
.khs-acct{display:flex;align-items:center;gap:6px;flex-shrink:0}
.khs-acct-btn{font-family:'DM Mono','Noto Sans KR',monospace;font-size:12px;font-weight:500;
  letter-spacing:.12em;color:var(--on-accent);cursor:pointer;white-space:nowrap;
  border:1px solid rgba(var(--ac-rgb),.5);border-radius:6px;padding:5px 12px;
  background:linear-gradient(135deg,var(--cyan),var(--gold));transition:filter .2s,box-shadow .2s}
.khs-acct-btn:hover{filter:brightness(1.06);box-shadow:0 0 14px rgba(var(--ac-rgb),.35)}
/* 로그인 상태: 이름 칩 + 드롭다운 */
.khs-acct-chip{display:flex;align-items:center;gap:7px;font-family:'DM Mono','Noto Sans KR',monospace;
  font-size:12px;letter-spacing:.1em;color:var(--text);cursor:pointer;white-space:nowrap;
  border:1px solid var(--border);border-radius:20px;padding:3px 10px 3px 3px;background:var(--tag-bg);
  transition:border-color .2s}
.khs-acct-chip:hover{border-color:rgba(var(--ac-rgb),.5)}
.khs-acct-av{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:700;color:var(--on-accent);
  background:linear-gradient(135deg,var(--cyan),var(--gold));font-family:'Noto Sans KR',sans-serif}
.khs-acct-name{max-width:96px;overflow:hidden;text-overflow:ellipsis}
.khs-acct-wrap{position:relative}
/* position:fixed — nav-inner의 overflow-x:auto 가 절대배치 메뉴를 잘라내므로 오버플로 컨텍스트를 벗어난다.
   실제 top/right 는 auth.js 가 칩 위치 기준으로 지정한다. */
.khs-acct-menu{position:fixed;top:56px;right:20px;min-width:184px;z-index:300;
  background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:6px;
  box-shadow:var(--card-shadow);display:none;flex-direction:column;gap:2px}
.khs-acct-menu.open{display:flex}
.khs-acct-menu .khs-mi-head{padding:8px 10px 10px;border-bottom:1px solid var(--border2);margin-bottom:4px}
.khs-acct-menu .khs-mi-name{font-size:13px;font-weight:700;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.khs-acct-menu .khs-mi-mail{font-size:11px;color:var(--muted);font-family:'DM Mono','Noto Sans KR',monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.khs-acct-menu .khs-mi-plan{display:inline-block;margin-top:7px;font-size:9px;font-weight:700;letter-spacing:.1em;
  font-family:'DM Mono','Noto Sans KR',monospace;padding:2px 8px;border-radius:20px;
  background:rgba(var(--ac-rgb),.12);color:var(--cyan);border:1px solid rgba(var(--ac-rgb),.28)}
.khs-acct-menu button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  font-family:'Noto Sans KR',sans-serif;font-size:13px;color:var(--text);background:none;border:none;
  border-radius:8px;padding:9px 10px;cursor:pointer;transition:background .15s}
.khs-acct-menu button:hover{background:var(--hover-bg)}
.khs-acct-menu button.khs-mi-danger{color:var(--red)}

/* ── 오버레이 + 모달 ── */
.khs-auth-overlay{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(5,5,5,.72);backdrop-filter:blur(6px);
  animation:khs-fade .22s ease}
.khs-auth-overlay.open{display:flex}
:root[data-theme="light"] .khs-auth-overlay{background:rgba(40,33,18,.42)}
@keyframes khs-fade{from{opacity:0}to{opacity:1}}
@keyframes khs-pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

.khs-auth-modal{position:relative;width:100%;max-width:416px;max-height:calc(100vh - 48px);overflow-y:auto;
  background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:40px 34px 30px;
  box-shadow:var(--card-shadow),0 0 60px rgba(var(--gold-rgb),.08);animation:khs-pop .28s cubic-bezier(.4,0,.2,1)}
.khs-auth-modal::-webkit-scrollbar{width:6px}
.khs-auth-modal::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.khs-auth-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:8px;
  border:1px solid transparent;background:none;color:var(--muted);font-size:18px;cursor:pointer;line-height:1;
  transition:all .18s}
.khs-auth-close:hover{color:var(--text);background:var(--hover-bg);border-color:var(--border)}

/* 브랜드 마크 */
.khs-auth-brand{text-align:center;margin-bottom:20px}
.khs-auth-taeg{width:38px;height:38px;margin:0 auto 12px;display:block}
.khs-auth-wordmark{font-family:'DM Mono','Noto Sans KR',monospace;font-size:14px;font-weight:500;
  letter-spacing:.22em;color:var(--text)}
.khs-auth-wordmark em{font-style:normal;color:var(--cyan)}

.khs-auth-h{text-align:center;font-size:21px;font-weight:900;letter-spacing:-.01em;color:var(--text);margin-bottom:6px}
.khs-auth-sub{text-align:center;font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:16px}
.khs-auth-chip{display:block;text-align:center;font-family:'DM Mono','Noto Sans KR',monospace;font-size:11px;
  letter-spacing:.06em;color:var(--cyan);background:rgba(var(--ac-rgb),.09);border:1px solid rgba(var(--ac-rgb),.26);
  border-radius:20px;padding:7px 12px;margin-bottom:18px}

/* 패널 전환 */
.khs-auth-panel{display:none}
.khs-auth-panel.active{display:block}

/* 입력 */
.khs-field{position:relative;margin-bottom:11px}
.khs-input{width:100%;font-family:'Noto Sans KR',sans-serif;font-size:14px;color:var(--text);
  background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:13px 15px;transition:border-color .18s,box-shadow .18s}
.khs-input::placeholder{color:var(--muted2)}
.khs-input:focus{outline:none;border-color:rgba(var(--ac-rgb),.6);box-shadow:0 0 0 3px rgba(var(--ac-rgb),.12)}
.khs-input.pw{padding-right:44px}
.khs-eye{position:absolute;right:11px;top:50%;transform:translateY(-50%);background:none;border:none;
  cursor:pointer;font-size:16px;color:var(--muted);padding:4px;line-height:1;transition:color .15s}
.khs-eye:hover{color:var(--cyan)}

/* 옵션 줄: 저장 + 비번찾기 */
.khs-optrow{display:flex;align-items:center;justify-content:space-between;margin:4px 0 16px}
.khs-check{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;color:var(--muted);user-select:none}
.khs-check input{width:14px;height:14px;cursor:pointer;accent-color:var(--gold)}
.khs-link{font-size:12px;color:var(--cyan);text-decoration:none;cursor:pointer;background:none;border:none;
  font-family:inherit;padding:0}
.khs-link:hover{text-decoration:underline}

/* 제출 버튼 (골드 그라디언트) */
.khs-submit{width:100%;font-family:'Noto Sans KR',sans-serif;font-size:15px;font-weight:800;letter-spacing:.02em;
  color:var(--on-accent);background:linear-gradient(135deg,var(--cyan),var(--gold));border:none;border-radius:11px;
  padding:14px;cursor:pointer;transition:filter .18s,box-shadow .18s;margin-bottom:14px}
.khs-submit:hover{filter:brightness(1.05);box-shadow:0 6px 22px rgba(var(--gold-rgb),.32)}
.khs-submit:disabled{opacity:.6;cursor:default;filter:none;box-shadow:none}

/* 구분선 */
.khs-divider{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.khs-divider::before,.khs-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.khs-divider span{font-size:11px;color:var(--muted2);white-space:nowrap;
  font-family:'DM Mono','Noto Sans KR',monospace;letter-spacing:.1em}

/* 구글 버튼 */
.khs-google{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  font-family:'Noto Sans KR',sans-serif;font-size:14px;font-weight:600;color:var(--text);
  background:var(--bg3);border:1px solid var(--border);border-radius:11px;padding:12px;cursor:pointer;
  transition:border-color .18s,background .18s;margin-bottom:16px}
.khs-google:hover{border-color:rgba(var(--ac-rgb),.5);background:var(--bg4)}

/* 하단 전환 안내 */
.khs-switch{text-align:center;font-size:13px;color:var(--muted)}
.khs-switch button{color:var(--cyan);background:none;border:none;font-family:inherit;font-size:13px;
  font-weight:700;cursor:pointer;padding:0 2px}
.khs-switch button:hover{text-decoration:underline}

/* 에러 / 결과 메시지 */
.khs-msg{display:none;font-size:12.5px;line-height:1.55;border-radius:9px;padding:10px 13px;margin-bottom:13px;text-align:left}
.khs-msg.err{display:block;color:var(--red);background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.28)}
.khs-msg.ok{display:block;color:var(--green);background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.28)}

/* 약관 동의 (회원가입) */
.khs-agree{display:flex;align-items:flex-start;gap:8px;cursor:pointer;font-size:12px;color:var(--muted);
  line-height:1.6;margin:2px 0 16px;user-select:none}
.khs-agree input{margin-top:2px;flex-shrink:0;width:15px;height:15px;cursor:pointer;accent-color:var(--gold)}
.khs-agree a{color:var(--cyan);text-decoration:none}
.khs-agree a:hover{text-decoration:underline}

/* 신뢰 노트 */
.khs-trust{text-align:center;font-size:11px;color:var(--muted2);margin-top:18px;
  padding-top:16px;border-top:1px solid var(--border2);
  font-family:'DM Mono','Noto Sans KR',monospace;letter-spacing:.04em}

/* 데모 배지 */
.khs-demo-badge{position:absolute;top:14px;left:14px;font-family:'DM Mono','Noto Sans KR',monospace;
  font-size:8px;font-weight:500;letter-spacing:.14em;color:var(--muted2);
  border:1px solid var(--border);border-radius:20px;padding:3px 8px}

@media(max-width:480px){
  .khs-auth-modal{padding:34px 22px 26px}
  .khs-acct-name{max-width:64px}
}

/* 모션 최소화 */
@media(prefers-reduced-motion:reduce){
  .khs-auth-overlay,.khs-auth-modal{animation:none}
}