/* BASIC css start */
/* ============================================================
   THELAB CHEMICAL 로그인 (미니멀 톤)
============================================================ */
#loginWrap,
#loginWrap * { box-sizing: border-box; }

#loginWrap {
  --navy: #0C025B;
  --navy-hover: #090146;
  --text: #111827;
  --text-sub: #6b7280;
  --text-muted: #9ca3af;
  --border: #e5e7eb;
  --border-strong: #d1d5db;
  --bg: #fafbfc;
  width: 100%;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: var(--text);
}

/* 페이지 배경 */
#loginWrap .page-body {
  width: 100%;
  min-height: 540px;
  padding: 56px 20px 96px !important;
  background: var(--bg);
}

/* 페이지 타이틀 (작게) */
#loginWrap .tit-page {
  max-width: 420px;
  margin: 0 auto 28px;
  padding: 0;
  border: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

/* 카드 */
#loginWrap .mlog-sign.login-simple {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: block;
}

#loginWrap .login-simple .mlog {
  width: 100%;
  padding: 40px 36px 32px !important;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: none;
}

/* 제목 */
#loginWrap .login-simple .mlog h3 {
  margin: 0 0 8px;
  padding: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  text-align: left;
  letter-spacing: -0.03em;
}

/* 안내문 (한 줄) */
#loginWrap .login-simple .login-guide {
  margin: 0 0 28px;
  padding: 0;
  background: transparent;
  border: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-sub);
  text-align: left;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

#loginWrap .login-simple .login-guide strong {
  display: inline;
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/* 폼 기본 */
#loginWrap .login-simple fieldset { margin: 0; padding: 0; border: 0; }
#loginWrap .login-simple legend { display: none; }

/* 입력 리스트 */
#loginWrap .login-simple .frm-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

#loginWrap .login-simple .frm-list li {
  position: relative;
  margin: 0 0 14px;
  padding: 0;
}

/* 라벨 (input 위) */
#loginWrap .login-simple .frm-list li label {
  position: static;
  display: block;
  transform: none;
  margin: 0 0 6px;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-sub);
  letter-spacing: -0.01em;
  cursor: default;
  z-index: auto;
}

/* 입력창 */
#loginWrap .login-simple .frm-list li input {
  display: block;
  width: 100% !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--text) !important;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500;
  line-height: 48px !important;
  outline: none;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

#loginWrap .login-simple .frm-list li input:focus {
  border-color: var(--navy) !important;
  box-shadow: 0 0 0 3px rgba(12, 2, 91, .08);
}

#loginWrap .login-simple .frm-list li input:-webkit-autofill,
#loginWrap .login-simple .frm-list li input:-webkit-autofill:hover,
#loginWrap .login-simple .frm-list li input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* 안내문 내부 링크 */
#loginWrap .login-simple .login-guide a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#loginWrap .login-simple .login-guide a:hover {
  color: var(--navy-hover);
}

/* 보안접속 */
#loginWrap .login-simple .se-log {
  margin: 14px 0 22px !important;
  padding: 0;
  text-align: left;
}

#loginWrap .login-simple .se-log label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-sub);
  cursor: pointer;
}

#loginWrap .login-simple .se-log input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--navy);
  cursor: pointer;
}

/* 로그인 버튼 */
#loginWrap .login-simple .btn-mlog { margin: 0; padding: 0; }

#loginWrap .login-simple .btn-mlog a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0;
  background: var(--navy) !important;
  border: 1px solid var(--navy) !important;
  border-radius: 8px;
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: background .15s ease, border-color .15s ease;
}

#loginWrap .login-simple .btn-mlog a:hover {
  background: var(--navy-hover) !important;
  border-color: var(--navy-hover) !important;
}

/* 링크 */
#loginWrap .login-simple .login-links {
  margin: 22px 0 0;
  padding: 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

#loginWrap .login-simple .login-links a {
  color: var(--text-sub);
  text-decoration: none;
  font-weight: 500;
}

