/* color */
:root {
  --color-blue-100: #3692FF;
  --color-blue-200: #1967D6;
  --color-blue-300: #1251AA;

  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;

  --color-error: #F74747;
}


/* font style class */
html {
  font-family: 'Pretendard';
  color: var(--color-gray-700);
  word-break: keep-all;
}
.f-heading {
  font-size: 4rem;
  font-weight: 700;
  line-height: 140%;
}
.f-paragraph {
  font-size: 2.4rem;
  font-weight: 500;
}
.f-regular {
  font-size: 1.6rem;
  font-weight: 400;
}


/* buttons */
button {
  background: var(--color-blue-100);
  color: var(--color-gray-50);
  font-weight: 600;
  text-align: center;
  border: none;
}
button:hover {
  background: var(--color-blue-200);
  cursor: pointer;
}
button:active {
  background: var(--color-blue-300);
}
button.inactive {
  background: var(--color-gray-400);
  pointer-events: none;
  cursor: default;
}
button.large {
  width: 100%;
  height: 5.6rem;
  font-size: 2rem;
  border-radius: 4rem;
}
button.small {
  width: 12.8rem;
  height: 4.8rem;
  font-size: 1.6rem;
  border-radius: .8rem;
}

/* images */
img {
  width: 100%;
}