/* 로그인 팝업 (auth-modal.js)
 * 근거: W3C APG Dialog(Modal) 패턴, NN/G 모달·바텀시트 가이드, WCAG 2.5.8 타깃 크기(최소 24px, 권장 44px)
 * 시각: 메인과 같은 색(#1a1a1a 패널·#2b2b2e·#333336 테두리·강조 #FFA178)·Pretendard, 각진 모서리(0~2px)
 * 2026-10-02 리디자인: 위쪽 머리에 은은한 그림(비밀의 정원) 위 어두운 막 + 강조색 빛 → 로고·환영 문구,
 *   그 아래 간편 로그인(구글) → '또는' → 이메일 로그인. 코인 샵 보유 코인 카드·캐릭터 제작 상단과 같은 기법.
 *   글자 대비: 그림의 가장 밝은/어두운 점 기준으로 막 농도를 골라 4.5:1 이상 (다크 86% / 라이트 90%, theme.css)
 * 메인은 ds.css 를 불러오지 않으므로 이 파일만으로 완결 (토큰은 --am-*)
 */
.auth-modal {
  --am-bg: #1a1a1a;
  --am-surface: #232326;
  --am-surface-2: #2b2b2e;
  --am-border: #333336;
  --am-text: #f2f2f2;
  --am-text-dim: #a8a8ad;
  --am-text-faint: #77777c;
  --am-accent: #FFA178;
  --am-accent-strong: #e8906a;
  --am-on-accent: #1a1a1a;
  --am-danger: #e5484d;
  --am-radius: 0;
  --am-radius-sm: 2px;
  /* 머리(그림 위) 전용 — 라이트 모드는 theme.css 가 막·글자색만 바꿈 */
  --am-veil: rgba(26, 26, 26, 0.86);
  --am-glow: rgba(255, 161, 120, 0.14);
  --am-hero-text: #f2f2f2;
  --am-hero-dim: #d9cfc9;
  --am-hero-accent: #ffbea0;

  position: fixed;
  inset: 0;
  z-index: 2500; /* 드로어(1600)·PWA 시트(2100) 위, 토스트(1100)·알럿(1000)보다 위 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-family: 'Pretendard-Regular', Arial, sans-serif;
  text-align: left;
  word-break: keep-all; /* 한글은 어절 단위로 줄바꿈 */
}
.auth-modal[hidden] { display: none; }
.auth-modal *,
.auth-modal *::before,
.auth-modal *::after { box-sizing: border-box; }

.auth-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  animation: amFade 0.24s ease-out;
}

/* 모바일 기준: 화면 가운데 각진 카드 (360~430px 폭에서 좌우 16px 여백) */
.auth-modal__panel {
  position: relative;
  width: min(360px, 100%);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--am-bg);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius);
  padding: 0 18px calc(20px + env(safe-area-inset-bottom));
  color: var(--am-text);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  /* 등장: 살짝 아래에서 떠오르며 나타남 — 동작 줄이기 설정과 관계없이 항상 (사용자 지시) */
  animation: amRise 0.34s cubic-bezier(.2, .8, .2, 1) both;
}
.auth-modal__panel:focus { outline: none; }
@media (min-width: 640px) {
  .auth-modal { padding: 24px; }
  .auth-modal__panel { width: 380px; padding: 0 22px 24px; }
}

/* ─────────── 머리: 그림 + 막 + 강조색 빛 ─────────── */
.auth-modal__head {
  position: relative;
  margin: 0 -18px 18px;
  padding: 22px 18px 20px;
  overflow: hidden;
  background:
    linear-gradient(160deg, var(--am-glow) 0%, rgba(255, 161, 120, 0) 70%),
    linear-gradient(var(--am-veil), var(--am-veil)),
    url("/static/images/ui/bg-secret-garden.jpg") center 30% / cover no-repeat,
    var(--am-bg);
  border-bottom: 1px solid rgba(255, 161, 120, 0.24);
}
@media (min-width: 640px) {
  .auth-modal__head { margin: 0 -22px 20px; padding: 24px 22px 22px; }
}
.auth-modal__hero {
  padding-right: 36px; /* 닫기 버튼 자리 */
  animation: amRise 0.42s 0.06s cubic-bezier(.2, .8, .2, 1) both;
}
.auth-modal__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--am-hero-text);
}
.auth-modal__logo { flex: none; width: 28px; height: 28px; display: block; }
.auth-modal__welcome {
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--am-hero-accent);
}
.auth-modal__title {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: var(--am-hero-text);
}
.auth-modal__desc {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--am-hero-dim);
}

.auth-modal__close {
  position: absolute;
  top: 8px;
  right: 6px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--am-radius-sm);
  color: var(--am-hero-dim);
  cursor: pointer;
  padding: 0;
}
.auth-modal__close:hover { background: rgba(255, 255, 255, 0.08); color: var(--am-hero-text); }
.auth-modal__close:focus-visible,
.auth-modal__submit:focus-visible,
.auth-modal__social a:focus-visible,
.auth-modal__social button:focus-visible,
.auth-modal__link:focus-visible,
.auth-modal__switch a:focus-visible,
.auth-modal__legal a:focus-visible,
.auth-modal__eye:focus-visible {
  outline: 2px solid var(--am-accent);
  outline-offset: 2px;
}

