/* BASIC css start */
/* =============================================
   SHEMEKS 비회원 주문조회
   Compact Version
============================================= */


/* =============================================
   01. 공통 / 기본 설정
============================================= */

#loginWrap,
#loginWrap * {
  box-sizing: border-box;
}

#loginWrap {
  width: 100%;
  max-width: 820px;

  margin: 0 auto;
  padding: 50px 20px 70px;

  color: #333;

  font-size: 13px;
  font-weight: normal;

  font-family:
    "Apple SD Gothic Neo",
    "Noto Sans KR",
    "Malgun Gothic",
    sans-serif !important;
}

#loginWrap * {
  font-family:
    "Apple SD Gothic Neo",
    "Noto Sans KR",
    "Malgun Gothic",
    sans-serif !important;
}


/* 링크 기본값 */

#loginWrap a,
#loginWrap a:link,
#loginWrap a:visited {
  color: #333;
  text-decoration: none;
}


/* =============================================
   02. 페이지 상단
============================================= */

#loginWrap .login-page-header {
  display: flex;
  align-items: center;

  gap: 8px;

  margin: 0 0 12px;
  padding: 0;
}


#loginWrap .login-page-header img {
  display: block;

  width: 20px;
  height: 20px;
}


#loginWrap .brand-name {
  color: #e30025;

  font-size: 13px;
  font-weight: 700;

  line-height: 20px;

  letter-spacing: 1px;
}


/* 페이지 제목 */

#loginWrap .login-page-title {
  margin: 0 0 6px;
  padding: 0;

  color: #111;

  font-size: 23px;
  font-weight: 700;

  line-height: 1.35;

  letter-spacing: -0.03em;
}


/* 페이지 설명 */

#loginWrap .login-page-desc {
  margin: 0 0 18px;
  padding: 0;

  color: #888;

  font-size: 13px;
  font-weight: 500;

  line-height: 1.6;

  letter-spacing: -0.02em;
}


/* 빨간 포인트 라인 */

#loginWrap .login-accent-bar {
  width: 100%;
  height: 2px;

  margin: 0;
  padding: 0;

  background: #e30025;

  border-radius: 2px 2px 0 0;
}


/* =============================================
   03. 주문조회 박스
============================================= */

#loginWrap .guest-order-box {
  width: 100%;

  padding: 42px 0 45px;

  border: 1px solid #e5e5e5;
  border-top: 0;

  border-radius: 0 0 10px 10px;

  background: #fff;
}


/* 실제 폼 폭 */

#loginWrap .guest-order-form {
  width: 100%;
  max-width: 500px;

  margin: 0 auto;
  padding: 0 20px;
}


/* =============================================
   04. 입력 영역
============================================= */

#loginWrap .guest-form-row {
  width: 100%;

  margin: 0 0 20px;
  padding: 0;
}


/* 라벨 */

#loginWrap .guest-form-label,
#loginWrap .guest-form-row > label {
  display: block;

  margin: 0 0 8px;
  padding: 0;

  color: #333;

  font-size: 13px;
  font-weight: 700;

  line-height: 1.4;

  letter-spacing: -0.02em;
}


/* input wrapper */

#loginWrap .guest-input-wrap {
  width: 100%;

  margin: 0;
  padding: 0;
}


/* =============================================
   05. 메이크샵 생성 INPUT
============================================= */

#loginWrap .guest-input-wrap .txt-frm,
#loginWrap .guest-input-wrap input {
  display: block;

  width: 100% !important;
  height: 50px !important;

  margin: 0 !important;
  padding: 0 15px !important;

  box-sizing: border-box !important;

  border: 1px solid #d9dee7 !important;
  border-radius: 8px !important;

  background: #eef3fb !important;

  color: #222 !important;

  font-size: 14px !important;
  font-weight: 500 !important;

  line-height: 50px !important;

  letter-spacing: -0.01em;

  outline: none !important;

  box-shadow: none !important;

  appearance: none;

  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}


/* focus */

