body {
    margin: 0;
    font-family: Arial, sans-serif;
  }


    /* _________________________________nav.ejs 메뉴관련 CSS________________________ */
  .nav {
    display: flex;
    justify-content: space-between; /* 좌우 끝으로 배치 */
    padding: 15px;
    align-items: center;
    background : rgb(0, 0, 0);
    color : white; 
    /* word-spacing : 0px; */

  }
  .nav a {
    margin-right: 1px;
    color : white; 
    text-decoration: none; /* 기본 링크 밑줄 제거 (선택 사항) */
  }

  .nav-right span {
    margin-right: 20px;
    color: white;
}
  .nav-right a {
    margin-left: 10px; /* 우측 메뉴 항목 간격 설정 */
    color: white;
    text-decoration: none; /* 기본 링크 밑줄 제거 */
  
}


    /* 모바일 메뉴 아이콘 스타일 */
    .menu-icon {
      display: none;
      font-size: 24px;
      cursor: pointer;
      color: white;
      background: none;
      border: none;
    }

      /* 토글된 메뉴를 감싸는 컨테이너 (모바일 전용) */
      .menu-overlay {
      display: none; /* 기본적으로 안 보이게 */
      position: fixed; 
      top: 0;
      right: 0;
      width: 60%;
      height: 100%;
      background-color: #000000f9; /* 검정색 배경 */
      color: #ffffff;            /* 글씨는 흰색 */
      padding: 1rem 1rem;
      box-sizing: border-box;
      z-index: 999; /* 화면 위로 */
      overflow-y: auto;
    }

    .close-btn-menu{
      color: #ffffff;  
      font-size: 16px; 
      font-weight: 600;    
      display: flex;
      margin-right: auto;

    }

    /* 메뉴가 열렸을 때 보이도록 하는 클래스 */
    .menu-overlay.active {
      display: block;
    }

    .menu-overlay a {
      display: block;
      color: #ffffff;     
      text-decoration: none;
      margin: 1rem 0; /* 링크 간 간격 */
    }

    .user-mobile-menu a{
      display: block;
      color: #ffffff;     
      text-decoration: none;
      margin: 1rem 0; /* 링크 간 간격 */
    }

    /* 로그인 영역만 배경 회색 */
    .login-area {
      background-color: #535353; /* 연한 회색 혹은 원하는 색으로 */
      padding: 1rem 0.5rem ;
      margin-top: 10px;
      margin-bottom: 2rem;
    }

    .login-area a {
      display: flex;
      margin: auto;
      color: #fff;
      text-decoration: none;
      margin: 0 0.5rem;
    }




    /* 모바일 메뉴 스타일 */
    .nav-links {
      display: flex;
    }


  .logo {
    font-weight: bold;
  }

  .menu-user-info {
    margin-left: auto; /* 나머지 항목들을 왼쪽으로 밀기 */
    display: flex;
    align-items: center;

}

  button{
    font-weight: 600;
  }

    /* 데스크톱 / 태블릿 이상일 때 */
    @media(min-width: 768px) {
      .menu-icon {
        display: none; /* 데스크톱에선 숨김 */
      }
      .nav-left, .nav-right {
        display: flex; /* 기본적으로 nav 내 링크들은 inline-flex */
      }
      .menu-overlay {
        display: none !important; /* 데스크톱에서는 절대 안 보이도록 */
      }
    }


  /* 화면이 768px 이하일 때 스타일 변경 */
  @media screen and (max-width: 768px) {
    .nav-left a,
    .nav-right a {
        display: none;
    }
    .menu-icon {
        display: inline;
        margin-left: auto;
    }
    .nav.active .nav-links {
        display: block;
        position: absolute;
        top: 60px;
        left: 0;
        background: rgb(0, 0, 0);
        width: 100%;
        flex-direction: column;
    }
    .nav-links {
        display: none;
        flex-direction: column;
    }
    .nav-links a {
        padding: 15px;
        text-align: center;
    }
  }

    
  @media (max-width: 480px) {

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between; /* 좌우 끝으로 배치 */
      width: 100%;
      padding: 10px;
      gap: 10px !important;
      background : rgb(0, 0, 0);
      color : white; 

      box-sizing: border-box;    
      margin: 0 auto; 

   
      /* word-spacing : 0px; */

    }
      .nav a {
      margin-right: 1px;
      color : white; 
      text-decoration: none; /* 기본 링크 밑줄 제거 (선택 사항) */
    }

      .nav-right span {
      margin-right: 0px;
      color: white;
    }
    .nav-right a {
      margin-left: 10px; /* 우측 메뉴 항목 간격 설정 */
      color: white;
      text-decoration: none; /* 기본 링크 밑줄 제거 */
    }

    .menu-icon {
        display: block;
        justify-content: flex-end;
        font-size: 24px;
        cursor: pointer;
        color: white;
        background: none;
        border: none;
      }
    
  }




    /* _______________________________________nav.ejs 메뉴관련 CSS 끝____________________________________________ */


  /* 로그인 관련 내용 */
