:root {
  --bgColor: #f9f9f9;
  --bgColorCard: #ffffff;
  --bgMenuOpen: white;
  --borderColor: #ededed;
  --textColor: #1d1d1f;
  --textColorSecondary: #646464;
  --textColorHard: black;
  --primaryColor: #1c3966;
  --errorColor: #d32f2f;
}

html.isDark:root {
  --bgColor: #1f1f1f;
  --bgColorCard: #252526;
  --bgMenuOpen: black;
  --borderColor: #424242;
  --textColor: #f5f5f5;
  --textColorSecondary: #99999c;
  --textColorHard: white;
  --primaryColor: #8cabd9;
  --errorColor: #cf6679;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

* {
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, AppleSDGothicNeo, "맑은 고딕", sans-serif;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: border-box;
}

input, input:before, input:after {
  -webkit-user-select: initial;
  -moz-user-select: initial;
  -ms-user-select: initial;
  user-select: initial;
}

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

body {
  background-color: var(--bgColor);
  color: var(--textColor);
  text-align: center;
  margin: 0;
  padding: 0;
}

p {
  text-align: justify;
}

a {
  text-decoration: none;
  color: var(--primaryColor);
}

.b {
  fill: var(--textColor);
}

.c {
  fill: var(--textColorSecondary);
}

.text-button {
  background: none;
  border: none;
}

.text-button:hover {
  text-decoration: underline;
  cursor: pointer;
}

.text-secondary {
  color: var(--textColorSecondary);
}

.margin-bottom {
  margin-bottom: 16px;
}


#main-wrapper {
  display: flex;
  width: 100vw;
  height: 100vh;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}

#sign-form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: center;
  width: 400px;
  height: 640px;
  padding: 4rem 3rem;
  margin: 0 auto;
  overflow: hidden;
}

#sign-form svg {
  width: 100%;
  height: 80px;
  fill: #d32f2f;
}

#signForm form {
  margin: 0;
}

.input-field, .submit-button {
  width: 100%;
  font-size: 1rem;
  line-height: 1em;
  background: none;
  color: var(--textColor);
  border: 0;
  margin-bottom: 1rem;
}

.input-field {
  height: 3rem;
  padding: 0 1rem;
  outline: none;
}

.submit-button {
  display: block;
  padding: 1rem;
}

.input-field {
  border-bottom: 2px solid var(--borderColor);
}

.input-field:focus{
  border-bottom: 2px solid var(--primaryColor);
}

.input-field::placeholder {
  color: var(--textColorSecondary);
}

.input-field:focus::placeholder {
  color: var(--primaryColor);
}

.error {
  color: var(--errorColor);
  font-size: 0.75rem;
  text-align: justify;
}

#form-menu {
  display: flex;
  justify-content: flex-end;
  align-content: center;
}

#dmmb {
  display: inline-block;
  margin-bottom: 16px;
}

.isDark .light-to-dark,
html:not(.isDark) .dark-to-light {
  display: none;
}

.text-submit-button {
  margin-top: 32px;
  font-size: 1rem;
  color: var(--textColor);
}

.submit-button {
  cursor: pointer;
  /* font-weight: bold; */
  color: white;
  margin-top: 2rem;
  border-radius: 3rem;
  background: #d32f2f;
  -webkit-transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
  -moz-transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
  -ms-transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
  -o-transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.submit-button:hover {
  -webkit-transform: scale(1.02);
  -moz-transform: scale(1.02);
  -ms-transform: scale(1.02);
  -o-transform: scale(1.02);
  transform: scale(1.02);
}

#agree-text, #short-notice {
  color: var(--textColorSecondary);
  font-size: 0.75rem;
}

#agree-text {
  text-align: justify;
}

#short-notice {
  text-align: justify;
}

@media only screen and (min-width: 700px) {
  .card {
    -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    -ms-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    -o-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    background-color: var(--bgColorCard);
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
  }
  
  #sign-form {
    padding: 4rem;
  }
}