/*

  사용자 입력

*/

label {
  display: block;
  min-height: 0.85rem;
  line-height: 100%;
  margin-top: 0.45rem;
  margin-bottom: 0.45rem;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--gray4);
}

/* 버튼 */
button,
[type='button'] {
  --button-bg: var(--light2);
  --button-fg: var(--dark3);
  --button-ol: var(--light5);

  --button-hover-bg: var(--light4);
  --button-hover-fg: var(--black);
  --button-hover-ol: var(--black);

  --button-selected-bg: var(--gray3);
  --button-selected-fg: var(--black);
  --button-selected-ol: var(--gray6);

  --button-disabled-bg: var(--light2);
  --button-disabled-fg: var(--gray1);
  --button-disabled-ol: var(--light5);

  display: inline-block;
  padding: 0;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0.625rem;
  height: 2.25rem;
  padding: 0 1rem;
  cursor: pointer;
  font-family: var(--sans-serif);
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  background: var(--button-bg);
  color: var(--button-fg);
  border: solid 0.1rem var(--button-ol);
  transition: background ease-out 0.1s, border-color ease-out 0.1s;
  line-height: 2.05rem;
  transform: translateX(0);
}
button[selected],
[type='button'][selected] {
  background: var(--button-selected-bg);
  color: var(--button-selected-fg);
  border-color: var(--button-selected-ol);
}
button:hover,
[type='button']:hover {
  text-decoration: none !important;
  background: var(--button-hover-bg);
  color: var(--button-hover-fg);
  border-color: var(--button-hover-ol);
}
button:disabled,
button[disabled],
[type='button']:disabled,
[type='button'][disabled] {
  background: var(--button-disabled-bg);
  color: var(--button-disabled-fg);
  border-color: var(--button-disabled-ol);
  cursor: not-allowed;
}
button:focus-visible,
[type='button']:focus-visible {
  outline: solid 0.25rem var(--fgt);
  outline-offset: 0.25rem;
}
button[small],
[type='button'][small] {
  border-radius: 0.5rem;
  height: 1.75rem;
  padding: 0 0.75rem;
  font-size: 0.85rem;
  line-height: 1.55rem;
}
/* 다른 타입의 버튼 */
button[primary],
[type='button'][primary] {
  --button-bg: var(--dark3);
  --button-fg: var(--light1);
  --button-ol: var(--black);

  --button-hover-bg: var(--fg);
  --button-hover-fg: var(--white);
  --button-hover-ol: var(--dark3);
}
button[danger],
[type='button'][danger] {
  --button-bg: var(--red-light);
  --button-fg: var(--red);
  --button-ol: var(--red);

  --button-hover-bg: var(--red);
  --button-hover-fg: var(--light1);
  --button-hover-ol: var(--red);
}
button[invisible],
[type='button'][invisible] {
  --button-bg: transparent;
  --button-fg: var(--fg);
  --button-ol: transparent;

  --button-hover-bg: var(--light3);
  --button-hover-fg: var(--black);
  --button-hover-ol: var(--light3);

  --button-selected-bg: var(--light4);
  --button-selected-fg: var(--black);
  --button-selected-ol: var(--light4);
}

.inputset {
  display: flex;
  justify-content: space-between;
  height: var(--line-height);
}