.menu-user-info span {
    margin-right: 20px;
    color: white;
    font-size : 14px;
}

.menu-user-info a {
    margin-right: 20px;
    color: white;
    text-decoration: none; /* 기본 링크 밑줄 제거 (선택 사항) */
    font-size : 14px;
}
/* 중앙 컨테이너  */
.central-container{
  display: flex; /* Flexbox 레이아웃을 사용합니다 */
  justify-content: center; /* 수평 중앙 정렬 */
  padding: 0px;
  margin: 20px auto;
  height: flex;
  width: 50%;
  flex-wrap: wrap;
  overflow: hidden;
  position: relative;
  /*box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); 
  transition: all 0.3s ease-in-out; 부드러운 화면 전환 */
  
}
/* 반응형 설정 */
@media (max-width: 768px) {
  .central-container {
    width: 80%; /* 태블릿 화면에서 너비를 80%로 조정 */
    padding: 15px; /* 패딩 줄이기 */
    margin: 15px auto; /* 상하 여백 줄이기 */
  }
}

@media (max-width: 480px) {
  .central-container {
    width: 90%; /* 작은 화면에서는 너비를 90%로 설정 */
    padding: 10px; /* 패딩 최소화 */
    margin: 10px auto; /* 상하 여백 더 줄이기 */
  }

   .nav {
    display: flex;
    justify-content: space-between; /* 좌우 끝으로 배치 */
    padding: 15px;
    align-items: center;
    background : rgb(0, 0, 0);
    color : white; 
    /* word-spacing : 0px; */

  }

}

.form-container{
  display: flex; /* Flexbox 레이아웃을 사용합니다 */
  justify-content: center; /* 수평 중앙 정렬 */
  height: flex;
  width: 100%;
  flex-wrap: wrap;
  overflow: hidden;
  position: relative;
}


  .grey-bg {
    background: #f5f5f5; 
  }
  .white-bg {
    background: white;
    font: black;
    margin: 20px;
    border-radius: 5px;
  }

  .white-bg-mid {
    background: white;
    font: black;
    margin: 20px;
    border-radius: 20px;  
    width: calc(100% - 40px); /* 전체 컨테이너의 너비에 맞추기 위해 여백을 고려한 계산 */
  }

  .white-bg-small{
    background: white;
    font: black;
    margin: 20px;
    border-radius: 5px;
    width: calc(50% - 40px); /* 전체 너비의 절반에서 여백을 고려한 계산 */
    box-sizing: border-box; /* 패딩과 보더를 포함하여 크기 계산 */


  }

  .white-bg-smaller{
    background: white;
    font: black;
    margin: 20px;
    border-radius: 5px;
    width: 20%;
    display: inline-table;
  }

  .list-box {
    padding : 3px;
    border-bottom: 1px solid#f5f5f5; ;
    font-size : 14px;
  }

  .list-box h3{
    font-size: 22px;
    margin: 5px;
  }

  .list-box h4{
    font-size: 18px;
    margin: 5px;
  }

  .list-box h5{
    font-size : 15px;
    padding : 15px;
    border-bottom: 1px solid#f5f5f5; ;
  }

  .list-box p {
    font-size: 14px;
    margin: 5px;
    color: grey;
  }
  
  .list-box a {
    font-size : 14px;
    background: white;
    font: black;
    margin: 10px;
    border-radius: 5px;
    margin-left: 5px;
  }

