@charset "UTF-8";
/**************************************
 * login.css
 * Login styles
 * 2025/12 By "PARK EUN HEE"
/**************************************/

.login-box {
  width: 360px;
  display: flex;
  flex-direction: column;
  margin: auto;
  justify-content: center;
  padding: 20px 0;
}

.box-body {
  padding: 72px 36px 36px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

@media all and (max-width: 799px) {
  .login-box {
    background: #fff;
    width: 100%;
    margin: unset;
    min-height: 100dvh;
  }
  .box-body {
    box-shadow: none;
    max-width: 360px;
    margin: 0 auto;
  }
}

.box-body h1 {
  font-size: 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-bottom: 36px;
}

.box-footer {
  padding: 10px 0 20px;
  margin-top: 8px;
  text-align: center;
}

.box-footer .list-inline {
  justify-content: center;
  font-size: 12px;
}

.box-footer .list-inline a {
  color: #6c7883;
}

.box-footer .list-inline li::before {
  background: #6c7883;
}

/* switch */
.login-radio-switch {
  display: inline-flex;
  background-color: #eceff1;
  border-radius: 8px;
  height: 48px;
  position: relative;
  width: 260px;
  overflow: hidden;
  margin: 0 auto 36px;
}

.login-radio-switch .radio-item {
  position: relative;
  flex: 1 1 50%;
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
  width: auto;
}

.login-radio-switch .radio-item input[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  margin: 0px;
  padding: 0px;
  z-index: 1;
}

.login-radio-switch .radio-item label {
  position: relative;
  font-weight: 700;
  z-index: 1;
  font-size: 16px;
  color: #adb9c2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  transition: 0.1s;
  padding: 0 20px;
  white-space: nowrap;
}

.login-radio-switch input[type='radio']:not(:disabled) ~ label {
  cursor: pointer;
}

.login-radio-switch input[type='radio']:checked:not(:disabled) ~ label {
  background: #fff;
  color: var(--color-primary);
}

.login-radio-switch .marker {
  position: absolute;
  width: 0;
  left: 0;
  height: 4px;
  border: 1px solid transparent;
  border-radius: 8px;
  height: 100%;
  z-index: 2;
  transition: none;
  border: 1px solid var(--color-primary);
}

.login-radio-switch .marker.ani {
  transition: 0.2s;
  border: 1px solid var(--color-primary);
}
.login-radio-switch .marker:not(.ani) ~ .radio-item input[type='radio']:checked ~ label {
  border: 1px solid var(--color-primary);
  border-radius: var(--component-md-radius);
}

.login-radio-switch .marker.ani.fadeOut {
  opacity: 0;
  z-index: 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login-form .select {
  margin-bottom: 10px;
  align-self: center;
}

.login-form .select .ui-selectmenu-button-open .ui-selectmenu-text {
  color: var(--color-primary);
}

.login-form .select .ui-selectmenu-icon.ui-icon {
  width: 36px;
  background: url('../images/icon/ico_select_drop.svg') no-repeat center;
}

.login-form .select .ui-selectmenu-button-open .ui-selectmenu-icon {
  background: url('../images/icon/ico_select_drop_on.svg') no-repeat center;
}

.login-form .input,
.login-form .input-password {
  width: 100%;
  font-size: 16px;
}

.login-form .input,
.login-form .input-password .input {
  padding-left: 16px;
}

.login-form .btn {
  margin-top: 10px;
}

.login-links {
  border-top: 1px solid #6c7883;
  margin-top: 36px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
}

.login-links a {
  color: #6c7883;
  font-weight: 500;
}