/* =========================================
   헤더 우측 인증 버튼 (로그인 / 회원가입) - 비로그인 시
   ========================================= */
.header_auth {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;      /* 크기 고정 (줄어들지 않음) */
}

/* 비로그인 헤더 레이아웃: [로고] [검색(적당히)] ......여백...... [로그인][회원가입] */
.header_div--guest .search {
  flex: 0 1 480px;     /* 검색창이 화면을 다 먹지 않도록 */
  width: auto;
}
.header_div--guest .header_auth {
  margin-left: auto;   /* 남는 공간을 모두 왼쪽에 두어 버튼을 우측 끝으로 밀어냄 */
}

.header_auth__login,
.header_auth__signup {
  height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
  user-select: none;
  border: none;
}

.header_auth__login {
  color: #333;
  background: #f2f2f2;
}
.header_auth__login:hover { background: #e7e7e7; }

.header_auth__signup {
  color: #fff;
  background: #1a1a1a;
}
.header_auth__signup:hover { background: #000; }

@media (max-width: 480px) {
  .header_auth__login,
  .header_auth__signup { height: 34px; padding: 0 12px; font-size: 13px; }
}

/* =========================================
   로그인 모달 오버레이 & 카드
   ========================================= */
.login_modal_overlay {
  display: none;               /* JS 로 flex 전환 */
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login_modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 18px;
  padding: 40px 32px 32px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
  animation: loginModalPop .22s ease;
}

@keyframes loginModalPop {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.login_modal__close {
  position: absolute;
  top: 16px;
  right: 18px;
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: #888;
  cursor: pointer;
}
.login_modal__close:hover { color: #222; }

.login_modal__logo {
  text-align: center;
  margin-bottom: 26px;
}
.login_modal__logo img {
  height: 30px;
  width: auto;
}

/* 입력창 */
.login_modal__form { display: flex; flex-direction: column; gap: 10px; }

.login_modal__input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  font-size: 15px;
  outline: none;
  transition: border-color .15s ease;
}
.login_modal__input:focus { border-color: #6E3CFF; }

.login_modal__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 2px 6px;
  font-size: 13px;
}
.login_modal__keep { display: flex; align-items: center; gap: 6px; color: #444; cursor: pointer; }
.login_modal__find { color: #888; text-decoration: none; }
.login_modal__find:hover { color: #444; text-decoration: underline; }

.login_modal__error {
  display: none;
  color: #e03b3b;
  font-size: 13px;
  margin: 2px 2px 0;
}

.login_modal__submit {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 10px;
  background: #1a1a1a;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
  transition: background .15s ease;
}
.login_modal__submit:hover { background: #000; }
.login_modal__submit:disabled { opacity: .6; cursor: default; }

/* SNS 구분선 */
.login_modal__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 18px;
  color: #aaa;
  font-size: 13px;
  font-weight: 600;
}
.login_modal__divider::before,
.login_modal__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #eee;
}

/* SNS 버튼 */
.login_modal__sns {
  display: flex;
  justify-content: center;
  gap: 14px;
}
.sns_btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid #eee;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 20px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.sns_btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.12); }
.sns_btn--kakao  { background: #FEE500; color: #3A1D1D; }
.sns_btn--naver  { background: #03C75A; color: #fff; }

/* 회원가입 유도 */
.login_modal__signup {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: #666;
}
.login_modal__signup a {
  color: #1a1a1a;
  font-weight: 700;
  text-decoration: none;
  margin-left: 6px;
}
.login_modal__signup a:hover { text-decoration: underline; }

/* 모바일 */
@media (max-width: 480px) {
  .top_auth { top: 14px; right: 14px; gap: 8px; }
  .top_auth__login, .top_auth__signup { height: 38px; padding: 0 14px; font-size: 13px; }
  .login_modal { padding: 36px 22px 26px; }
}