/* 마이페이지 대시보드 */
  .mypage-dashbox {
    font-size : 14px;
    color: black;
    padding : 6px;
    /* border-bottom: 1px solid#f5f5f5; ; */
    background: white;
    border-radius: 20px;
    margin: 5px;
  }
  .mypage-dashbox a {
    font-size : 14px;
    color: black;
    margin: 0px;
    display : inline-block
  }
  .mypage-dashbox p {
    font-size : 14px;
    background: white;
    color: black;
    margin: 6px;
    border-radius: 5px;
    margin-left: 10px;
    display : inline-block
  }

  .mypage-dashbox h3{
    font-size: 22px;
    margin: 5px;
    margin-left: 10px;
  }
  .mypage-dashbox h4{
    font-size: 18px;
    margin: 5px;
    margin-left: 10px;
  }

  .mypage-dashbox h5{
    font-size : 15px;
    margin: 5px;   
    margin-left: 10px;
  }

  /* 마이페이지 대시보드 끝 */

  input,div {
    box-sizing: border-box;
  }

  input[name="date"] {
  font-family: sans-serif; /* 원하는 폰트로 바꾸세요 */

}

  .login-box {
    background : white;
    padding : 2px;
    margin-top: 20px;
    margin-left: 400px;
    margin-right: 400px;
    border-radius: 8px;
  }
  
  .form-box {
    background : white;
    padding : 40px;
    margin-top: 60px;
    margin-left: 350px;
    margin-right: 350px;
    border-radius: 8px;

  }

  .form-box input {
    font-family: sans-serif; /* 원하는 폰트로 바꾸세요 */
    color: rgb(58, 58, 58);
    padding : 10px;
    font-size: 14px;
    width: 100%;
    border: 1px solid rgb(219, 219, 219);
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 10px;
  }

  /* 드롭다운 메뉴 설정 */
  .form-box select {
    padding: 10px;
    font-size: 14px;
    width: 100%;
    border: 1px solid rgb(219, 219, 219);
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 10px;
    appearance: none; /* 기본 드롭다운 화살표 제거 (선택 사항) */
    background: white; /* 배경색을 설정 */

  }

  .form-box button {
    color: white;
    font-size: 14px;
    font-weight: 700;
    background : #f25555;
    padding-top: 10px;
    padding-bottom: 12px;
    border : none;
    border-radius: 20px;
    margin: auto;
    display: block;
    white-space: nowrap; /* 텍스트가 한 줄에 표시되도록 설정 */
    width: 100%; /* 버튼이 창 너비의 80%를 차지하도록 설정 */
    /* max-width: 1000px; 최대 너비를 설정하여 너무 커지지 않도록 제한 */
  }

  .form-box button:hover{
    background-color: rgb(215, 25, 25);   
  }

  .detail-bg {
    background: white;
    padding: 15px;
    margin-top: 10px;
  }

  a {
  text-decoration: none;
  margin-left: 20px;
  color: rgb(0, 0, 0);
}


.button {
  color: rgb(255, 255, 255);
  font-size :14px;
  text-align: center;
  padding-top: 12px;
  padding-bottom: 12px;
  border : none;
  background : rgb(0, 0, 0);
  border-radius: 20px;
  margin: auto;
  display: block;
  white-space: nowrap; /* 텍스트가 한 줄에 표시되도록 설정 */
  width: 100%; /* 버튼이 창 너비의 80%를 차지하도록 설정 */
  /* max-width: 760px; 최대 너비를 설정하여 너무 커지지 않도록 제한 */
}


.small-icon {
  width: 16px;
  height: auto;
  vertical-align: middle;
  margin-right: 5px; /* 아이콘과 텍스트 사이 간격 */
}

.mid-icon {
  width: 40px;
  height: auto;
  vertical-align: middle;
  margin-right: 5px; /* 아이콘과 텍스트 사이 간격 */
}

/* 프로필사진 */