#loginWrap .guest-input-wrap .txt-frm:focus,
#loginWrap .guest-input-wrap input:focus {
  border-color: #aeb7c6 !important;

  background: #fff !important;

  color: #111 !important;
}


/* placeholder */

#loginWrap .guest-input-wrap .txt-frm::placeholder,
#loginWrap .guest-input-wrap input::placeholder {
  color: #aaa !important;

  font-weight: 400;

  opacity: 1;
}


/* =============================================
   06. 주문번호 INPUT
============================================= */

#loginWrap .guest-input-wrap .order-num {
  width: 100% !important;

  font-size: 14px !important;

  letter-spacing: 0 !important;
}


#loginWrap #ordernumid {
  width: 100% !important;
  min-width: 0;

  text-overflow: clip;
}


/* =============================================
   07. 주문번호 안내 문구
============================================= */

#loginWrap .guest-form-help {
  margin: 7px 0 0;
  padding: 0;

  color: #999;

  font-size: 13px;
  font-weight: 400;

  line-height: 1.5;

  letter-spacing: -0.02em;
}


/* =============================================
   08. 주문조회 버튼
============================================= */

#loginWrap .guest-order-button-wrap {
  width: 100%;

  margin: 26px 0 0;
  padding: 0;
}


#loginWrap .guest-order-button,
#loginWrap .guest-order-button:link,
#loginWrap .guest-order-button:visited {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;
  height: 54px;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 8px;

  background: #d0d0d0;

  color: #222 !important;

  font-size: 15px;
  font-weight: 700;

  line-height: 1;

  letter-spacing: -0.02em;

  text-align: center;
  text-decoration: none !important;

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}


#loginWrap .guest-order-button:hover {
  background: #c4c4c4;

  color: #111 !important;
}


/* =============================================
   09. 하단 안내
============================================= */

#loginWrap .guest-order-info {
  width: 100%;

  margin: 30px 0 0;
  padding: 22px 0 0;

  border-top: 1px solid #ededed;

  text-align: center;
}


#loginWrap .guest-order-info strong {
  display: block;

  margin: 0 0 5px;
  padding: 0;

  color: #444;

  font-size: 15px;
  font-weight: 700;

  line-height: 1.5;

  letter-spacing: -0.02em;
}


#loginWrap .guest-order-info p {
  margin: 0;
  padding: 0;

  color: #999;

  font-size: 13px;
  font-weight: 400;

  line-height: 1.6;

  letter-spacing: -0.02em;
}


/* =============================================
   10. 기존 메이크샵 스타일 충돌 방지
============================================= */

#loginWrap .guest-order-form label {
  position: static !important;

  width: auto !important;
  height: auto !important;

  cursor: default !important;
}


#loginWrap .guest-order-form .frm-list {
  width: auto !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* 메이크샵 inline width 강제 초기화 */

#loginWrap #orderhname,
#loginWrap #ordernumid {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  height: 50px !important;
}


/* 혹시 이전 로그인 CSS가 남아있을 경우 */

#loginWrap .MS_login_id,
#loginWrap .MS_login_pw {
  width: auto;
}


/* =============================================
   11. 반응형
============================================= */

@media screen and (max-width: 900px) {

  #loginWrap {
    max-width: 100%;

    padding: 40px 20px 60px;
  }

}


@media screen and (max-width: 640px) {

  #loginWrap {
    padding: 35px 15px 50px;
  }


  #loginWrap .login-page-title {
    font-size: 21px;
  }


  #loginWrap .login-page-desc {
    font-size: 12px;
  }


  #loginWrap .guest-order-box {
    padding: 34px 0 38px;
  }


  #loginWrap .guest-order-form {
    padding: 0 15px;
  }


  #loginWrap .guest-input-wrap .txt-frm,
  #loginWrap .guest-input-wrap input,
  #loginWrap #orderhname,
  #loginWrap #ordernumid {
    height: 48px !important;

    padding: 0 14px !important;

    font-size: 13px !important;

    line-height: 48px !important;
  }


  #loginWrap .guest-order-button {
    height: 52px;

    font-size: 14px;
  }

}
/* BASIC css end */