body {
  background-color: var(--color-bg);
  height: 100vh;
}

button {
  color: inherit;
  cursor: pointer;
  transition: all 0.2s;
}

.wrap {
  position: relative;
  min-width: 630px;
}

.login_main {
  padding-bottom: 120px;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
}

.main_background {
  position: relative;
  width: 474px;
  height: auto;
  margin: auto;
  padding-top: 60px;
  border-radius: 8px;
  border: 1px solid #ffffff;
  background-color: #ffffff;
  box-shadow: var(--shadow-bg);
}

.login_img {
  position: absolute;
  width: 222px;
  top: -77px;
  right: -72px;
  z-index: 1;
}

.login_form {
  padding: 0 100px;
  margin-top: 45px;
}

.login_form > div {
  margin-bottom: 14px;
}

.login_button {
  display: block;
  width: 100%;
  padding: 12px 0;
  color: #ffffff;
  font-size: 17px;
  font-weight: 500;
  text-align: center;
  margin-top: 24px;
  background-color: var(--color-point);
  border: 0;
  border-radius: 4px;
  margin-bottom: 4px;
  box-shadow: var(--shadow-btn);
}

.login_button:hover {
  background-color: var(--hover-point);
}

.signup_button {
  display: block;
  width: 100%;
  padding: 12px 0;
  font-size: 17px;
  text-align: center;
  background-color: #ffffff;
  border: 1px solid var(--color-btn-border2);
  border-radius: 4px;
  margin-top: 16px;
  box-shadow: var(--shadow-btn);
}

.signup_button:hover {
  background-color: var(--hover-btn2);
}

.id_search_form {
  background-color: #cedcf2;
  position: relative;
  margin-top: 40px;
  padding-top: 30px;
  padding-bottom: 30px;
  overflow: hidden;
  border-radius: 0 0 8px 8px;
}

.id_search_form > img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 133px;
}

.id_search_txt {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 8px;
  margin-left: 179px;
}

.id_search_button {
  display: block;
  width: 186px;
  padding: 12px 0;
  margin-left: 183px;
  font-size: 17px;
  text-align: center;
  background-color: #ffffff;
  border: 1px solid var(--color-btn-border2);
  border-radius: 4px;
  box-shadow: var(--shadow-btn);
}

.id_search_button:hover {
  background-color: var(--hover-btn2);
}

.signup_form {
  padding-bottom: 60px;
  margin-top: 35px;
}

/* 3d 이미지가 있던 자리 — 인증 코드로 확인된 대상자 상호명이 들어간다 (P15) */
.join_target {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--main-color, #1e6dee);
  margin-top: 8px;
}

.form_title {
  font-size: 26px;
  font-weight: 700;
  text-align: center;
}

.id_result_txt {
  text-align: center;
}

.id_result {
  text-align: center;
  font-size: 22px;
  margin: 30px 0;
}

/* 계정이 여럿일 때 — 파트너·가맹점을 갈라 보여준다 (P22) */
.id_result_list {
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

.id_result_list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--line-color, #e5e8ef);
  border-radius: 8px;
  font-size: 18px;
}

.id_result_list li + li {
  margin-top: 8px;
}

.id_result_role {
  flex: none;
  min-width: 52px;
  font-size: 13px;
  color: var(--sub-text, #8a90a0);
}

/*회원가입 스탭 2 안내 메시지*/
.alert_msg {
  margin-top: 10px;
  color: var(--color-point);
  font-size: 12px;
}
/* ── 좁은 화면 보정 ──────────────────────────────────────────────────
   콘솔 진입 전 화면(로그인·회원가입·인증코드·아이디 찾기) 공용이다 —
   base.html 이 이 파일을 네 화면에 전부 싣는다(이름만 login 이다).

   ★ 디자인을 바꾸는 것이 아니다. 넓은 화면 모양은 그대로 두고,
     반응형 대응이 없어서 화면 밖으로 나가던 것만 안으로 들인다.
     v3 화 디자인이 정해지면 이 블록째로 버린다.

   기준을 630px 로 잡은 것은 .wrap 의 min-width 가 그 값이라 — 그 아래는
   지금도 이미 가로 스크롤이 나던 구간이다. */
@media (max-width: 630px) {
    /* 가로 스크롤의 원인. 여기부터 풀지 않으면 아래 것들이 다 무의미하다 */
    .wrap { min-width: 0; }

    /* 절대배치 + top:20% 를 흐름 배치로 — 세로가 짧은 기기에서 상자가
       화면 밖으로 밀리고 아래 여백을 스크롤로 못 따라간다 */
    .login_main {
        position: static;
        left: auto;
        transform: none;
        margin: 32px auto 48px;
        padding: 0 16px;
    }

    .main_background {
        width: 100%;
        max-width: 474px;
        padding-top: 40px;
    }

    /* 상자 밖으로 72px 걸쳐 있는 장식 이미지 — 좁은 폭에서는 넘치거나 로고를 덮는다.
       줄여서 우겨넣는 대신 감춘다(장식이라 뜻이 사라지지 않는다) */
    .login_img { display: none; }

    /* 좌우 100px 패딩이면 375px 화면에서 폼 안쪽이 175px 만 남는다 */
    .login_form { padding: 0 24px; margin-top: 32px; }

    /* 아이디 찾기 — 왼쪽에 133px 이미지를 깔고 글·버튼을 margin-left 로 밀어둔 구조라
       좁아지면 버튼이 화면을 넘는다. 이미지를 빼고 가운데로 세운다 */
    .id_search_form { padding: 24px; }
    .id_search_form > img { display: none; }
    .id_search_txt { margin-left: 0; text-align: center; }
    .id_search_button { width: 100%; margin-left: 0; }
}