/* ========================================
   Mobile / Responsive Styles
   ======================================== */

/* 태블릿 (1024px 이하) */
@media (max-width: 1024px) {
  :root {
    --sidebar-width: 180px;
    --sidebar-right-width: 140px;
  }

  #hd_wrapper {
    flex-wrap: wrap;
  }

  #gnb ul {
    gap: var(--space-3);
  }

  #hd_sch input[type="text"] {
    width: 160px;
  }
}

/* 모바일 (768px 이하) */
@media (max-width: 768px) {
  /* 레이아웃 변경: 1단 */
  #wrapper,
  #main {
    flex-direction: column;
  }

  #aside_left,
  #aside_right,
  #main_aside_left,
  #main_aside_right {
    width: 100%;
    order: 2;
  }

  #container,
  #main_content {
    order: 1;
  }

  /* 헤더 */
  #hd_wrapper {
    padding: var(--space-2) var(--space-3);
  }

  #logo img {
    height: 32px;
  }

  /* 메뉴 숨김 */
  #gnb {
    display: none;
  }

  /* 모바일 메뉴 버튼 표시 */
  .mobile_menu_btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    gap: 4px;
  }

  .mobile_menu_btn span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-text);
  }

  /* 검색 */
  #hd_sch {
    width: 100%;
    order: 10;
    margin-top: var(--space-2);
  }

  #hd_sch input[type="text"] {
    flex: 1;
    width: auto;
  }

  /* 로그인 버튼 */
  .hd_login {
    font-size: var(--font-size-xs);
    gap: var(--space-2);
  }

  /* 테이블 */
  .tbl_head01 th:nth-child(1),
  .tbl_head01 td:nth-child(1) {
    display: none; /* 번호 숨김 */
  }

  .tbl_head01 .td_date,
  .tbl_head01 .td_num {
    display: none;
  }

  /* 푸터 */
  #ft_wrapper {
    padding: var(--space-4);
  }

  /* Top 버튼 */
  #top_btn {
    width: 40px;
    height: 40px;
    bottom: var(--space-4);
    right: var(--space-4);
  }
}

/* 작은 모바일 (480px 이하) */
@media (max-width: 480px) {
  :root {
    --font-size-base: 14px;
  }

  #hd_wrapper {
    padding: var(--space-1) var(--space-2);
  }

  #logo img {
    height: 28px;
  }

  .btn {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
  }

  #wrapper,
  #main {
    padding: var(--space-2);
  }
}