/* BASIC css start */
/* ============================================================
   THE LAB CHEMICAL — 로그인 / 회원 공통 CSS
   통합 파일: 회원로그인 · 구매시로그인 · 주문조회로그인
            · ID/PW 찾기 · 찾기 결과 · 비회원 중복조회
   ※ 기존 각 페이지별 CSS 파일 전부 이 파일로 대체
============================================================ */


/* ════════════════════════════════════════
   공통 — 페이지 타이틀
════════════════════════════════════════ */
.tit-page {
  padding: 48px 0 20px;
  font-size: 22px; font-weight: 900;
  color: var(--navy);
  letter-spacing: -.02em;
}


/* ════════════════════════════════════════
   로그인 공통 래퍼
   #loginWrap — 회원로그인 · 구매시로그인 · 주문조회로그인
════════════════════════════════════════ */
#loginWrap {
  padding-bottom: 60px;
}

/* ── 로그인 + 회원가입 2단 ── */
#loginWrap .mlog-sign {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 16px rgba(12,2,91,.05);
}

/* 왼쪽: 회원 로그인 폼 */
#loginWrap .mlog-sign .mlog {
  flex: 1;
  padding: 40px 48px;
  border-right: 1px solid var(--border);
}

/* 오른쪽: 회원가입 · 비회원 안내 */
#loginWrap .mlog-sign .sign {
  flex: 1;
  padding: 40px 48px;
  background: var(--bg-soft);
}

/* 섹션 제목 */
#loginWrap .mlog-sign h3 {
  font-size: 18px; font-weight: 800;
  color: var(--navy);
  margin-bottom: 8px;
}

/* 안내 문구 */
#loginWrap .mlog-sign .mlog > p {
  font-size: 13px; color: var(--text-muted);
  line-height: 1.6; margin-bottom: 24px;
}


/* ── 폼 리스트 (ID · PW 입력) ── */
#loginWrap .frm-list {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 16px;
}

#loginWrap .frm-list li {
  position: relative;
}

#loginWrap .frm-list li label {
  display: block;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; color: var(--text-muted);
  margin-bottom: 5px;
}

#loginWrap .frm-list li input,
#loginWrap .frm-list li .txt-frm {
  width: 100%; height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px; font-family: var(--font);
  color: var(--text); background: #fff;
  outline: none; !important;
  transition: border-color var(--ease), box-shadow var(--ease);
}

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


/* ── 로그인 버튼 ── */
#loginWrap .btn-mlog {
  margin-bottom: 10px;
}

#loginWrap .btn-mlog a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 52px;
  font-size: 15px; font-weight: 800;
  border-radius: var(--radius);
}

/* ── 보안접속 체크박스 ── */
#loginWrap .se-log {
  font-size: 12px; color: var(--text-sub);
}
#loginWrap .se-log label {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer;
}
#loginWrap .se-log input {
  accent-color: var(--navy);
  width: 14px; height: 14px;
}


/* ── 오른쪽: 회원가입 · ID/PW 안내 ── */
#loginWrap .mlog-sign .sign dl {
  padding-top: 24px;
}

#loginWrap .mlog-sign .sign dl:first-child {
  padding-top: 0;
}

#loginWrap .mlog-sign .sign dl dt {
  font-size: 13px; color: var(--text-muted);
  line-height: 1.65; margin-bottom: 14px;
}

#loginWrap .mlog-sign .sign dl dd a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 50px;
  font-size: 14px; font-weight: 700;
  border-radius: var(--radius);
}


/* ── SNS 간편 로그인 ── */
#simpleLogin {
  margin-top: 16px;
  text-align: center;
}

#simpleLogin .sns-login {
  display: flex; justify-content: center;
  gap: 8px; flex-wrap: wrap;
}

#simpleLogin .sns-login a {
  display: block;
  position: relative;
}

#simpleLogin .sns-login a img {
  width: 100%; display: block;
  border-radius: var(--radius);
}


/* ════════════════════════════════════════
   주문조회 로그인 — 비회원 주문조회 섹션
════════════════════════════════════════ */
#loginWrap .order-sp {
  margin-top: 20px;
  padding: 36px 48px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  display: flex; gap: 48px; align-items: flex-start;
  box-shadow: 0 2px 16px rgba(12,2,91,.05);
}

#loginWrap .order-sp .left-tit {
  flex: 0 0 auto; max-width: 280px;
}

#loginWrap .order-sp .left-tit h3 {
  font-size: 18px; font-weight: 800;
  color: var(--navy); margin-bottom: 8px;
}

#loginWrap .order-sp .left-tit p {
  font-size: 13px; color: var(--text-muted); line-height: 1.65;
}

#loginWrap .order-sp .frm-wrap {
  flex: 1;
}

#loginWrap .order-sp .frm-list {
  margin-bottom: 16px;
}

/* 주문번호 입력: placeholder 기반 — label 숨김 */
#loginWrap .order-sp li.order-num label {
  display: none !important;
}

#loginWrap .order-sp .btn-sch {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 52px;
  font-size: 15px; font-weight: 800;
  border-radius: var(--radius);
}


/* ════════════════════════════════════════
   ID / PW 찾기
   #findWrap
════════════════════════════════════════ */
#findWrap {
  padding-bottom: 60px;
}

#findWrap .find-container {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 16px rgba(12,2,91,.05);
}

/* 왼쪽: 아이디 찾기 */
#find_id {
  flex: 1;
  padding: 40px 48px;
  border-right: 1px solid var(--border);
}

/* 오른쪽: 비밀번호 찾기 */
#find_pw {
  flex: 1;
  padding: 40px 48px;
  background: var(--bg-soft);
}