.profile {
  width: 55px; /* 원하는 프로필 사진의 너비 */
  height: 55px; /* 원하는 프로필 사진의 높이 */
  border-radius: 50%; /* 원형으로 만들기 위해 반지름을 50%로 설정 */
  overflow: hidden; /* 컨테이너를 벗어난 이미지 부분을 숨김 */
  object-fit: cover; /* 이미지가 컨테이너에 맞도록 자르거나 확대 */
  border: 2px solid #fff; /* 원형 사진에 흰색 테두리 추가 (선택사항) */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); /* 그림자 효과 추가 (선택사항) */
  margin-right: 20px auto; 
  vertical-align: middle; /* 텍스트와 수직으로 가운데 정렬 */
  margin-right: 15px; /* 텍스트와 이미지 사이의 여백 추가 */
}

.profileMid {
  width: 120px; /* 원하는 프로필 사진의 너비 */
  height: 120px; /* 원하는 프로필 사진의 높이 */
  border-radius: 50%; /* 원형으로 만들기 위해 반지름을 50%로 설정 */
  overflow: hidden; /* 컨테이너를 벗어난 이미지 부분을 숨김 */
  object-fit: cover; /* 이미지가 컨테이너에 맞도록 자르거나 확대 */
  border: 2px solid #fff; /* 원형 사진에 흰색 테두리 추가 (선택사항) */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); /* 그림자 효과 추가 (선택사항) */
  margin-right: 20px auto; 
  vertical-align: middle; /* 텍스트와 수직으로 가운데 정렬 */
  margin-right: 15px; /* 텍스트와 이미지 사이의 여백 추가 */
}

.logo-registration{
  width: 100px; /* 원하는 프로필 사진의 너비 */
  height: auto; /* 원하는 프로필 사진의 높이 */
  overflow: hidden; /* 컨테이너를 벗어난 이미지 부분을 숨김 */
  object-fit: cover; /* 이미지가 컨테이너에 맞도록 자르거나 확대 */
  border: none; 
  box-shadow: none;
  margin: 20px 0; 

  vertical-align: middle; /* 텍스트와 수직으로 가운데 정렬 */
  margin-right: 15px; /* 텍스트와 이미지 사이의 여백 추가 */
}


.loginon-wrapper{
  display: inline-flex;       /* inline 요소처럼 흐르면서 flex 기능 사용 */
  align-items: center;        /* 자식(img, 텍스트)을 세로 가운데 정렬 */
  white-space: nowrap;        /* 텍스트 줄바꿈 방지 */
  gap: 1px;    
}


.login-on{
  display: block;      
  width: 45px; /* 원하는 프로필 사진의 너비 */
  height: auto; /* 원하는 프로필 사진의 높이 */
  overflow: hidden; /* 컨테이너를 벗어난 이미지 부분을 숨김 */
  object-fit: cover; /* 이미지가 컨테이너에 맞도록 자르거나 확대 */
  border: none; 
  box-shadow: none;
  margin: 10px 0; 
  vertical-align: middle; /* 텍스트와 수직으로 가운데 정렬 */
  margin-right: 15px; /* 텍스트와 이미지 사이의 여백 추가 */
}






/*__________________________________student booking page CSS ______________________________*/

.central-container2{
  display: flex; /* Flexbox 레이아웃을 사용합니다 */
  justify-content: center; /* 수평 중앙 정렬 */
  padding: 20px;
  margin: 20px auto;
  min-height: 1200px;
  height: flex;
  width:80%;
  min-width: 800px;
  max-width: 1100px;
  border-radius: 20px;
  flex-wrap: wrap;
  overflow: hidden;
  position: relative;
  }

  .lesson-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  width: 100%;
  cursor: pointer;
  transition: border 0.3s ease; /* 애니메이션 추가 */
  }


 .lesson-card:hover {
  border: 2px solid rgba(128, 128, 128, 0.6); /* 두꺼운 회색 테두리 */
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2); /* 더 강조된 그림자 효과 */
  }

.section-1 {
    flex: 1;
    display: flex;
    align-items: center;
}

.teacher-profile {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: #00a9a5;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
}

