:root{--c-main:#111;--c-text:#4b4f55;--c-light:#fbfbfc;--c-border:#e9e9e9;--c-btn:#FDC512;--c-btn-hov:#D9A90F;--c-accent:#202020;}
*{box-sizing:border-box;font-family:'Noto Sans KR',sans-serif;margin:0;}

body{color:var(--c-text);min-height:100vh;display:flex;flex-direction:column;}

.wrapper{width:95%;max-width:1400px;margin:40px auto;}

.content-panel {
  background: #ffffff;
  border-radius: 24px;
  padding: 20px 25px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
  margin: 40px 12px 0 12px;
  box-sizing: border-box;
}

.toolbar{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  margin-bottom:20px;
  flex-wrap:wrap;
  gap: 10px;
}
.filter-set{display:flex;gap:10px; flex-wrap: wrap; justify-content: flex-start;}


.filter{
  min-width: 140px;
  appearance:none;
  outline:none !important;
  border:1px solid var(--c-border);
  border-radius:6px;
  padding:0 32px 0 12px;
  height: 38px;
  background:#fff url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='%23343a40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7l5 6 5-6H5z'/%3E%3C/svg%3E") no-repeat right 10px center/10px 10px;
  box-shadow: none;
  transition: all 0.2s ease-in-out;
}
.filter:hover {
    border-color: #ccc;
}

#school {
    width: 200px;
}
.filter:focus{border-color:var(--c-main);box-shadow:none;}
.filter::-ms-expand{display:none;}
.select-wrap{position:relative;display:inline-block;}

