@import '../../common/modern-reset.css';
@import '../../common/login-theme.css';
@import '../../common/a11y.css';
@import '../../common/base.css';

@import '/src/ui/components/logo/logo.css';
@import '/src/ui/components/input/input.css';
@import '/src/ui/components/checkbox/checkbox.css';
@import '/src/ui/components/text-link/text-link.css';
@import '/src/ui/components/switch/switch.css';
@import '/src/ui/components/button/button.css';

.container {
  padding: 0 var(--spacing-4);
}

/* 헤더 */
.login-header {
  padding: 4.375rem 0 2.8125rem;

  @media (min-width: 768px) {
    padding: 6.25rem 0 3.125rem;
  }

  .logo {
    margin: 0 auto;
  }

  /* logo 크기 수정 - 화면이 커지면 로고 이미지도 커지도록 */
  .logo {
    margin: 0 auto;

    @media (max-width: 48rem) {
      width: 11.25rem;
      inline-size: 11.25rem;
    }
  }
}

/* 로그인 폼 */
.login-form {
  display: flex;
  flex-flow: column nowrap;
  row-gap: var(--spacing-5);

  fieldset {
    display: contents;
  }

  .checkbox-wrapper {
    /* checkbox-wrapper를 로그인 버튼 아래로 이동 */
    order: 1;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;

    .text-link {
      margin-left: auto;
      margin-inline-start: auto;
    }
  }

  .button {
    /* button 위에 마진 추가 */
    margin-top: var(--spacing-3);
    margin-block-start: var(--spacing-3);

    height: 3.75rem;
    block-size: 3.75rem;

    &:focus-visible {
      box-shadow: 0 0 0 1px var(--red-500);
    }
  }
}