/*
[FILE]
c:/dolcu/hub/main/modules/hub_login/hub_login.css

[ROLE]
USER 생성 관문 전용 모달 스타일
- 진한 청색 유리(glassmorphism) 컨셉
- 야간 UI 기준
- GUEST 상태에서만 JS로 노출

[FUTURE NOTES]
1. 색감만 조정 가능, 구조/클래스 변경 금지
2. USER 상태에서는 display 제어만 수행
*/

/* =========================
   Overlay (Dark Blue)
========================= */
.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(5, 10, 25, 0.75);
  backdrop-filter: blur(4px);

  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.login-overlay[data-visible="true"] {
  display: flex;
}

/* =========================
   Modal Box (Deep Blue Glass)
========================= */
.login-modal {
  width: 92%;
  max-width: 360px;
  padding: 22px 18px;
  box-sizing: border-box;

  background: linear-gradient(
    180deg,
    rgba(30, 60, 95, 0.92) 0%,
    rgba(15, 35, 60, 0.88) 100%
  );

  border-radius: 18px;

  border: 1px solid rgba(120, 170, 220, 0.35);

  box-shadow:
    0 10px 35px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);

  backdrop-filter: blur(12px);
}



/* =========================
   Overlay (Center Lock)
========================= */
.login-overlay {
  position: fixed;
  inset: 0; /* top/right/bottom/left = 0 */
  z-index: 9999;

  display: none;
  align-items: center;
  justify-content: center;

  /* 스크롤 생겨도 중앙 유지 */
  padding: 16px;
  box-sizing: border-box;

  background: rgba(5, 10, 25, 0.75);
  backdrop-filter: blur(4px);

  /* iOS/모바일에서 가끔 흔들리는 것 방지 */
  overflow: hidden;
}

.login-overlay[data-visible="true"] {
  display: flex;
}

/* =========================
   Modal (No Position Drift)
========================= */
.login-modal {
  width: 100%;
  max-width: 360px;

  /* 가운데 고정 핵심: margin/position/translate 건드리지 말 것 */
  margin: 0;
  position: relative;

  padding: 22px 18px;
  box-sizing: border-box;

  background: linear-gradient(
    180deg,
    rgba(30, 60, 95, 0.92) 0%,
    rgba(15, 35, 60, 0.88) 100%
  );

  border-radius: 18px;
  border: 1px solid rgba(120, 170, 220, 0.35);

  box-shadow:
    0 10px 35px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);

  backdrop-filter: blur(12px);
}












/* =========================
   Title
========================= */
.login-title {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 14px;

  color: #e9f4ff;
  letter-spacing: 0.6px;
}

/* =========================
   Guide Text
========================= */
.login-guide {
  font-size: 13px;
  color: #cfe3f5;
  margin-bottom: 18px;
}

.login-guide ol {
  padding-left: 18px;
  margin: 0;
}

.login-guide li {
  margin-bottom: 7px;
  line-height: 1.45;
}

/* =========================
   Phone Input
========================= */
.login-phone-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.login-phone-part {
  width: 64px;
  padding: 9px 6px;
  font-size: 14px;
  text-align: center;
  box-sizing: border-box;

  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;

  border: 1px solid rgba(140, 190, 240, 0.45);
  border-radius: 7px;

  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.login-phone-part::placeholder {
  color: rgba(230, 240, 255, 0.6);
}

.login-phone-part:focus {
  outline: none;
  border-color: rgba(170, 210, 255, 0.9);
  background: rgba(255, 255, 255, 0.18);
}

.login-phone-sep {
  margin: 0 6px;
  font-size: 14px;
  color: #bcdcff;
}

/* =========================
   Buttons
========================= */
.login-btn-wrap {
  display: flex;
  gap: 12px;
}

.login-submit-btn,
.login-cancel-btn {
  flex: 1;
  padding: 11px 0;
  font-size: 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}

/* 메인 액션 */
.login-submit-btn {
  background: linear-gradient(
    180deg,
    #0a0f14 0%,
    #000000 100%
  );
  color: #ffffff;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 4px 10px rgba(0, 0, 0, 0.6);
}

/* 보조 액션 */
.login-cancel-btn {
  background: rgba(120, 150, 180, 0.35);
  color: #e6f2ff;
}