@import url("type-tokens.css?v=2");

@media (hover: hover) and (pointer: fine) {
  #login-submit:hover {
    background-color: var(--secondary-color06);
  }

  #join-submit:hover {
    background-color: var(--secondary-color06);
  }

  .other-links ul a:hover li {
    border: 1px solid var(--grayscale06);
    color: var(--grayscale04);
    background-color: var(--grayscale04);
    color: var(--grayscale08);
    transition: all 0.2s ease-in;
  }
}

label {
  display: inline-flex;
  align-items: center;
  color: var(--grayscale04);
  line-height: 1;
}

input[type="radio"],
input[type="checkbox"] {
  position: absolute;
  left: -9999px;
  /* Move input off-screen to maintain accessibility and touch functionality */;
}

input[type="radio"] + label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

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

.birth-select select {
  background: url("data:image/svg+xml;utf8,<svg fill='gray' height='12' viewBox='0 0 24 24' width='12' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>")
      no-repeat right 10px center;
  background-size: 12px 12px;
  padding-right: 28px;
  background-color: white;
  -webkit-appearance: none;
  appearance: none;
}

input[type="radio"] + label::before,
input[type="checkbox"] + label::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--gray-400);
  border-radius: 50%;
  margin-right: var(--space-4);
  vertical-align: middle;
  line-height: 1;
  transition: all 0.3s;
  background-color: white;
  pointer-events: none;
}

input[type="checkbox"] + label::before {
  border-radius: 3px;
  /* square for checkbox */;
}

input[type="radio"]:checked + label::before {
  background-color: var(--secondary-color05);
  box-shadow: inset 0 0 0 3px white;
  border-color: var(--secondary-color05);
}

input[type="checkbox"]:checked + label::before {
  background-color: var(--secondary-color05);
  border-color: var(--secondary-color05);
  background-image: url("../img/icon_check.svg");
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: center;
}

input[type="radio"]:focus + label::before,
input[type="checkbox"]:focus + label::before {
  outline: 2px solid var(--secondary-color05);
  outline-offset: 2px;
}

main {
  display: flex;
  padding-top: 160px;
  padding-bottom: var(--space-120);
  flex-direction: column;
  align-items: center;
  gap: var(--space-80);
  align-self: stretch;
  flex: 1 0 auto;
  background-color: var(--grayscale09);
}

section {
  display: flex;
  padding: var(--space-20) var(--space-20) var(--space-20) var(--space-20);
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
}

#login-bn-area {
  flex: 0 0 100px;
  width: 100%;
}

#login-area {
  border-radius: var(--radius-large);
  padding: 50px;
  background-color: white;
  width: 100%;
  max-width: 500px;
  box-shadow: 4px 4px 16px var(--grayscale07);
}

#login-logo {
  display: flex;
  max-width: 400px;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

#login-form-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-20);
}

#login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
}

#login-input-text {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-control);
  border: 1px solid var(--grayscale07);
  background: var(--gray-white);
  overflow: hidden;
}

#login-input-text input {
  display: flex;
  width: 100%;
  height: 60px;
  padding: var(--space-16) var(--space-24);
  align-items: center;
  gap: 10px;
  align-self: stretch;
  font-size: var(--type-16, 16px);
  transition: all 0.2s ease-in;
}

#login-input-text input::placeholder {
  color: var(--grayscale06);
}

#login-input-text input:focus,
login-input-text input:active {
  background-color: var(--grayscale08);
}

#login-id {
  border-bottom: 1px solid var(--grayscale07);
}

#auto-login-area {
  display: flex;
  align-self: stretch;
  gap: var(--space-8);
  align-self: flex-end;
}

#auto-login-area label {
  font-size: var(--type-16, 16px);
  color: var(--grayscale05);
}

.login-remember {
  display:flex;
  align-items:center;
  align-self:flex-start;
  gap:9px;
  cursor:pointer;
  color:#405438;
  font-size:14px;
  line-height:1.5;
}

.login-remember input[type="checkbox"] {
  position:static;
  appearance:auto;
  width:17px;
  height:17px;
  margin:0;
  accent-color:#547b45;
}

.login-remember input[type="checkbox"]:focus-visible {
  outline:2px solid #547b45;
  outline-offset:3px;
}

.login-remember input[type="checkbox"]+span {
  display:inline;
}

.login-remember input[type="checkbox"]+span::before {
  content:none;
}

#login-submit {
  display: flex;
  height: 60px;
  padding: 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  align-self: stretch;
  border-radius: var(--radius-control);
  background: var(--grayscale05);
  color: var(--grayscale08);
  font-family: Pretendard;
  font-size: var(--type-16, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  /* 150% */
    transition: all 0.2s ease-in;
}

#login-auth-area {
  display:flex;
  justify-content:center;
  align-items:center;
  align-self:stretch;
  flex-wrap:wrap;
  gap:0;
  margin-top:2px;
}

