/* =============================================
   ASSO — Auth Modal
   로그인 / 회원가입 모달
   ============================================= */

/* ── 오버레이 ── */
.auth-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 20, 18, 0.48);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.auth-modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── 패널 ── */
.auth-modal {
  position: relative;
  background: #fff;
  width: 100%;
  max-width: 440px;
  max-height: 90svh;
  overflow-y: auto;
  padding: 48px 44px 44px;
  transform: translateY(16px) scale(0.98);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  scrollbar-width: thin;
  scrollbar-color: var(--stone-light) transparent;
}
.auth-modal-overlay.is-open .auth-modal {
  transform: translateY(0) scale(1);
}

/* 닫기 버튼 */
.auth-modal-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--stone-mid);
  transition: color 0.18s;
}
.auth-modal-close:hover { color: var(--black); }
.auth-modal-close svg { width: 18px; height: 18px; }

/* ── 로고 / 타이틀 ── */
.auth-logo {
  font-family: var(--logo);
  font-size: 22px;
  font-style: italic;
  font-weight: 700;
  color: var(--black);
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 6px;
}
.auth-logo::before {
  content: '♡ ';
  font-style: normal;
  color: var(--rose);
  font-size: 14px;
}
.auth-subtitle {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-mid);
  text-align: center;
  margin-bottom: 32px;
}

/* ── 탭 ── */
.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--ivory-3);
  margin-bottom: 28px;
  gap: 0;
}
.auth-tab-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 10px 0 12px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
}
.auth-tab-btn::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 1.5px;
  background: var(--black);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.auth-tab-btn.active {
  color: var(--black);
}
.auth-tab-btn.active::after {
  transform: scaleX(1);
}

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

/* ── 폼 요소 ── */
.auth-field {
  margin-bottom: 16px;
}
.auth-label {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-mid);
  margin-bottom: 7px;
}
.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.auth-input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--ivory-3);
  background: var(--ivory);
  padding: 0 42px 0 14px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--black);
  outline: none;
  transition: border-color 0.2s;
  border-radius: 0;
  -webkit-appearance: none;
}
.auth-input:focus {
  border-color: var(--black);
  background: #fff;
}
.auth-input.error {
  border-color: #c0392b;
}
.auth-input::placeholder {
  color: var(--stone-light);
}

/* ── Safari 자동완성 완전 차단: type=text + -webkit-text-security ── */
/* .pw-mask 클래스가 붙어있을 때 비밀번호처럼 마스킹 (Safari/Chrome/Firefox 모두 지원) */
.pw-mask {
  -webkit-text-security: disc;
  text-security: disc;
  letter-spacing: 0.1em;
}
/* 비밀번호 보이기 상태 */
.pw-mask.pw-visible {
  -webkit-text-security: none;
  text-security: none;
  letter-spacing: normal;
}

/* 비밀번호 눈 아이콘 */
.pw-toggle {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--stone);
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color 0.18s;
}
.pw-toggle:hover { color: var(--black); }
.pw-toggle svg { width: 16px; height: 16px; }

/* 에러 메시지 */
.auth-error {
  display: none;
  font-family: var(--sans);
  font-size: 11px;
  color: #c0392b;
  margin-top: 12px;
  padding: 10px 14px;
  background: #fff5f5;
  border-left: 2px solid #c0392b;
}

/* ── 체크박스 ── */
.auth-checks {
  margin: 20px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth-check-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 300;
  color: var(--black-soft);
  line-height: 1.5;
}
.auth-check-label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 1px solid var(--stone-light);
  background: var(--ivory);
  cursor: pointer;
  margin-top: 1px;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.auth-check-label input[type="checkbox"]:checked {
  background: var(--black);
  border-color: var(--black);
}
.auth-check-label input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 2px; left: 5px;
  width: 4px; height: 8px;
  border: 1.5px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.auth-check-label .req-badge {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--rose-dark);
  margin-left: 2px;
}

/* ── 제출 버튼 ── */
.auth-submit-btn {
  width: 100%;
  height: 48px;
  background: var(--black);
  color: #fff;
  border: none;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  margin-top: 4px;
}
.auth-submit-btn:hover { background: var(--black-soft); }
.auth-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── 하단 보조 텍스트 ── */
.auth-switch {
  text-align: center;
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 300;
  color: var(--stone-mid);
}
.auth-switch button {
  background: none;
  border: none;
  color: var(--black);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

/* 구분선 */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 18px;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ivory-3);
}
.auth-divider span {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--stone-light);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── 소셜 로그인 ── */
.social-login-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}
.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: filter 0.15s, transform 0.12s;
  position: relative;
}
.social-btn:hover  { filter: brightness(0.93); }
.social-btn:active { transform: scale(0.985); }

/* 카카오 */
.social-btn--kakao {
  background: #FEE500;
  color: rgba(0,0,0,0.85);
}
/* 네이버 */
.social-btn--naver {
  background: #03C75A;
  color: #fff;
}
/* 구글 */
.social-btn--google {
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
}

/* 소셜 버튼 아이콘 */
.social-btn__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.social-btn__label {
  flex: 1;
  text-align: center;
  padding-right: 20px; /* 아이콘 너비만큼 보정해 텍스트 시각적 중앙 */
}

/* 웰컴 포인트 배너 */
.auth-point-banner {
  background: var(--rose-light);
  padding: 12px 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.auth-point-banner svg {
  width: 18px;
  height: 18px;
  color: var(--rose-dark);
  flex-shrink: 0;
}
.auth-point-banner p {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 300;
  color: var(--rose-dark);
  line-height: 1.5;
}
.auth-point-banner strong {
  font-weight: 500;
}

/* ── 유저 영역 (로그인 후) ── */
.user-menu-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* 로그인 전: LOGIN 링크 */
.nav-login-btn {
  white-space: nowrap;
}

/* 로그인 후: 닉네임 + 로그아웃 인라인 표시 */
.user-logged-row {
  display: none;           /* JS가 로그인 시 flex로 전환 */
  align-items: center;
  gap: 6px;
}
.user-logged-row.visible { display: flex; }

/* 닉네임 — 클릭하면 마이페이지 */
.user-nickname-btn {
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--black);
  cursor: pointer;
  padding: 0;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 0.18s;
}
.user-nickname-btn:hover { opacity: 0.55; }

/* 구분점 */
.user-sep {
  font-size: 9px;
  color: rgba(26,26,26,0.25);
  user-select: none;
}

/* 로그아웃 버튼 */
.user-logout-btn {
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone-mid);
  cursor: pointer;
  padding: 0;
  transition: color 0.18s;
  white-space: nowrap;
}
.user-logout-btn:hover { color: var(--black); }

/* ── 로그인 버튼 상태 ── */
.nav-login-btn.logged-in {
  display: none; /* 로그인 후 숨김 */
}

/* ── 반응형 ── */
@media (max-width: 480px) {
  .auth-modal {
    padding: 40px 24px 32px;
    max-height: 100svh;
    border-radius: 0;
  }
  .auth-modal-overlay {
    align-items: flex-end;
  }
  .auth-modal {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
  }
}