#loginWrap .login-simple .login-links a:hover { color: var(--navy); }

#loginWrap .login-simple .login-links span {
  margin: 0 8px;
  color: var(--border-strong);
}

/* ============================================================
   SNS 영역 (자체 디자인) — 강화판
============================================================ */
#simpleLogin {
  width: 100%;
  max-width: 420px;
  margin: 24px auto 0 !important;
  padding: 0;
}

/* 구분선 */
#simpleLogin .sns-divider {
  position: relative;
  margin: 0 0 16px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: -0.01em;
}
#simpleLogin .sns-divider::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 100%; height: 1px;
  background: var(--border);
  z-index: 0;
}
#simpleLogin .sns-divider span {
  position: relative;
  display: inline-block;
  padding: 0 12px;
  background: var(--bg);
  z-index: 1;
}

/* 컨테이너 */
#simpleLogin .sns-login {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* SNS 버튼 — flex 끔, 텍스트 정렬 방식 사용 */
#simpleLogin .sns-btn {
  display: block !important;
  position: relative;
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 46px;
  color: var(--text);
  text-align: center;
  text-decoration: none;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity .15s ease, background .15s ease, border-color .15s ease;
}
#simpleLogin .sns-btn:hover { opacity: .92; }

/* 버튼 안의 모든 직계 자식 기본 숨김 */
#simpleLogin .sns-btn > * {
  display: none !important;
}

/* 우리가 넣은 SVG와 텍스트만 보이게 */
#simpleLogin .sns-btn > .sns-ico {
  display: inline-block !important;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin: -2px 8px 0 0;
}
#simpleLogin .sns-btn > .sns-txt {
  display: inline !important;
  vertical-align: middle;
}

/* 컬러 변형 */
#simpleLogin .sns-kakao {
  background: #FEE500;
  border-color: #FEE500;
  color: #191600;
}
#simpleLogin .sns-kakao .sns-ico path { fill: #191600; }

#simpleLogin .sns-naver {
  background: #03C75A;
  border-color: #03C75A;
  color: #fff;
}
#simpleLogin .sns-naver .sns-ico path { fill: #fff; }

#simpleLogin .sns-facebook {
  background: #fff;
  border-color: var(--border);
  color: var(--text);
}
#simpleLogin .sns-facebook .sns-ico path { fill: #1877F2; }
#simpleLogin .sns-facebook:hover {
  border-color: var(--border-strong);
  background: #fafafa;
  opacity: 1;
}

#simpleLogin .sns-apple {
  background: #000;
  border-color: #000;
  color: #fff;
}
#simpleLogin .sns-apple .sns-ico path { fill: #fff; }

/* ============================================================
   모바일
============================================================ */
@media (max-width: 767px) {
  #loginWrap .page-body {
    padding: 36px 16px 64px !important;
    background: #fff;
  }

  #loginWrap .tit-page {
    margin-bottom: 22px;
    font-size: 12px;
  }

  #loginWrap .login-simple .mlog {
    padding: 30px 22px 26px !important;
    border-radius: 10px;
  }

  #loginWrap .login-simple .mlog h3 { font-size: 20px; }

  #loginWrap .login-simple .login-guide {
    margin-bottom: 24px;
    font-size: 12.5px;
  }

  #loginWrap .login-simple .frm-list li input {
    height: 46px !important;
    font-size: 15px !important;
    line-height: 46px !important;
  }

  #loginWrap .login-simple .btn-mlog a {
    height: 48px;
    font-size: 14.5px;
  }

  #simpleLogin .sns-divider span { background: #fff; }

  #simpleLogin .sns-btn {
    height: 44px;
    font-size: 13.5px;
  }
}

@media (max-width: 420px) {
  #loginWrap .login-simple .mlog { padding: 28px 18px 24px !important; }
  #loginWrap .login-simple .login-links span { margin: 0 6px; }
}
/* BASIC css end */