#login-auth-area a {
  padding:var(--space-8) var(--space-12);
  color:#405438;
  font-size:13px;
  text-decoration:none;
  white-space:nowrap;
}

#login-auth-area a+a {
  border-left:1px solid #cbd5c4;
}

#login-auth-area a:hover {
  text-decoration:underline;
  text-underline-offset:3px;
}

#login-auth-area a:focus-visible {
  outline:2px solid #547b45;
  outline-offset:2px;
  border-radius:var(--radius-small);
}

.other-area {
  padding: 0px 0px 0px 0px;
}

main {
  gap: 60px !important;
}

#join-input-area {
  display: flex;
  width: 100%;
  max-width: 400px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-24);
}

.join-btn:disabled {
  background-color: var(--gray-300);
  color: var(--gray-400);
  cursor: not-allowed;
  border: 1px solid var(--gray-200);
}

#join-input-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
}

#join-input-title hr {
  flex: 1;
  border: none;
  border-top: 1px solid var(--grayscale06);
}

#join-input-title span {
  height: 1px;
  background: var(--grayscale05);
}

#join-form-area {
  display: flex;
  width: 400px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-24);
}

.join-input-row {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.text-input {
  display: flex;
  height: 40px;
  align-items: center;
  gap: var(--space-4);
  align-self: stretch;
}

.text-input input {
  flex: 1;
  width: 100%;
  align-self: stretch;
  border-radius: var(--radius-control);
  padding: var(--space-16) var(--space-16);
  border: 1px solid var(--grayscale07);
  background: var(--gray-white);
  font-size: var(--type-16, 16px);
}

.text-input button {
  display: flex;
  padding: 0px 15px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: var(--radius-control);
  background: var(--GrayScale05, var(--gray-500));
  color: var(--grayscale09);
}

#join-submit {
  display: flex;
  height: 60px;
  padding: 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  align-self: stretch;
  border-radius: var(--radius-control);
  background: var(--grayscale05);
  color: var(--grayscale08);
  font-family: Pretendard;
  font-size: var(--type-16, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  /* 150% */
    transition: all 0.2s ease-in;
}

.terms-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--space-16);
  padding: var(--space-16);
  border: 1px solid var(--grayscale07);
  border-radius: var(--radius-control);
  background: var(--gray-white);
  font-size: var(--type-14, 14px);
}

hr {
  border: none;
  border-top: 1px solid var(--grayscale07);
}

.terms-box label {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--type-16, 16px);
}

.terms-box label a {
  font-weight: 700;
}

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.modal.show {
  display: flex;
  /* shown only when needed */;
}

.modal-content {
  background: var(--gray-white);
  padding: var(--space-24);
  border-radius: var(--radius-control);
  max-width: 500px;
  width: 90%;
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.modal-scroll {
  overflow-y: auto;
  max-height: 60vh;
  padding-top: var(--space-20);
}

.modal-scroll h5 {
  margin-bottom: var(--space-8);
}

.modal-scroll p {
  margin-bottom: var(--space-16);
  font-size: var(--type-16, 16px);
  line-height: 1.5;
}

.modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  font-size: var(--type-18, 18px);
}

body.modal-open {
  overflow: hidden;
}

.birth-select select {
  width: 100%;
  flex: 1;
}

.birth-select {
  display: flex;
  gap: 6px;
}

.join-text-input {
  height: 40px;
  border-radius: var(--radius-control);
  border-color: var(--grayscale07);
  padding: 0 var(--space-8);
  background-color: white;
  color: var(--GrayScale01);
}

#join-form-area.was-validated input.join-text-input.invalid-field,
#join-form-area.was-validated select.join-text-input.invalid-field,
#join-form-area.was-validated textarea.join-text-input.invalid-field {
  border: 1px solid #e74c3c !important;
  background-color: #fff6f6 !important;
}

#join-form-area.was-validated input[type="checkbox"]:invalid + label::before,
#join-form-area.was-validated input[type="radio"]:invalid + label::before {
  border-color: #e74c3c;
  outline: 2px solid #e74c3c;
  outline-offset: 2px;
}

.other-links ul {
  display: flex;
  gap: var(--space-20);
}

.other-links ul a li {
  border: 1px solid var(--grayscale06);
  padding: var(--space-8) var(--space-20);
  border-radius: var(--radius-control);
  color: var(--grayscale04);
}

@media (max-width: 767px) {
  main {
    padding-top: var(--space-120);
    padding-bottom: var(--space-120);
    padding-left: var(--space-16);
    padding-right: var(--space-16);
    gap: 60px;
  }

  section {
    padding: var(--space-20) var(--space-20) var(--space-20) var(--space-20);
    gap: var(--space-40);
  }

  #login-bn-area {
    flex: 0 0 100px;
  }

  #login-area {
    padding: var(--space-40) var(--space-20) var(--space-40) var(--space-20);
  }

  #login-form-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-20);
  }

  #join-form-area {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-24);
  }
}