/* 📱 모바일·태블릿 전용 css 코드  */

@media screen and (max-width: 768px) {
  /* 로그인 페이지 css */

  /* 헤더 부분 (로그인 페이지만 헤더 다름) */

  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
    /* overflow-y: hidden; */
    /* 오른쪽 스크롤 바 숨기기 */
    overflow-x: hidden;
  }

  .header_area {
    height: 80px !important;
    z-index: 1000;
  }

  .login_wrapper {
    padding: 44% 0px;
  }

  .login_box {
    width: 315px;

    gap: 15px;
  }

  .login_brand_img {
    display: flex;
    margin-bottom: 20px;
  }
  /* 타이틀 부분 */
  .login_title {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
  }
  .login_title > h1 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.4px;
    margin: 0px;
  }
  .login_title > h2 {
    font-size: 35px;
    font-weight: 700;
    letter-spacing: -1px;
    margin: 0px;
  }

  .id_box {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .id_input_box {
    margin-bottom: 15px;
  }
  .password_input_box {
    margin-bottom: 15px;
  }

  .login_label {
    font-size: 15px;
    font-weight: 500;

    margin: 0px !important;
  }

  .login_input {
    box-sizing: border-box;

    width: 100%;
    height: 48px;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
    background-color: transparent;
    padding: 0px 12px;

    /* input 속 글자 스타일 */
    color: #333333;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.4px;
  }

  /* 체크박스 부분 */
  .maintain_box {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .find_box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 33px;
  }

  /* 라벨 */
  .maintain_box > span {
    font-size: 15px;
    color: #a0a0a0;
    cursor: pointer;
    font-weight: 500;
  }

  .find_id_pw {
    font-size: 15px;
    color: #a0a0a0;
    cursor: pointer;
  }

  .find_id_pw a {
    text-decoration: none;
    color: inherit !important; /* 기존 스타일 유지 */
  }

  /* 로그인 버튼 부분 */
  .login_btn {
    margin-bottom: 24px;
    width: 100%;
    height: 51px;
    border-radius: 4px;
    border: none;
    background-color: #333333;

    /* 버튼 속 글자 스타일 */
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.4px;
    cursor: pointer;
  }

  .login_btn:hover {
    background-color: #646464;
  }

  /* 사용문의 부분 */
  .login_question {
    font-size: 14px;
    color: #a0a0a0;
    letter-spacing: -0.35px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    margin-top: 4px;
    margin-bottom: 0px;
  }

  /* 로그인 에러 메시지 css */
  .login_error_message {
    font-weight: 500;
    font-size: 16px;
    color: red;
    margin-bottom: 20px;
  }
}

/* ✅ 태블릿 세로(portrait) 전용 — 740~1100px */
@media (min-width: 740px) and (max-width: 1100px) and (orientation: portrait) {
  .header_area {
    height: 80px !important;
    z-index: 1000;
  }

  .login_wrapper {
    padding: 33% 0px;
  }

  .login_box {
    width: 350px;
    gap: 20px;
  }

  .login_brand_img {
    display: flex;
    margin-bottom: 25px;
  }
  /* 타이틀 부분 */
  .login_title {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
  }
  .login_title > h1 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.4px;
    margin: 0px;
  }
  .login_title > h2 {
    font-size: 35px;
    font-weight: 700;
    letter-spacing: -1px;
    margin: 0px;
  }

  .id_box {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .id_input_box {
    margin-bottom: 15px;
  }
  .password_input_box {
    margin-bottom: 15px;
  }

  .login_label {
    font-size: 15px;
    font-weight: 500;

    margin: 0px !important;
  }

  .login_input {
    box-sizing: border-box;

    width: 100%;
    height: 48px;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
    background-color: transparent;
    padding: 0px 12px;

    /* input 속 글자 스타일 */
    color: #333333;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.4px;
  }

  /* 체크박스 부분 */
  .maintain_box {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .find_box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 33px;
  }
}

/* ✅ 태블릿 가로(landscape) 전용 — 740~1100px */
@media (min-width: 740px) and (max-width: 1366px) and (orientation: landscape) {
  .header_area {
    height: 80px !important;
    z-index: 1000;
  }

  .login_wrapper {
    padding: 13% 0px;
  }

  .login_box {
    width: 350px;
    gap: 20px;
  }

  .login_brand_img {
    display: flex;
    margin-bottom: 25px;
  }
  /* 타이틀 부분 */
  .login_title {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
  }
  .login_title > h1 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.4px;
    margin: 0px;
  }
  .login_title > h2 {
    font-size: 35px;
    font-weight: 700;
    letter-spacing: -1px;
    margin: 0px;
  }

  .id_box {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .id_input_box {
    margin-bottom: 15px;
  }
  .password_input_box {
    margin-bottom: 15px;
  }

  .login_label {
    font-size: 15px;
    font-weight: 500;

    margin: 0px !important;
  }

  .login_input {
    box-sizing: border-box;

    width: 100%;
    height: 48px;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
    background-color: transparent;
    padding: 0px 12px;

    /* input 속 글자 스타일 */
    color: #333333;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.4px;
  }

  /* 체크박스 부분 */
  .maintain_box {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .find_box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 33px;
  }
}