/* Login page only (scoped) — add responsive behaviors without altering desktop design.
   All rules are under media queries to avoid affecting desktop and other pages. */

@media (max-width: 1024px) {
  .testbed_login {
    min-height: 100dvh;
    display: grid;
    grid-template-rows: 1fr auto; /* content + footer */
    padding: 16px;
    box-sizing: border-box;
  }
  /* 버튼 크기 변화 애니메이션 제거 (배경색만 부드럽게) */
  .testbed_login .testbed_login_btn,
  .testbed_login .testbed_login_btn:hover,
  .testbed_login .testbed_login_btn:focus,
  .testbed_login .testbed_login_btn:active {
    transition: background-color 0.2s ease-in-out;
  }

  .testbed_login_wrap {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
  }

  /* Override fixed 340px width to be fluid on small screens */
  .testbed_login .testbed_login_area {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
  }

  /* Keep logo visually same, just allow shrink */
  .testbed_login .testbed_login_logo {
    max-width: min(320px, 70vw);
    width: 100%;
    height: auto;
  }

  .testbed_login .testbed_login_area {
    display: flex;
    flex-direction: column;
  }

  /* Ensure controls never overflow the viewport width */
  .testbed_login .testbed_login_id,
  .testbed_login .testbed_login_pw {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .testbed_login .testbed_login_sub {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .testbed_login .testbed_footer {
    text-align: center;
  }
}

@media (max-width: 600px) {
  /* 모바일: 데스크톱과 동일 크기 유지 (레이아웃도 동일) */
  .testbed_login {
    min-height: 800px;
    height: 100vh;
    display: block;  /* grid 해제 */
    padding: 0;      /* padding 해제 */
  }
  /* 로고/서브텍스트도 영역과 동일한 폭으로 동작하도록 래퍼에 보정 폭 적용 */
  .testbed_login_wrap {
    width: 340px; /* fallback */
    max-width: none;
    width: min(340px, calc(100vw - 32px));
    margin: 0 auto;
  }
  .testbed_login .testbed_login_area {
    /* Fallback 먼저 지정 후, 초협소 화면 보정: 좌우 16px 안전 여백 포함 */
    width: 340px; /* fallback */
    max-width: none;
    width: min(340px, calc(100vw - 32px));
    gap: 10px;
    padding: 0;
    margin: 0 auto;
  }
  .testbed_login .testbed_login_logo {
    /* 컨테이너 폭에 맞춰 유동적으로 축소, 높이는 최대 100px 유지 */
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 100px;
  }

  /* 버튼도 데스크톱과 동일 폭 유지 */
  .testbed_login .testbed_login_btn {
    /* 컨테이너(.testbed_login_area)의 보정 폭에 맞춰 자동 축소 */
    width: 340px; /* fallback */
    width: min(340px, calc(100vw - 32px));
  }
  /* 입력 필드도 컨테이너 폭에 맞춤 */
  .testbed_login .testbed_login_id,
  .testbed_login .testbed_login_pw {
    width: 100%;
    box-sizing: border-box;
  }
  .testbed_login .testbed_login_sub {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .testbed_login .testbed_login_sub a {
    width: auto; /* 50% 해제, 내용 기반 */
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* 태블릿: 데스크톱과 동일한 폭(340px) 유지, 링크는 가로 배치 유지 */
@media (min-width: 601px) and (max-width: 1024px) {
  /* 데스크톱과 동일한 레이아웃 강제 */
  .testbed_login {
    min-height: 800px;
    height: 100vh;
    display: block;   /* grid 해제 */
    padding: 0;       /* padding 해제 */
  }

  .testbed_login_wrap {
    width: auto;       /* 100%/max-width 해제 */
    max-width: none;
    margin: 0;         /* 절대 중앙 정렬 유지 (기존 style.css) */
  }

  .testbed_login .testbed_login_area {
    width: 340px;
    max-width: 340px;
    padding: 0; /* 데스크톱과 동일 룩 */
    margin: 0 auto;
  }

  /* 버튼은 데스크톱 규칙 유지(340px) */
  .testbed_login .testbed_login_btn {
    width: 340px;
  }

  /* 로고는 데스크톱 속성 유지(높이 기준). 너비 제약 해제 */
  .testbed_login .testbed_login_logo {
    width: auto;
    max-width: none;
    height: 100px;
  }

  /* 링크는 한 줄 유지, 필요 시 글자/패딩 소폭 축소 */
  .testbed_login .testbed_login_sub {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .testbed_login .testbed_login_sub a {
    width: 50%;
    font-size: 13px; /* 약간 축소로 줄바꿈 방지 */
    padding: 10px 0;
  }
}