/* ==================== 로그인 스타일 ==================== */
.login-container {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .login-container-box {
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
    width: 100%;
    max-width: 384px;
  }
  
  /* 로그인 로고 - 충돌 해결 */
  .login-logo {
    width: 144px;
    height: 30.98px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .login-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .login-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  
  .login-input {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  
  .input-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .input-label {
    color: #030712;
    font-size: 14px;
    font-weight: 400;
  }
  
  .input-wrapper {
    position: relative;
  }
  
  .input-field {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    padding: 16px 20px;
    font-size: 14px;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    transition: border-color 0.2s;
    color: #030712;
  }
  
  .input-field:focus {
    outline: none;
    border-color: #6B7280;
  }
  
  .input-field::placeholder {
    color: #9ca3af;
  }
  
  .password-field {
    padding-right: 50px;
  }
  
  .eye-off {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    width: 24px;
    height: 24px;
    transition: opacity 0.2s;
  }
  
  .eye-off:hover {
    opacity: 0.7;
  }
  
  .login-button-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 8px;
  }
  
  .login-button {
    background: #030712;
    border-radius: 8px;
    padding: 16px 26px;
    width: 100%;
    height: 48px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .login-button:hover {
    opacity: 0.8;
  }
  
  .login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .remember-me-container {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
  }
  
  .check-box {
    width: 16px;
    height: 16px;
    border: 1px solid #6b7280;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    position: relative;
  }
  
  .check-box.checked {
    background: #030712;
    border-color: #030712;
  }
  
  .remember-label {
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
  }
  
  .forgot-password {
    color: #6b7280;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: color 0.2s;
  }
  
  .forgot-password:hover {
    opacity: 0.7;
  }
  
  .sns {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: center;
  }
  
  .sns-icon {
    width: 48px;
    height: 48px;
    border-radius: 24px;
    cursor: pointer;
    transition: color 0.2s;
  }
  
  .sns-icon:hover {
    opacity: 0.7;
  }
  
  .signup-text {
    color: #6b7280;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    width: 100%;
  }
  
  .signup-link {
    color: #6B7280;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s;
  }
  
  .signup-link:hover {
    opacity: 0.7;
  }
  
  /* 에러 메시지 */
  .error-message {
    display: none;
    color: #EF4444;
    font-size: 12px;
    margin-top: opx;
    align-items: center;
    gap: 4px;
  }
  
  .error-message.show {
    display: flex;
  }
  
  /* 에러 상태일 때 input 스타일 */
  .input-field.error {
    border-color: #EF4444;
  }
  
  .input-field.error:focus {
    border-color: #EF4444;
  }



  /* ==================== 비밀번호 찾기 스타일 ==================== */
.password-title-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
  }
  
  .password-title {
    color: #030712;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
  }
  
  .password-subtitle {
    color: #6b7280;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    line-height: 20px;
  }


  .back-to-login {
    color: #6b7280;
    text-decoration: underline;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s;
  }
  
  .back-to-login:hover {
    opacity: 0.7;
  }