.section-2 {
    flex: 3;
    padding-left: 15px;
}

.teacher-name {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
}

.mobile-length{
    display: none;


}

.lesson-id {
  font-size: 12px !important; /* 글씨 크기를 강제로 12px로 */
  color: rgb(153, 153, 153) !important; /* 밝은 회색 적용 */
  margin-top: 5px;
}

.section-3 {
    flex: 2;
    text-align: center;
}

.class-name {
    font-size: 14px !important;
    margin: 0;
}

.class-duration {
    font-size: 14px;
    color: rgb(153, 153, 153);
    margin-top: 5px;
}

.section-4 {
    flex: 2;
    text-align: center;
}

.lesson-date {
  font-size: 12px !important; /* 14px 크기로 강제 적용 */
  color: #000000 !important; /* 글씨 색상 적용 */
  align-items: center;
}

.lesson-date span {
display: inline; /* 또는 block, 원하는 대로 */
}

.lesson-status{
text-align: center;
font-size: 12px !important;
flex-wrap: nowrap; 
align-items: center;

}


/* 팝업창 */
.popup {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
justify-content: center;
align-items: center;
}

.popup-content {
background-color: #f7f7f7;
padding: 20px;
border-radius: 10px;
width: 400px;
text-align: left;
}

.close-btn {
float: right;
font-size: 20px;
cursor: pointer;
}

.popup-buttons {
margin-top: 20px;
}

.popup-button {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 10px;
background-color: #f25555;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: 600;
}

.popup-button:hover {
background-color: #f74646;
}

/* 수업 취소 버튼 스타일 */
.cancel-button {
background-color: #f7f7f7;  /* 평소에는 회색 */
border-radius: 0.375rem;
border: 1px solid #D1D5DB;
color: black
}

.cancel-button:hover {
background-color: rgb(230, 231, 233);
}

/* 기본 수업 취소 버튼 */
.popup-button.cancel {
background-color: gray;
color: white;
cursor: pointer;
}

/* 비활성화된 수업 취소 버튼 */
.popup-button.cancel.disabled {
background-color: lightgray;
color: #aaa;
cursor: not-allowed;
}

/* Hover 시 툴팁을 띄우는 효과 */
.popup-button.cancel[disabled]:hover::after {
content: attr(title);
position: absolute;
top: -30px;
left: 0;
background-color: #333;
color: white;
padding: 5px 10px;
border-radius: 5px;
font-size: 12px;
white-space: nowrap;
z-index: 10;
}

/* 필터 */

.filter-container {
  display: flex;
  padding: 15px;
  font-weight: 400;
}

.filter-dropdown {
  width: 48%;
  margin-right: 1%; /* 오른쪽에 간격을 추가합니다 */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
}

 .specificDateFilter{
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 48%;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;

 }

/*안내멘트*/
  .guidance{
    font-size: 16px;
    color: grey;
    line-height: 25px;

  }


  
/* _________________________모바일 필터 관련__________________________*/

.filter-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.filter-modal-overlay.show {
  display: flex; /* 보이기 */
}

.filter-modal-content {
  background-color: #2b2b2b; /* 다크모드 느낌 */
  color: #fff;
  border-radius: 8px;
  padding: 20px;
  width: 90%;
  max-width: 400px;
}

.filter-modal-content h2 {
  margin-top: 0;
  text-align: center;
}

.filter-modal-content .filter-dropdown,
.filter-modal-content .specificDateFilter {
  width: 100%;        /* 원하는 폭(예: 80%, 100%, 300px 등) */
  max-width: 400px;  /* 원하는 최대 너비(선택사항) */
  margin: 10px auto;    /* 중앙 배치하고 싶다면 */
}


.filter-modal-content .filter-item label {
  margin-bottom: 5px;
  font-weight: bold; /* 이미 있으시면 중복 제거 */
}


.filter-modal-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #fff;
  float: right;
  cursor: pointer;
}

.filter-item {
  margin-bottom: 15px;

}

.filter-item label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}




/*__________________________________모바일 설명 ________________________________________ */


