/*
 * 로그인 폼 (아이템매니아 스타일 참조)
 */

.login_form {
  width: 400px;
  margin: 0 auto;
  padding: 100px 0 160px;
}

.login_form .g_title {
  font-size: 24px;
  text-align: center;
  color: #505050;
  margin: 0 0 30px;
  font-weight: bold;
}

/* 로그인 폼 */
.login_form .btn_wrap {
  margin-top: 20px;
}

.login_form .btn {
  display: block;
  width: 100%;
  height: 50px;
  margin-bottom: 10px;
  font-size: 17px;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  line-height: 50px;
  box-sizing: border-box;
}

.login_form a.btn {
  line-height: 50px;
}

.login_form .btn_blue {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-base, #159EFD);
  color: #fff;
  font-size: 17px !important;
}

.login_form .btn_blue:hover {
  opacity: 0.9;
}

.login_form .btn_green {
  background-color: #00C73C;
  color: #fff;
}

.login_form .btn_green:hover {
  opacity: 0.9;
}

.login_form .btn_gray {
  background-color: #9F9F9F;
  color: #fff;
}

.btn [class^="icon"] {
  display: inline-block;
  width: 21px;
  height: 21px;
  margin-right: 8px;
  vertical-align: middle;
}

.icon_naver {
  background: #00C73C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23fff' font-size='17' font-weight='bold' font-family='sans-serif'%3EN%3C/text%3E%3C/svg%3E") no-repeat center / 21px 21px;
}

/* 네이버 아이디 로그인 비표시 */
#naver_id_login {
  display: none !important;
}

.input_area {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}

.input_area li {
  margin-bottom: 10px;
}

.input_area .id_save {
  margin-bottom: 30px;
  line-height: 27px;
}

.input_area .g_text,
.input_area .g_password {
  width: 100%;
  height: 50px;
  padding: 0 15px;
  font-size: 16px;
  color: #2e2e2e;
  border-radius: 10px;
  border: 1px solid #c6c6c6;
  outline-color: var(--color-base, #159EFD);
  box-sizing: border-box;
}

.input_area .g_text:focus,
.input_area .g_password:focus {
  border-color: var(--color-base, #159EFD);
}

.input_area .g_checkbox {
  width: 15px;
  height: 15px;
  margin-right: 5px;
  border-radius: 4px;
  vertical-align: middle;
}

.input_area .id_save label {
  cursor: pointer;
  vertical-align: middle;
}

.input_area .error_txt {
  margin: 4px 0 0;
  font-size: 13px;
  color: #da4328;
}

.find_area {
  color: #767676;
  margin-bottom: 50px;
  padding-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 10px;
  /* 고정 헤더/플로팅 UI 등과 겹칠 때 클릭이 먹도록 */
  position: relative;
  z-index: 10;
}

.find_area > a {
  font-size: 14px;
  color: #767676;
  text-decoration: none;
}

.find_area > a:hover {
  text-decoration: underline;
  color: var(--color-base, #159EFD);
}

.find_area > a:not(:last-child)::after {
  content: "|";
  margin-left: 10px;
  color: #c6c6c6;
  pointer-events: none;
}

.find_area > a:last-child {
  margin-left: auto;
  text-align: right;
  font-weight: bold;
  color: var(--color-font, #333);
}

/* 로그인 실패/안내 */
.login_info {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #D7D7D7;
  border-radius: 10px;
  background: #f8f8f8;
}

.login_info .top_txt {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  color: #FF2400;
}

/* 청소년 보호 안내 */
.adult_wrap {
  margin-top: 40px;
  display: flex;
  gap: 20px;
  border-top: 1px solid var(--color-gray3, #ddd);
  padding-top: 40px;
  word-break: keep-all;
  align-items: flex-start;
}

.adult_wrap .icon_19 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  background-color: #e74c3c;
  border-radius: 50%;
}

.adult_wrap > div {
  font-size: 14px;
  color: var(--color-gray8, #636363);
  line-height: 1.5;
}

.adult_wrap a {
  margin-top: 12px;
  display: inline-block;
  border-radius: 5px;
  width: 145px;
  height: 26px;
  background-color: var(--color-gray9, #4f4f4f);
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 26px;
  text-decoration: none;
}

.adult_wrap a:hover {
  background-color: #363636;
  text-decoration: none;
}

.g_finish {
  height: 0;
  overflow: hidden;
}