.btn{
    height:38px;
    padding:0 20px;
    border:none;
    border-radius:8px;
    font-weight:700;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:6px;
    transition: all 0.2s ease-in-out;
    font-size:.93rem;
    box-shadow: 0 3px 6px rgba(0,0,0,0.07);
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

.btn--search {
  background: linear-gradient(145deg, #3a3a3a, #1a1a1a);
  color: #fff;
  position: relative;
  box-shadow: 5px 5px 10px #dcd5c9,
              -5px -5px 10px #ffffff;
  transition: all 0.15s ease-in-out;
}

.btn--search:hover {
  background: linear-gradient(145deg, #4a4a4a, #2a2a2a);
  transform: translateY(-2px);
  box-shadow: 7px 7px 15px #dcd5c9,
              -7px -7px 15px #ffffff;
}

.btn--search:active {
  transform: translateY(1px);
  background: #202020;
  box-shadow: inset 4px 4px 8px #0d0d0d,
              inset -4px -4px 8px #4d4d4d;
}

.btn--primary{background:var(--c-btn);color:#fff;}
.btn--primary:hover{background:var(--c-btn-hov);}

.table-wrap{
  min-height: 500px;
  background:#fff;
  border-radius:0;
  box-shadow:none;
}

table {
  width: 100%;
  border-collapse: collapse !important;
  border-spacing: 0;
  border: 0;
  table-layout: fixed;
}
thead{background:var(--c-light);color:var(--c-main);font-weight:700;}
th, td {
  padding: 10px 8px;
  font-size: .9rem;
  text-align: center;
  border: 0 !important;
  border-bottom: 1px solid #f5f5f5;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

thead th:nth-child(1) { width: 6%; }
thead th:nth-child(2) { width: 34%; }
thead th:nth-child(3) { width: 10%; }
thead th:nth-child(4) { width: 8%; }
thead th:nth-child(5) { width: 12%; }
thead th:nth-child(6) { width: 8%; }
thead th:nth-child(7) { width: 12%; }
thead th:nth-child(8) { width: 10%; }


thead th {
  border-bottom: 1px solid #e9e9e9;
}

th[data-sort] { cursor: pointer; user-select: none; position: relative; }
th[data-sort]:hover { background: #f8f9fa; }
.sort-icon { display: inline-block; width: 0.8em; height: 0.8em; position: relative; vertical-align: middle; margin-left: 5px; top: -1px; }
.sort-icon::before, .sort-icon::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; opacity: 0.3; }
.sort-icon::before { bottom: 50%; margin-bottom: 1.5px; border-bottom: 4.5px solid var(--c-text); }
.sort-icon::after { top: 50%; margin-top: 1.5px; border-top: 4.5px solid var(--c-text); }
th.sorted[data-direction="asc"] .sort-icon::before,
th.sorted[data-direction="desc"] .sort-icon::after { opacity: 1; }
th.sorted[data-direction="asc"] .sort-icon::after,
th.sorted[data-direction="desc"] .sort-icon::before { opacity: 0.3; }
.spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; }
.btn.loading .spinner { display: block; }
.btn.loading .fa-magnifying-glass { display: none; }
.btn:disabled { opacity: 0.7; cursor: not-allowed; }
@keyframes spin { to { transform: rotate(360deg); } }

tbody tr:hover{
  background:#fffbe6;
}

/* ▼▼▼ [추가] 파일명에 커서를 올렸을 때 클릭 가능하도록 스타일 변경 ▼▼▼ */
.file-title-link {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  font-weight: 500;
}
.file-title-link:hover {
  text-decoration: underline;
  color: #0056b3;
}
/* ▲▲▲ [추가] 파일명 스타일 ▲▲▲ */


.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 28px 0;
}
.page {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50% !important;
  background: transparent;
  color: var(--c-main);
  cursor: pointer;
  transition: background-color 0.15s;
}
.page:hover {
  background: #f1f3f5;
}
.page.active {
  background: var(--c-accent);
  color: #fff;
  pointer-events: none;
}
.page.disabled {
  color: #ced4da;
  cursor: not-allowed;
  background: transparent;
}
.pagination-ellipsis {
  color: var(--c-text);
  padding: 0 4px;
}
@media (max-width:1024px){.filter-set{flex-wrap:wrap;gap:6px;}.toolbar{gap:10px;}}

/* ▼▼▼ [수정됨] 페이지 배너 스타일 (high- 접두사 추가) ▼▼▼ */
.high-page-banner {
  margin: 24px 12px;
  /* 수정: 아주 옅은 하늘색 그라데이션으로 변경 */
  background: linear-gradient(135deg, #F5FAFF 0%, #EAF8FF 100%);
  border-radius: 24px;
  padding: 30px 50px;
  height: 180px; 
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  /* 수정: 배경색에 어울리도록 그림자 색을 푸른 계열로 변경 */
  box-shadow: 0 8px 25px rgba(180, 200, 220, 0.4), 
              inset 1px 1px 2px #ffffffa0;
  transition: all 0.3s ease-in-out;
}

.high-page-banner:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(200, 190, 220, 0.6), 
                inset 1px 1px 2px #ffffffa0;
}

.high-banner-content {
  flex: 1;
}

.high-banner-image {
  flex-shrink: 0;
  width: 250px; 
  height: 100%;
  position: relative;
}

.high-banner-img-element {
  position: absolute; 
  width: 245px;       
  height: auto;
  bottom: -62px;      
  right: 30px;        
  opacity: 0.9;
  transition: all 0.3s ease;
  z-index: 1; 
}

.high-page-banner h2 {
  font-size: 1.9rem;
  font-weight: 900;
  margin: 0 0 8px 0; 
  color: #403b39;
  text-shadow: none;
  /* white-space: nowrap; <- 이 줄을 삭제합니다. */
}

.high-page-banner p {
  font-size: 1rem;
  line-height: 1.6;
  color: #635b58;
  margin: 10px 0 0 0; 
  text-align: left;
  text-shadow: none;
  /* max-width와 줄바꿈 관련 속성을 모두 제거하여 글자가 항상 보이도록 수정 */
}

.download-btn img {
  width: 28px;
  height: 28px;
}

@media (max-width: 768px) {
  /* --- 1. 페이지 배너 스타일 조정 --- */
  .high-page-banner {
    padding: 24px;
    height: auto; /* 높이를 내용에 맞게 자동 조절 */
    text-align: left;
  }
  .high-page-banner h2 {
    font-size: 1.5rem; /* 제목 글씨 크기 축소 */
  }
  .high-page-banner p {
    font-size: 0.85rem !important; /* [수정] !important 추가 */
  }
  .high-banner-image {
    display: none; /* 모바일에서는 배너 오른쪽 이미지 숨기기 */
  }

  /* --- 2. 중등/고등 토글 버튼 크기 조정 --- */
  .level-toggle-container {
    font-size: 0.9rem !important; /* [수정] !important 추가 */
    gap: 8px;
  }
  .switch {
    width: 44px; /* 스위치 너비 축소 */
    height: 24px; /* 스위치 높이 축소 */
  }
  .slider {
    border-radius: 24px;
  }
  .slider:before {
    height: 18px; /* 스위치 내부 원 크기 축소 */
    width: 18px;
    left: 3px;
    bottom: 3px;
  }
  input:checked + .slider:before {
    transform: translateX(20px); /* 원 이동 거리 조정 */
  }

    /* 1. 불필요한 열(과목, 학년, 학기, 연도, 업로드일) 숨기기 */
  #table-head th:nth-child(3),
  #table-head th:nth-child(4),
  #table-head th:nth-child(5),
  #table-head th:nth-child(6),
  #table-head th:nth-child(7),
  #file-list td:nth-child(3),
  #file-list td:nth-child(4),
  #file-list td:nth-child(5),
  #file-list td:nth-child(6),
  #file-list td:nth-child(7) {
    display: none;
  }

  /* 2. 남은 열(No, 자료명, 다운로드)의 너비를 모바일에 맞게 재조정 */
  #table-head th:nth-child(1) { width: 15%; } /* No. */
  #table-head th:nth-child(2) { width: 60%; } /* 자료명 */
  #table-head th:nth-child(8) { width: 25%; } /* 다운로드 */
  
  /* 1. 파일명 글씨 크기 축소 */
  .file-title-link {
    font-size: 0.8rem;
  }

  /* 2. 다운로드 아이콘 크기 축소 */
  .download-btn img {
    width: 24px;
    height: 24px;
  }

    /* 1. 테이블의 파일명이 길어지면 ...으로 생략 */
  #file-list .file-title-link {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 2. 상세 정보 패널(모달) 스타일 변경 */
  .details-slide-panel {
    /* [수정] 가로폭을 줄이고 좌우 여백을 줍니다. */
    width: auto;
    left: 10px;
    right: 10px;

    /* [수정] 높이를 내용물에 딱 맞게 조절하고, 최대 높이 제한을 제거합니다. */
    height: auto;
    max-height: unset; 
    
    /* [수정] 화면 맨 아래에 붙도록 bottom: 0 으로 설정합니다. */
    top: auto;
    bottom: 0;
    border-radius: 16px 16px 0 0; /* 모서리를 좀 더 부드럽게 */
    transform: translateY(100%);
  }
  .details-slide-panel.is-open {
    transform: translateY(0);
  }

}


.bar-sep {color: #007BFF;font-weight: 1000;}
.level-toggle-container {display: inline-flex;align-items: center;margin-left: 20px;gap: 10px;font-size: 0.98rem;font-weight: 700;}
.switch {position: relative;display: inline-block;width: 52px;height: 28px;}
.switch input {opacity: 0;width: 0;height: 0;}
.slider {position: absolute;cursor: pointer;top:0; left:0; right:0; bottom:0;background-color: #007BFF;transition: .4s;border-radius: 28px;  }
.slider:before {position: absolute;content: "";height: 22px; width: 22px;left: 3px; bottom: 3px;background-color: white;transition: .4s;border-radius: 50%;}
input:checked + .slider:before {transform: translateX(24px);}
.with-toggle {display: flex;align-items: flex-end;gap: 18px; flex-wrap: nowrap;}
.with-toggle .level-toggle-container {margin: 0;position: relative;top: -7px;bottom: 0;}
.swal2-actions-center {justify-content: center !important;}