#login {
  margin-top: 13.6rem;

  .main {
    .login {
      display: flex;
      justify-content: center;
      width: 100%;

      .login__wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 48rem;
        width: 100%;
        padding-inline: var(--spacing-xl);
        margin-top: var(--spacing-2xl);

        .login__error-msg {
          display: block;
          padding-bottom: var(--spacing-lg);
          color: var(--color-warning);
          font-size: var(--font-label-small-size);
          font-weight: var(--font-label-small-weight);
          line-height: var(--font-label-small-line-height);
          letter-spacing: var(--font-label-small-letter-spacing);
        }

        .login__error-msg--hidden {
          display: none;
        }

        .login__keep-logged-in {
          display: flex;
          justify-content: flex-start;
          width: 100%;
        }

        .login__btn-wrapper {
          position: relative;
          width: 100%;

          .login__btn {
            margin-top: var(--spacing-3xl);
            margin-bottom: var(--spacing-lg);
            width: 100%;
          }

          .recent-pill {
            position: absolute;
            top: calc(var(--spacing-3xl) + 0.6rem);
            right: 0.8rem;

            display: inline-flex;
            align-items: center;
            justify-content: center;

            padding: 1.2rem 1.6rem;
            border-radius: 0.8rem;

            font-size: 1.2rem;
            font-weight: 600;
            line-height: 1;
            white-space: nowrap;

            background: #000;
            color: #fff;

            box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.25);

            animation: fadeInBadge 0.2s ease;
          }

          .recent-pill[hidden] {
            display: none;
          }
        }

        .login__link {
          text-align: center;
          color: var(--color-gray-300);
          font-size: var(--font-label-medium-size);
          font-weight: var(--font-label-medium-weight);
          line-height: var(--font-label-medium-line-height);
          letter-spacing: var(--font-label-medium-letter-spacing);
        }

        .login__join {
          display: flex;
          flex-direction: column;
          gap: var(--spacing-md);
          width: 100%;
          margin-top: var(--spacing-3xl);

          .login__join-btn {
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 4.8rem;
            border: 0.1rem solid var(--color-gray-400);

            position: relative;

            .login__join-btn-text {
              font-size: var(--font-body-large-size);
              font-weight: var(--font-body-large-weight);
              line-height: var(--font-body-large-line-height);
              letter-spacing: var(--font-body-large-letter-spacing);
            }

            .recent-pill {
              position: absolute;
              top: 0.6rem;
              right: 0.8rem;

              display: inline-flex;
              align-items: center;
              justify-content: center;

              padding: 1.2rem 1.6rem;
              border-radius: 0.8rem;

              font-size: 1.2rem;
              font-weight: 600;
              line-height: 1;
              white-space: nowrap;

              background: #000;
              color: #fff;

              box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.25);

              animation: fadeInBadge 0.2s ease;
            }

            .recent-pill[hidden] {
              display: none;
            }
          }

          .login__join-btn--kakao {
            gap: var(--spacing-sm);
            border: none;
            color: #191600;
            background-color: #fee500;

            .kakao-icon {
              width: 3.2rem;
              height: 3.2rem;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 360px) {
  #login {
    .main {
      .login {
        .login__wrapper {
          .login__btn-wrapper {
            .recent-pill {
              font-size: 1rem;
              padding: 0.4rem 0.8rem;
              right: 0.8rem;
            }
          }

          .login__join {
            .login__join-btn {
              .recent-pill {
                font-size: 1rem;
                padding: 0.4rem 0.8rem;
                right: 0.8rem;
              }
            }
          }
        }
      }
    }
  }
}

@keyframes fadeInBadge {
  from {
    opacity: 0;
    transform: translateY(-0.3rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}