/* Responsive Styles for Login Page */

/* 
  Bootstrap LG 브레이크포인트(992px)를 기준으로 모바일 레이아웃을 적용합니다.
*/
@media (max-width: 991.98px) {
  


  /* --- Hero Section (로그인 페이지 메인 영역) --- */
  
  /* #hero 섹션의 컨텐츠가 화면 중앙에 오도록 하고, 텍스트를 왼쪽 정렬합니다. */
  #hero {
    text-align: left;
    height: auto;
    margin-top: 70px;
    overflow: visible;
  }

  /* 
    [레이아웃 수정]
    HTML의 order 클래스가 모바일에서 이미지를 가장 먼저 그리도록 하므로,
    이미지를 오른쪽으로 float 시키면 뒤따라오는 컨텐츠(로그인폼)가
    자연스럽게 이미지를 감싸며 왼쪽에 배치됩니다.
  */
  #hero .hero-img {
    width: 55%; /* 모바일에서 적절한 이미지 크기 */
    position: absolute;
    top :-10px;
  }

  /* float된 이미지 주변으로 컨텐츠가 흐르도록 컨테이너(form)에 overflow: hidden을 적용합니다. */
  #hero .row .order-2 {
    overflow: visible;
  }

  /* --- 추가 요청사항 --- */

  /* 1. 모바일에서 .row의 컨텐츠를 오른쪽 정렬합니다. */


  /* 2. 모바일에서 footer의 기존 스타일을 초기화합니다. */
  #footer {
    width: 100%;
    background: none;
    padding: 0 0 16px 0;
    font-size: 13px;
    color: inherit;
    /*position: absolute;*/
    bottom: 0;
    box-shadow: 0px 0px 0px 0px;
  }

  #footer .copyright,
  #footer .credits {
      text-align: center;
      /*padding-top: 10px;*/
  }

  /* --- 로그인 폼 테이블 재구성 --- */
  
  /* 
    기존 table 구조는 반응형에 적합하지 않아,
    display: contents를 이용해 table, tbody, tr의 컨테이너 역할을 제거하고
    내부의 td들을 직접 grid로 제어하여 재배치합니다.
  */
  #hero .login-form-wrapper table {
    display: grid;
    grid-template-columns: 1fr; /* 1단 그리드 */
    gap: 5px; /* 각 항목의 간격 15->5*/
  }
  
  #hero .login-form-wrapper tbody,
  #hero .login-form-wrapper tr {
    display: contents; /* 컨테이너 역할 제거 */
  }

  /* 이제 모든 td는 table 그리드의 직계 자식처럼 동작합니다. */
  #hero .login-form-wrapper td {
    width: 100% !important; /* 너비 100% 강제 */
    display: block; /* 블록 요소로 변경 */
    margin-bottom: 9px;
  }
  
  /*
    grid-area를 사용해 각 td의 위치를 명시적으로 지정하여 재배치합니다.
    (기존 HTML 순서: 아이디-label, 비밀번호-label, input-id, input-pwd, button)
  */
  #hero .login-form-wrapper tr:nth-child(1) td:nth-child(1) { grid-area: id-label; }
  #hero .login-form-wrapper tr:nth-child(2) td:nth-child(1) { grid-area: id-input; }
  #hero .login-form-wrapper tr:nth-child(1) td:nth-child(2) { grid-area: pw-label; }
  #hero .login-form-wrapper tr:nth-child(2) td:nth-child(2) { grid-area: pw-input; }
  #hero .login-form-wrapper tr:nth-child(2) td:nth-child(3) { grid-area: button; }

  /* 불필요한 빈 td들을 숨깁니다. */
  #hero .login-form-wrapper tr:nth-child(1) td:nth-child(3),
  #hero .login-form-wrapper tr:nth-child(1) td:nth-child(4),
  #hero .login-form-wrapper tr:nth-child(2) td:nth-child(4) {
    display: none;
  }
  
  /* grid-template-areas로 최종 레이아웃을 정의합니다. */
  #hero .login-form-wrapper table {
    grid-template-areas:
      "id-label"
      "id-input"
      "pw-label"
      "pw-input"
      "button";
    gap: 3px; /* 각 줄의 간격을 재조정 6->3 */
  }

  /* 로그인 버튼 스타일 조정 47->1 */
  #hero .login-form-wrapper .btn-get-started {
    width: 100%;
    padding: 12px 0;
    text-align: center;
    margin-top: 1px;
  }
}