/* ─────────── 안내·오류: 색만으로 구분하지 않고 아이콘+문장 ─────────── */
.auth-modal__message {
  display: none;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 12px;
  background: rgba(229, 72, 77, 0.08);
  border: 1px solid var(--am-danger);
  border-radius: var(--am-radius-sm);
  color: #ffb3b5;
  font-size: 13px;
  line-height: 1.5;
}
.auth-modal__message.is-visible { display: flex; }
.auth-modal__message.is-info { background: var(--am-surface); border-color: var(--am-border); color: var(--am-text-dim); }
.auth-modal__message svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }

/* ─────────── 간편 로그인: 구글·Discord·X 한 줄씩 (Discord·X 는 키가 설정된 것만) ─────────── */
.auth-modal__social {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.auth-modal__social a,
.auth-modal__social button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 12px;
  border-radius: var(--am-radius-sm);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.auth-modal__social a:hover,
.auth-modal__social button:hover { filter: brightness(0.95); }
.auth-modal__social .google {
  grid-column: 1 / -1;
  background: #ffffff;
  color: #1f1f1f;
  border-color: #dadce0;
  font-size: 15px;
}
.auth-modal__social .google img { width: 18px; height: 18px; }
.auth-modal__social .discord { background: #5865F2; color: #ffffff; font-size: 15px; }
.auth-modal__social .discord svg { width: 20px; height: 20px; }
.auth-modal__social .x { background: #000000; color: #ffffff; border-color: rgba(255, 255, 255, 0.18); font-size: 15px; }
.auth-modal__social .x svg { width: 16px; height: 16px; }

.auth-modal__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 16px;
  font-size: 12px;
  color: var(--am-text-faint);
}
.auth-modal__divider::before,
.auth-modal__divider::after { content: ""; flex: 1; height: 1px; background: var(--am-border); }

/* ─────────── 이메일 로그인 ─────────── */
.auth-modal__field { margin-bottom: 12px; }
.auth-modal__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--am-text-dim);
}
.auth-modal__input {
  width: 100%;
  height: 46px;
  padding: 0 12px;
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius-sm);
  color: var(--am-text);
  font-size: 16px; /* iOS: 16px 미만이면 입력 시 화면이 확대됨 */
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-modal__input::placeholder { color: var(--am-text-faint); }
.auth-modal__input:focus {
  outline: none;
  border-color: var(--am-accent);
  box-shadow: 0 0 0 3px rgba(255, 161, 120, 0.22);
}
.auth-modal__input[aria-invalid="true"] { border-color: var(--am-danger); }
.auth-modal__input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.2); }

.auth-modal__pw { position: relative; }
.auth-modal__pw .auth-modal__input { padding-right: 50px; }
.auth-modal__eye {
  position: absolute;
  top: 50%;
  right: 3px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--am-radius-sm);
  color: var(--am-text-dim);
  cursor: pointer;
  padding: 0;
}
.auth-modal__eye:hover { color: var(--am-text); }
.auth-modal__eye svg { width: 20px; height: 20px; }
.auth-modal__eye .off { display: none; }
.auth-modal__eye[aria-pressed="true"] .on { display: none; }
.auth-modal__eye[aria-pressed="true"] .off { display: block; }

/* 로그인 유지 체크박스 */
.auth-modal__remember { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 2px 0 14px; font-size: 13px; color: var(--am-text, #333); cursor: pointer; }
.auth-modal__remember input { width: 16px; height: 16px; margin: 0; accent-color: #FFA178; }
.auth-modal__remember-hint { color: var(--am-muted, #888); font-size: 12px; }

.auth-modal__submit {
  width: 100%;
  height: 50px;
  padding: 0 12px;
  background: var(--am-accent);
  color: var(--am-on-accent);
  border: none;
  border-radius: var(--am-radius-sm);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 6px 18px rgba(255, 161, 120, 0.22);
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.auth-modal__submit:hover { background: var(--am-accent-strong); }
.auth-modal__submit:active { transform: translateY(1px); }
.auth-modal__submit:disabled { opacity: 0.55; cursor: progress; box-shadow: none; }

.auth-modal__links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--am-text-faint);
}
.auth-modal__link { color: var(--am-text-dim); text-decoration: none; padding: 6px 2px; }
.auth-modal__link:hover { color: var(--am-text); }

.auth-modal__switch {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--am-border);
  text-align: center;
  font-size: 14px;
  color: var(--am-text-dim);
}
.auth-modal__switch a {
  padding: 4px;
  color: var(--am-accent);
  font-weight: 700;
  text-decoration: none;
}

.auth-modal__legal {
  margin: 8px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: var(--am-text-dim);
}
.auth-modal__legal a { color: inherit; text-decoration: underline; }

body.auth-modal-open { overflow: hidden; }

@keyframes amFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes amRise { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
/* 등장 애니메이션은 동작 줄이기 설정과 관계없이 항상 (사용자 지시, 모바일 기준) */