/* 타이틀 */
.find_idpw .tit {
  font-size: 18px; font-weight: 800;
  color: var(--navy); margin-bottom: 10px;
}

.find_idpw .sub-tit {
  font-size: 13px; color: var(--text-muted);
  line-height: 1.65; margin-bottom: 20px;
}

/* 라디오 선택 */
.find_idpw .radio-wrap {
  display: flex; gap: 20px;
  font-size: 13px; color: var(--text);
  margin-bottom: 20px;
}

.find_idpw .radio-wrap label {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer;
}

.find_idpw .radio-wrap input {
  accent-color: var(--navy);
  width: 15px; height: 15px;
}

/* 입력 폼 */
.find_idpw .find-info {}

.find_idpw .frm-list {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 16px;
}

.find_idpw .frm-list li {
  position: relative;
}

.find_idpw .frm-list li label {
  display: block;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; color: var(--text-muted);
  margin-bottom: 5px;
}

.find_idpw .frm-list li input {
  width: 100%; height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px; font-family: var(--font);
  color: var(--text); background: #fff;
  outline: none; !important;
  transition: border-color var(--ease), box-shadow var(--ease);
}

.find_idpw .frm-list li input:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(12,2,91,.07);
}

/* 버튼 영역 */
.find_idpw .btn-area {
  display: flex; flex-direction: column; gap: 8px;
}

.find_idpw .btn-area a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 52px;
  font-size: 15px; font-weight: 800;
  border-radius: var(--radius);
}

/* 본인인증 */
.find_idpw .ipin-confirm {
  margin-top: 20px; padding-top: 20px;
  border-top: 1px solid var(--border);
}

.find_idpw .ipin-confirm dt {
  font-size: 13px; color: var(--text);
  line-height: 1.65; margin-bottom: 16px;
}

.find_idpw .ipin-confirm dd {
  display: flex; gap: 8px; flex-wrap: wrap;
}

.find_idpw .ipin-confirm dd a {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 90px; height: 90px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px; color: var(--text);
  text-align: center; transition: all var(--ease);
}

.find_idpw .ipin-confirm dd a:hover {
  border-color: var(--navy); color: var(--navy);
}

.find_idpw .ipin-confirm dd a img {
  width: 40px; height: 40px; margin-bottom: 6px;
}


/* ════════════════════════════════════════
   ID/PW 찾기 결과
   #findIdPwd_result
════════════════════════════════════════ */
#findIdPwd_result {
  padding-bottom: 60px;
}

#findIdPwd_result .findIdPwd_result {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 60px 48px;
  text-align: center;
  box-shadow: 0 2px 16px rgba(12,2,91,.05);
}

#find_Success {
  margin-bottom: 32px;
}

#find_Success dt {
  font-size: 16px; font-weight: 800;
  color: var(--navy); margin-bottom: 10px;
}

#find_Success dd {
  font-size: 14px; color: var(--text);
  line-height: 1.7;
}

#find_Success p.res_multi {
  font-size: 15px; color: var(--text);
  margin-bottom: 16px;
}

#findIdPwd_result .findIdPwd_result .sub-tit {
  font-size: 13px; color: var(--text-muted);
  line-height: 1.7; margin-bottom: 32px;
}

#findIdPwd_result .btn-area {
  display: flex; justify-content: center;
}

#findIdPwd_result .btn-area a {
  display: flex; align-items: center; justify-content: center;
  min-width: 200px; height: 52px;
  font-size: 15px; font-weight: 800;
  border-radius: var(--radius);
}


/* ════════════════════════════════════════
   비회원 중복 주문조회
   .wrapper (별도 페이지)
════════════════════════════════════════ */
.inquiry-order-wrap {
  max-width: 480px; margin: 0 auto;
  padding: 48px 24px;
}

.inquiry-order-wrap h1 {
  font-size: 20px; font-weight: 900;
  color: var(--navy);
  padding-bottom: 16px;
  border-bottom: 2px solid var(--navy);
  margin-bottom: 20px;
}

.inquiry-order .txt {
  font-size: 13px; color: var(--text-muted);
  line-height: 1.65; margin-bottom: 28px;
}

.inquiry-order .frm dl {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 24px;
}

.inquiry-order .frm dl dt {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; color: var(--text-muted);
  margin-bottom: 4px;
}

.inquiry-order .frm dl dd {
  display: flex; align-items: center; gap: 6px;
}

.inquiry-order .frm dl dd input,
.inquiry-order .frm dl .MS_input_txt {
  height: 48px; padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px; font-family: var(--font);
  color: var(--text); background: #fff;
  outline: none; !important;
  transition: border-color var(--ease), box-shadow var(--ease);
  flex: 1;
}

.inquiry-order .frm dl dd input:focus,
.inquiry-order .frm dl .MS_input_txt:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(12,2,91,.07);
}

.inquiry-order .btn-c {
  text-align: center;
}

.inquiry-order .btn-inquiry {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 160px; height: 52px;
  font-size: 15px; font-weight: 800;
  border-radius: var(--radius);
}


/* ════════════════════════════════════════
   반응형
════════════════════════════════════════ */
@media (max-width: 768px) {
  #loginWrap .mlog-sign {
    flex-direction: column;
  }

  #loginWrap .mlog-sign .mlog {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 28px 24px;
  }

  #loginWrap .mlog-sign .sign {
    padding: 28px 24px;
  }

  #loginWrap .order-sp {
    flex-direction: column;
    padding: 28px 24px;
    gap: 24px;
  }

  #findWrap .find-container {
    flex-direction: column;
  }

  #find_id {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 28px 24px;
  }

  #find_pw {
    padding: 28px 24px;
  }

  #findIdPwd_result .findIdPwd_result {
    padding: 40px 24px;
  }
}
/* BASIC css end */