/* =============================================
   login.css — 로그인 페이지 전용
   submitForm.css 컬러 계열(#7DA7D1) 동일 적용
   ============================================= */

.login-wrap-new {
  max-width: 440px;
  margin: 50px auto;
  padding: 2rem 1rem 4rem;
}

/* 타이틀 */
.login-wrap-new .title-main {
  font-size: 24px;
  font-weight: 500;
  color: #1a1a1a;
  margin-bottom: 1.5rem;
  text-align: left;
}

.login-wrap-new .title-main span {
  color: #7DA7D1;
}

/* 도메인 행 */
.domain-row {
  display: flex;
  align-items: center;
  border-top: 1px solid #f0f0f0;
  min-height: 48px;
}

.domain-row .at-text {
  font-size: 14px;
  color: #bbb;
  padding-left: 16px;
  flex-shrink: 0;
}

.domain-row select {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: #555;
  padding: 14px 8px 14px 6px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  font-family: 'GmarketSansMedium', sans-serif;
  box-shadow: none;
}

.domain-direct-input {
  flex: 1;
  border: none !important;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: #1a1a1a;
  padding: 14px 16px 14px 6px;
  font-family: 'GmarketSansMedium', sans-serif;
  box-shadow: none !important;
  -webkit-appearance: none;
  display: none;
}

.domain-direct-input.show {
  display: block;
}

/* 커스텀 select */
.custom-select {
  flex: 1;
  position: relative;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 14px 8px;
  cursor: pointer;
  font-size: 14px;
  color: #555;
  font-family: 'GmarketSansMedium', sans-serif;
  user-select: none;
}

.cs-arrow {
  font-size: 10px;
  color: #bbb;
  margin-left: 6px;
  transition: transform 0.2s;
}

.custom-select.open .cs-arrow {
  transform: rotate(180deg);
}

.custom-select-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 200;
  overflow: hidden;
}

.custom-select.open .custom-select-dropdown {
  display: block;
}

.custom-select-option {
  padding: 12px 16px;
  font-size: 14px;
  color: #555;
  cursor: pointer;
  font-family: 'GmarketSansMedium', sans-serif;
  transition: background 0.1s;
}

.custom-select-option:hover {
  background: #f0f7fc;
  color: #7DA7D1;
}

.custom-select-option.selected {
  color: #7DA7D1;
  font-weight: 600;
  background: #f5f9fd;
}

/* email-divider */
.email-divider {
  width: 1px;
  background: #f0f0f0;
  margin: 10px 0;
  flex-shrink: 0;
}

/* 아이디저장 / 찾기 */
.login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 2px 16px;
}

.id-save-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #555;
}

.id-save-wrap input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: #7DA7D1;
  cursor: pointer;
}

.find-links {
  font-size: 13px;
  color: #888;
}

.find-links a {
  color: #7DA7D1;
  text-decoration: none;
}

.find-links a:hover {
  color: #074565;
}

/* 로그인 버튼 */
.btn-login {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 12px;
  background: #7DA7D1;
  color: white;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  font-family: 'GmarketSansMedium', sans-serif;
  transition: background 0.15s;
}

.btn-login:hover {
  background: #074565;
}

/* 구분선 */
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: #ccc;
  font-size: 12px;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e0e0e0;
}

/* SNS 버튼 */
.sns-row {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.sns-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 12px;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  background: #fff;
  font-size: 13px;
  color: #1a1a1a;
  cursor: pointer;
  font-family: 'GmarketSansMedium', sans-serif;
  transition: background 0.15s;
}

.sns-btn:hover {
  background: #f5f5f5;
}

.sns-btn img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.sns-btn.naver {
  border-color: #03C75A;
  color: #ffffff;
  background-color: #03C75A;
}

/* 회원가입 */
.login-join-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
  font-size: 13px;
  color: #888;
}

.btn-join {
  padding: 10px 24px;
  border: 1.5px solid #7DA7D1;
  border-radius: 12px;
  color: #7DA7D1;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  font-family: 'GmarketSansMedium', sans-serif;
  transition: all 0.15s;
}

.btn-join:hover {
  background: #7DA7D1;
  color: #fff;
}

/* 반응형 */
@media (max-width: 414px) {
  .login-wrap-new {
    padding: 1rem 1rem 3rem;
  }

  .sns-row {
    flex-direction: column;
  }

  .login-join-wrap {
    flex-direction: column;
    gap: 8px;
  }
}