/* ═══════════════════════════════════════════
   auth.css — 로그인 화면 스타일 (HS오퍼레이션 브랜드)
═══════════════════════════════════════════ */

/* ── 로그인 오버레이 배경 ── */
#loginOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* HS 브랜드 다크브라운 배경 */
  background: #2C2825;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
#loginOverlay.active {
  opacity: 1;
  pointer-events: all;
}

/* ── 배경 텍스처 (미세한 노이즈 느낌) ── */
#loginOverlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(143,124,105,.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.04) 0%, transparent 40%),
    radial-gradient(circle at 60% 80%, rgba(143,124,105,.08) 0%, transparent 40%);
  pointer-events: none;
}

/* ── 로그인 카드 ── */
#loginCard {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 1rem;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(232,226,221,.15);
  border-radius: 18px;
  padding: 2.8rem 2.5rem 2.2rem;
  box-shadow:
    0 30px 70px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.04) inset;
  animation: loginCardIn .45s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes loginCardIn {
  from { transform: translateY(24px) scale(.97); opacity: 0; }
  to   { transform: translateY(0) scale(1);      opacity: 1; }
}

/* ── 흔들기 애니메이션 ── */
.shake { animation: shakeX .5s ease !important; }
@keyframes shakeX {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-10px); }
  40%     { transform: translateX(10px); }
  60%     { transform: translateX(-8px); }
  80%     { transform: translateX(8px); }
}

/* ── 로고 영역 (심볼 + HS OPERATION 가로 배치) ── */
.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: .3rem;
}

.login-logo-icon { display: none; }
.login-logo-img { display: none; }

.login-logo-text {
  font-size: 1.3rem;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  letter-spacing: .18em;
  line-height: 1;
}

.login-title-text { display: none; }

.login-subtitle {
  text-align: center;
  font-size: .78rem;
  color: rgba(232,226,221,.4);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 2rem;
  margin-top: .2rem;
}

/* ── 구분선 ── */
.login-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,.1);
  margin: 1.5rem 0;
}

/* ── 입력 그룹 ── */
.login-field {
  margin-bottom: 1rem;
}

.login-label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  letter-spacing: .08em;
  margin-bottom: .45rem;
  text-transform: uppercase;
}

.login-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.login-input-wrap i.input-icon {
  position: absolute;
  left: 1rem;
  color: rgba(255,255,255,.35);
  font-size: .9rem;
  pointer-events: none;
}

#loginPwInput {
  width: 100%;
  padding: .8rem 3rem .8rem 2.6rem;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.15);
  border-radius: 10px;
  color: #fff;
  font-size: .95rem;
  font-family: inherit;
  outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
}

#loginPwInput::placeholder {
  color: rgba(255,255,255,.25);
}

#loginPwInput:focus {
  border-color: #8F7C69;
  background: rgba(143,124,105,.1);
  box-shadow: 0 0 0 3px rgba(143,124,105,.2);
}

#loginPwToggle {
  position: absolute;
  right: .85rem;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,.35);
  padding: .25rem;
  transition: color .2s;
  font-size: .9rem;
}
#loginPwToggle:hover { color: rgba(255,255,255,.7); }

/* ── 에러 메시지 ── */
#loginError {
  display: none;
  align-items: center;
  gap: .5rem;
  background: rgba(239,68,68,.15);
  border: 1px solid rgba(239,68,68,.3);
  border-radius: 8px;
  padding: .55rem .9rem;
  font-size: .82rem;
  color: #fca5a5;
  margin-bottom: .8rem;
}

/* ── 로그인 버튼 ── */
#loginBtn {
  width: 100%;
  padding: .85rem;
  background: linear-gradient(135deg, #8F7C69, #2C2825);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: .04em;
  transition: transform .15s, box-shadow .15s, opacity .15s;
  box-shadow: 0 4px 16px rgba(44,40,37,.4);
}

#loginBtn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(44,40,37,.5);
}

#loginBtn:active:not(:disabled) {
  transform: translateY(0);
}

#loginBtn:disabled {
  opacity: .7;
  cursor: not-allowed;
}

/* ── 하단 안내 ── */
.login-footer-note {
  margin-top: 1.5rem;
  text-align: center;
  font-size: .75rem;
  color: rgba(255,255,255,.25);
  line-height: 1.7;
}

.login-footer-note strong {
  color: rgba(255,255,255,.45);
  font-weight: 600;
}

/* ── 탑바 로그아웃 버튼 ── */
#logoutBtn {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .85rem;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.2);
  border-radius: 6px;
  color: #ef4444;
  font-size: .8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
#logoutBtn:hover {
  background: rgba(239,68,68,.15);
  border-color: rgba(239,68,68,.4);
}

#changePwBtn {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .85rem;
  background: rgba(100,116,139,.08);
  border: 1px solid rgba(100,116,139,.2);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: .8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .2s;
}
#changePwBtn:hover { background: rgba(100,116,139,.15); }

/* ── 비밀번호 변경 모달 내부 ── */
.pw-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.pw-input-wrap input {
  padding-right: 2.5rem !important;
}
.pw-eye-btn {
  position: absolute;
  right: .75rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: .2rem;
  font-size: .88rem;
  transition: color .2s;
}
.pw-eye-btn:hover { color: var(--primary); }

#cpError {
  display: none;
  align-items: center;
  gap: .5rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: .5rem .75rem;
  font-size: .82rem;
  color: #ef4444;
  margin-bottom: .5rem;
}

.pw-strength {
  margin-top: .3rem;
  font-size: .75rem;
  color: var(--text-muted);
}

/* ── 기본 비밀번호 안내 박스 ── */
.default-pw-notice {
  background: #f5f1ee;
  border: 1px solid #E8E2DD;
  border-radius: 8px;
  padding: .7rem 1rem;
  font-size: .8rem;
  color: #2C2825;
  margin-bottom: 1.2rem;
  line-height: 1.7;
}