.guidance-modal-overlay {
  display: none; /* 기본적으로 숨김 */
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.guidance-modal-overlay.show {
  display: flex; /* 보이기 */
}

.guidance-modal-content {
  background-color: #ffffff; 
  color: #000000;
  border-radius: 8px;
  padding: 10px;
  width: 90%;
  max-width: 400px;
}

.guidance-modal-content h2 {
  margin-top: 0;
  text-align: center;
}

.guidance-modal-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #444444;
  float: right;
  cursor: pointer;
}



.buttonContainer{
  display: flex;               /* 수평으로 나란히 */
  justify-content: space-between; /* 왼쪽-오른쪽 끝으로 배치 */
  width: 90%;   
  margin: 0 auto;    
}

/* 필터 아이콘 버튼 */
.filter-button {
  background: none;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  
}
.filter-button img {
  width: 100%;
  margin:auto;
  height: auto;
}


/* 설명 아이콘 버튼 */
.info-button {
  background: none;
  border: none;
  cursor: pointer;
  width: 35px;
  height: 35px;
  
}
.info-button img {
  width: 100%;
  margin: 5px auto;
  height: auto;

}


    /* __________________________페이지네이션 CSS______________________________ */

.pagination-container{
  display: flex;
  justify-content: center;
  margin: auto;

  width: auto;             /* 고정 20% 대신 내용만큼 */
  max-width: 100%;         /* 혹시 모를 넘침 방지 */
  padding: 0 1rem;       /* 양쪽에 약간 여백 */
}

    /* pagination 전체 감싸기 */
.pagination {
  display: flex;
  gap: 0.5rem;
  padding: 0;
  margin: 1rem 0;
  list-style: none;
  flex-wrap: nowrap;      /* 줄바꿈 방지 */
}



/* 개별 페이지 항목 */
.pagination li {
  display: inline-block;
}

/* 기본 링크 스타일 */
.pagination li a {
  display: block;
  
  padding: 0.4rem 0.6rem;  /* 기존 0.5 / 0.75 → 살짝 축소 */
  border-radius: 4px;
  text-decoration: none;
  color: #555;               /* 비활성 페이지 글자색 */
  background-color: #f5f5f5; /* 비활성 페이지 배경 */
  transition: background-color 0.2s, color 0.2s;

  font-size: 0.9rem;       /* 글자도 살짝만 축소 */
}

/* 마우스 오버 시 */
.pagination li a:hover {
  background-color: #e0e0e0;
  color: #333;
}

/* 활성(현재) 페이지 */
.pagination li.active a {
  background-color: #007bff; /* 파란 계열 강조색 */
  color: #fff;               /* 글자는 흰색 */
  font-weight: bold;
  cursor: default;
}

/* 비활성 링크로 보이게—활성 페이지는 클릭 안 되도록 */
.pagination li.active a:hover {
  background-color: #007bff;
  color: #fff;
}

@media (max-width: 600px){
  .pagination-container{
    justify-content: center;   /* 이미 center 이지만 명시 */
    padding: 0;                /* 가장자리 여백 제거 */
  }

  .pagination{
    gap: 0.3rem;               /* 페이지 간격 더 좁게 */
    flex-wrap: wrap;           /* 넘치면 자동 줄바꿈 */
    justify-content: center;
  }

  .pagination li a{
    padding: 0.35rem 0.55rem;
    font-size: 0.85rem;
  }
}

/* ④ 아주 작은 화면 (≤ 360px) — 더 촘촘하게  */
@media (max-width: 420px){
  .pagination li a{
    padding: 0.3rem 0.45rem;
    font-size: 0.8rem;

  }

  .pagination {
  display: flex;
  gap: 0.1px;
  padding: 0;
  margin: 0;
  list-style: none;
  flex-wrap: nowrap;      /* 줄바꿈 방지 */
}

  .pagination li a{
    padding: 0.1rem 0.2rem;
    font-size: 14px;
  }

}




/*__________________________________반응형________________________________________ */

@media (min-width: 481px) {
/* 기존 필터 영역(.filter-container)은 그대로 노출 */
.filter-container {
display: flex !important; 
}

/* 새 필터 버튼(#openFilterModal)은 안 보이게 */
#openFilterModal {
display: none !important;
}
}


