/* ============================================================
   themes/dodon/style/login-modal.css
   로그인 모달 — 껍데기만.

   로드: header.php 가 비로그인일 때 상시 로드
         (auth.css 다음에 온다. 폼 스타일은 거기 것을 그대로 쓴다)

   🔥 폼 스타일(.field / .form-status / .login-submit)은 여기 없다.
     _login_form.php 를 로그인 페이지와 같이 쓰므로 auth.css 하나로 끝낸다.
     여기서 또 정의하면 두 화면이 조용히 달라진다.
   ============================================================ */


/* ============================================================
   1. 바깥 틀
   ============================================================ */

/* hidden 속성으로 여닫는다.
   🔥 [hidden] 은 브라우저 기본이 display:block 인 요소에 밀리므로
      display:none 을 !important 없이 확실히 잡아둔다. */
.login-modal[hidden]{ display:none; }

.login-modal{
  position:fixed;
  inset:0;
  z-index:1000;          /* 헤더(보통 100대)보다 위 */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

/* 어두운 배경. 클릭하면 닫힌다(data-close) */
.login-modal-dim{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.55);
  animation:loginModalFade .16s ease;
}

/* 모달 본체 */
.login-modal-box{
  position:relative;      /* dim 위로 올라오게 */
  width:100%;
  max-width:420px;
  max-height:calc(100vh - 40px);
  overflow-y:auto;        /* 낮은 화면에서 잘리지 않게 */
  border-radius:12px;
  background:#fff;
  box-shadow:0 24px 48px rgba(15,23,42,.22);
  padding:22px;
  animation:loginModalUp .18s ease;
}

@keyframes loginModalFade{
  from{ opacity:0; }
}

/* 아래에서 살짝 올라온다. 위치가 튀지 않을 만큼만(8px). */
@keyframes loginModalUp{
  from{ opacity:0; transform:translateY(8px); }
}

/* 열려 있는 동안 배경 스크롤 잠금 (JS 가 body 에 건다) */
body.is-modal-open{
  overflow:hidden;
}


/* ============================================================
   2. 머리 / 안내문
   ============================================================ */

.login-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.login-modal-head h2{
  margin:0;
  font-size:22px;
  letter-spacing:-0.6px;
}

.login-modal-close{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#64748B;
  cursor:pointer;
}

.login-modal-close svg{
  width:20px;
  height:20px;
}

.login-modal-close:hover{
  background:#F1F5F9;
  color:var(--ink);
}

/* 왜 로그인이 필요한지. JS 가 상황에 맞게 문구를 바꾼다 */
.login-modal-desc{
  margin:10px 0 0;
  color:#475569;
  font-weight:700;
  font-size:14px;
  line-height:1.55;
}


/* ============================================================
   3. 모달 안의 폼 카드
   .login-panel 을 그대로 재사용하되, 모달 자체가 이미 흰 카드라
   테두리·그림자·배경이 이중이 된다. 그것만 벗긴다.
   ============================================================ */

.login-modal .login-panel{
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
  padding:18px 0 0;
}

/* 모달 안 보조 링크는 가운데로 (페이지는 왼쪽 정렬) */
.login-modal .quick-links{
  justify-content:center;
  gap:14px;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}


/* ============================================================
   4. 모바일
   ============================================================ */

@media (max-width: 640px){
  .login-modal{ padding:14px; }

  .login-modal-box{
    padding:18px;
    max-height:calc(100vh - 28px);
  }

  .login-modal-head h2{ font-size:20px; }
}