/* 인풋 */
input[type='text'],
input[type='password'],
input[type='number'],
input[type='email'],
input[type='search'],
input[type='tel'],
input[type='url'] {
  display: block;
  font-family: var(--font-family-input);
  font-size: 0.7rem;
  font-weight: 400;
  width: 100%;
  height: 1rem;
  padding: 0;
  margin: var(--half-line-space) 0;
  outline: none;
  border: none;
  border-bottom: solid 1px var(--fg);
  color: var(--fg);
  background: transparent;
  transition: border-color 0.2s ease-out;
}
input[type='text']:focus,
input[type='password']:focus,
input[type='number']:focus,
input[type='email']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='url']:focus {
  border-color: var(--fgt);
  color: var(--fgt);
}
input[type='text']::placeholder,
input[type='text']::-webkit-input-placeholder,
input[type='password']::placeholder,
input[type='password']::-webkit-input-placeholder,
input[type='number']::placeholder,
input[type='number']::-webkit-input-placeholder,
input[type='email']::placeholder,
input[type='email']::-webkit-input-placeholder,
input[type='search']::placeholder,
input[type='search']::-webkit-input-placeholder,
input[type='tel']::placeholder,
input[type='tel']::-webkit-input-placeholder,
input[type='url']::placeholder,
input[type='url']::-webkit-input-placeholder {
  color: var(--fg);
}
input[type='text']:disabled,
input[type='password']:disabled,
input[type='number']:disabled,
input[type='email']:disabled,
input[type='search']:disabled,
input[type='tel']:disabled,
input[type='url']:disabled {
  color: var(--fg);
  background: var(--gray1);
  border-color: var(--gray2);
}
input[type='text']:disabled::placeholder,
input[type='text']:disabled::-webkit-input-placeholder,
input[type='password']:disabled::placeholder,
input[type='password']:disabled::-webkit-input-placeholder,
input[type='number']:disabled::placeholder,
input[type='number']:disabled::-webkit-input-placeholder,
input[type='email']:disabled::placeholder,
input[type='email']:disabled::-webkit-input-placeholder,
input[type='search']:disabled::placeholder,
input[type='search']:disabled::-webkit-input-placeholder,
input[type='tel']:disabled::placeholder,
input[type='tel']:disabled::-webkit-input-placeholder,
input[type='url']:disabled::placeholder,
input[type='url']:disabled::-webkit-input-placeholder {
  color: var(--gray3);
}
input[type='text']:read-only:focus,
input[type='password']:read-only:focus,
input[type='number']:read-only:focus,
input[type='email']:read-only:focus,
input[type='search']:read-only:focus,
input[type='tel']:read-only:focus,
input[type='url']:read-only:focus {
  border-color: var(--light4);
}
input[type='text']:-webkit-autofill,
input[type='text']:-webkit-autofill:hover,
input[type='text']:-webkit-autofill:focus,
input[type='text']:-webkit-autofill:active,
input[type='password']:-webkit-autofill,
input[type='password']:-webkit-autofill:hover,
input[type='password']:-webkit-autofill:focus,
input[type='password']:-webkit-autofill:active {
  -webkit-background-clip: text;
  -webkit-text-fill-color: var(--fg);
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 20px 20px var(--light2);
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type='number'] {
  appearance: textfield;
  -moz-appearance: textfield;
}

textarea {
  display: block;
  font-family: var(--font-family-input);
  font-size: 1rem;
  line-height: 125%;
  font-weight: 400;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 4.75rem;
  padding: 0.4rem 1rem;
  margin-top: 0.45rem;
  margin-bottom: 0.45rem;
  outline: none;
  border: solid 0.1rem var(--light5);
  border-radius: 0.625rem;
  color: var(--fg);
  background: var(--light2);
  transition: border-color 0.2s ease-out;
  resize: none;
}
textarea:focus {
  border-color: var(--black);
}

input[type='date'],
input[type='datetime-local'] {
  display: block;
  font-family: var(--font-family-input);
  font-size: 1rem;
  font-weight: 400;
  width: 100%;
  height: 2.25rem;
  line-height: 1.9rem;
  padding: 0 1rem;
  margin-top: 0.45rem;
  margin-bottom: 0.45rem;
  outline: none;
  border: solid 0.1rem var(--light5);
  border-radius: 0.625rem;
  color: var(--fg);
  background: var(--light2);
  transition: border-color 0.2s ease-out;
  appearance: none;
  -webkit-appearance: none;
  -webkit-min-logical-width: 100%;
}
input[type='date']:focus,
input[type='datetime-local']:focus {
  border-color: var(--black);
}