@media (max-width: 992px) {
.central-container2 {
width: 90%;
max-width: 900px;
min-width: auto; /* 800px 고정 해제(필요시) */
}
}

/* 2)__________________________________768px 이하 (태블릿~모바일)_______________________*/
@media (max-width: 768px) {
.central-container2 {
width: 90%;          /* 폭을 90% 정도 사용 */
max-width: 600px;    /* 필요하다면 상한 제한 */
min-width: auto;     /* 800px 고정 해제 */
min-height: auto;    /* 1200px 고정 해제(필요시) */
margin: 20px auto;
}

.lesson-card {
display: flex;
flex-wrap: wrap;  
justify-content: space-between; /* 가로 공간에 따라 정렬 */
align-items: flex-start; /* 필요에 따라 조정 */
padding: 15px;
}

.section-1 {
width: 50%;
order: 1; /* 원하는 순서가 있다면 지정 가능 */

}
.section-2 {
width: 50%;
order: 2;
}

/* 3) section-3, section-4도 이어서 50%씩 배분
  (아래 줄에 표시됨) */
.section-3 {
width: 50%;
order: 3;
}
.section-4 {
width: 50%;
order: 4;
}


/* teacher-profile 크기 축소 (선택) */
.teacher-profile {
width: 45px;
height: 45px;
font-size: 20px;
}

/* 필터 영역도 세로 배치 */
.filter-container {
flex-wrap: wrap;
padding: 10px;
}
.filter-dropdown, .specificDateFilter {
width: 100%;      /* 한 줄씩 배치 */
margin-bottom: 10px;
}
}

/* 3)__________________________________480px 이하 (모바일)_________________________________*/
@media (max-width: 480px) {
.central-container2 {
width: 95%;
max-width: 500px; 
min-width: auto;
min-height: auto; 
padding: 10px;
}

.lesson-card {
display: flex;     
flex-wrap: wrap; 
justify-content: space-between; 
align-items: flex-start; 
padding: 15px;
}

.mobile-length{
display: inline-block;
}


.filter-container {
  flex: none !important; 
  padding: 0;
}

.filter-dropdown {
  width: 50%;
  padding: 0;
}

 .specificDateFilter{
  width: 50%;
  padding: 0;
 }




/* 모든 section에 flex: none + width: 50% */
.section-1, .section-2, .section-3, .section-4 {
flex: none !important;   /* 기존 flex 우선순위 제거 */
box-sizing: border-box;  /* 여백 계산 편의상 (선택) */
}

.section-1 {
order: 1;
width: 20% !important;   /* 한 행에 2개씩 */
}
.section-2 {
margin-top: 10px;
order: 2;
align-items: center;
width: 80% !important;   /* 한 행에 2개씩 */
}

/* 다음 줄에 section-3, section-4 */
.section-3 {
display: none;

}

.section-4 {
display: flex;
align-items: center;
justify-content: space-between; /* 왼쪽 정렬 (기본) */

width: 78%;
margin-left: 27%;   


}

.lesson-date {
text-align: left;
margin: 0; 


}

.lesson-status{
margin: 0;
margin-right: 10%;
text-align: center; 
font-size: 12px !important;
flex-wrap: nowrap; 

}
.lesson-status span{
margin-right: 10%;
text-align: center; 
margin-right: 20px; 

}


.teacher-profile {
width: 50px;
height: 50px;
font-size: 20px;
}

.teacher-name {
font-size: 14px; 
}

.class-name {
display: none !important;

}.class-duration {
font-size: 12px;
}

.lesson-id {
/* font-size: 9px !important; */
display: none !important;
}


/* 기존 필터 영역(.filter-container)은 숨김 */
.filter-container {
display: none !important; 
}

/* 새 필터 버튼(#openFilterModal)은 보이기 */
#openFilterModal {
display: block !important;
}


/* (1) 480px 이하에서는 .guidance 숨김 */
.guidance {
display: none !important;
}

/* (2) 새로운 "질문표 아이콘" 버튼은 모바일에서만 보이게 */
#openGuidanceModal {
display: block !important;
}
}