/* 1. 기본 리셋 */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 2. 기본 요소 초기화 */
html,
body {
  width: 100%;
  min-height: 100%;
  line-height: 1.5;
  font-family: sans-serif;
  background: #fff;
  color: #000;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 3. 이미지/미디어 */
img,
picture,
video,
canvas,
svg {
  display: block;
  height: auto;
}

/* 4. 폼 요소 */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

/* 5. 버튼/링크 */
button,
[role="button"] {
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}

/* 6. 목록 / 표준 요소 */
ul[class],
ol[class] {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 7. 접근성/기본 포커스 */
:focus-visible {
  outline: 0.125rem solid #0066cc;
  outline-offset: 0.125rem;
}

/* 여기서부터 작성 */

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Header */

.title-header {
  display: flex;
  align-items: center;
  gap: 1.39rem;
  justify-content: center;
  margin-top: 14.438rem;
}

.title-header p {
  color: var(--primary-100);
  font-family: var(--rokaf);
  font-weight: 700;
  line-height: 100%;
  font-size: 4.146rem;
}

/* main  */

/* login container */

.login-container {
  display: flex;
  flex-direction: column;
  margin-top: 2.5rem;
  justify-content: start;
  align-items: start;
  gap: 1.5rem;
}

.inner-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* pwd */

.auth-label {
  color: var(--gray-800);
  font-family: var(--font-pretendard);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.625rem;
}

.auth-input {
  padding: 0.938rem 1.5rem;
  border-radius: 0.75rem;
  background-color: var(--gray-100);
  width: 40rem;
  height: 3.375rem;
  color: var(--gray-800);
  font-family: var(--font-pretendard);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.625rem;
}

.pwd-input {
  position: relative;
}

.pwd-toggle-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
}

.auth-input:focus {
  outline: none;
  border: 1px solid var(--primary-100);
  color: var(--gray-800);
  font-family: var(--font-pretendard);
  font-weight: 400;
  font-size: 1rem;
}

/* 닉네임 */

/* 로그인 버튼 */

.login-btn {
  border-radius: 2.5rem;
  width: 40rem;
  height: 3.5rem;
  font-family: var(--font-pretendard);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 2rem;
  color: var(--gray-100);
  background-color: var(--gray-400);
}

/* 회원가입 버튼 */
.register-btn {
  border-radius: 2.5rem;
  width: 40rem;
  height: 3.5rem;
  font-family: var(--font-pretendard);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5rem;
  color: white;
  background-color: var(--gray-400);
}

/* 소셜 로그인 */
.sns-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-radius: 0.5rem;
  gap: 0.625rem;
  width: 40rem;
  height: 4.625rem;
  padding: 1rem 1.438rem;
  background-color: var(--sns-background-color);
}

.sns-container p {
  color: var(--gray-800);
  font-family: var(--font-pretendard);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.625rem;
}

.sns-icons {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

/* 회원가입 */

.auth-container {
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  font-family: var(--font-pretendard);
  font-weight: 500;
  font-size: 0.875rem;
  gap: 0.25rem;
}

.auth-container p {
  color: var(--gray-800);
  line-height: 1.5rem;
}

.auth-container a {
  text-decoration: underline;
  color: var(--primary-100);
}