.n-base-input {
  flex: 1;
}
.n-base-input .n-input-messages {
  color: var(--text-quaternary-color);
}
.n-base-input__details {
  margin-top: var(--spacing-02);
}
.n-base-input--error:not(.n-base-input--disabled) .n-input-messages {
  color: var(--system-error-color);
}
.n-base-input--disabled .n-c-field svg > path {
  fill: var(--icon-disabled-text-color);
}.n-input-label {
  display: inline-flex;
  color: var(--text-tertiary-color);
}
.n-input-label--required::before {
  content: "*";
  color: var(--system-error-color);
  margin-right: var(--spacing-02);
}.n-c-field {
  width: 100%;
  height: var(--input-height-medium);
  display: inline-flex;
  gap: var(--spacing-04);
  padding: 0 var(--spacing-05);
  background-color: var(--background-01-color);
  border-width: 1px;
  border-style: solid;
  border-color: var(--divider-01-color);
  border-radius: var(--radius-04);
  transition: all 0.2s;
  font-family: "Pretendard", sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
.n-c-field input {
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  line-height: inherit;
  flex: 1;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  background: transparent;
  padding: 0;
  cursor: inherit;
  border: none;
  outline: none;
}
.n-c-field input:-webkit-autofill,
.n-c-field input:-webkit-autofill:hover,
.n-c-field input:-webkit-autofill:focus,
.n-c-field input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text-primary-color);
  -webkit-box-shadow: 0 0 0px 1000px var(--background-01-color) inset;
  box-shadow: 0 0 0px 1000px var(--background-01-color) inset;
  transition: background-color 5000s ease-in-out 0s;
}
.n-c-field input:autofill,
.n-c-field input:autofill:hover,
.n-c-field input:autofill:focus,
.n-c-field input:autofill:active {
  -webkit-text-fill-color: var(--text-primary-color);
  -webkit-box-shadow: 0 0 0px 1000px var(--background-01-color) inset;
  box-shadow: 0 0 0px 1000px var(--background-01-color) inset;
  transition: background-color 5000s ease-in-out 0s;
}
.n-c-field,
.n-c-field input {
  color: var(--text-primary-color);
}
.n-c-field::placeholder,
.n-c-field input::placeholder {
  color: var(--text-placeholder-color);
}
.n-c-field:hover:not(.n-c-field--disabled) {
  border-color: var(--icon-theme-color);
}
.n-c-field--focused {
  border-color: var(--icon-theme-color);
}
.n-c-field--disabled {
  background-color: var(--background-02-color);
  border-color: var(--divider-01-color);
  cursor: not-allowed;
}
.n-c-field--disabled:hover {
  border-color: var(--divider-01-color);
}
.n-c-field--disabled,
.n-c-field--disabled input {
  color: var(--text-disabled-color);
}
.n-c-field--disabled::placeholder,
.n-c-field--disabled input::placeholder {
  color: var(--text-disabled-color);
}
.n-c-field--readonly {
  cursor: default;
}
.n-c-field--small {
  height: var(--input-height-small);
  padding: var(--spacing-01) var(--spacing-04);
  border-radius: var(--radius-03);
}
.n-c-field--large {
  height: var(--input-height-large);
  padding: 0 var(--spacing-05);
  font-family: "Pretendard", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}
.n-base-input--error .n-c-field:not(.n-c-field--disabled) {
  border-color: var(--system-error-color);
}
.n-base-input--error .n-c-field:not(.n-c-field--disabled):hover {
  border-color: var(--system-error-color);
}
.n-field__head {
  margin-bottom: var(--spacing-02);
}
.n-field__field {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 0;
  row-gap: var(--spacing-02);
  column-gap: var(--spacing-02);
}
.n-field__prefix {
  display: flex;
  align-items: center;
  pointer-events: none;
}
.n-field__suffix {
  display: flex;
  align-items: center;
  position: relative;
  pointer-events: none;
}