/* From Uiverse.io by Nawsome */
.loader {
  --background: linear-gradient(135deg, #23C4F8, #275EFE);
  --shadow: rgba(39, 94, 254, 0.28);
  --text: #6C7486;
  --page: rgba(255, 255, 255, 0.36);
  --page-fold: rgba(255, 255, 255, 0.52);
  --duration: 3s;
  width: 200px;
  height: 140px;
  position: relative;
}
.loader:before, .loader:after {
  --r: -6deg;
  content: "";
  position: absolute;
  bottom: 8px;
  width: 120px;
  top: 80%;
  box-shadow: 0 16px 12px var(--shadow);
  transform: rotate(var(--r));
}
.loader:before { left: 4px; }
.loader:after { --r: 6deg; right: 4px; }
.loader div {
  width: 100%;
  height: 100%;
  border-radius: 13px;
  position: relative;
  z-index: 1;
  perspective: 600px;
  box-shadow: 0 4px 6px var(--shadow);
  background-image: var(--background);
}
.loader div ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}
.loader div ul li {
  --r: 180deg;
  --o: 0;
  --c: var(--page);
  position: absolute;
  top: 10px;
  left: 10px;
  transform-origin: 100% 50%;
  color: var(--c);
  opacity: var(--o);
  transform: rotateY(var(--r));
  -webkit-animation: var(--duration) ease infinite;
  animation: var(--duration) ease infinite;
}
.loader div ul li:nth-child(2) { --c: var(--page-fold); -webkit-animation-name: page-2; animation-name: page-2; }
.loader div ul li:nth-child(3) { --c: var(--page-fold); -webkit-animation-name: page-3; animation-name: page-3; }
.loader div ul li:nth-child(4) { --c: var(--page-fold); -webkit-animation-name: page-4; animation-name: page-4; }
.loader div ul li:nth-child(5) { --c: var(--page-fold); -webkit-animation-name: page-5; animation-name: page-5; }
.loader div ul li svg { width: 90px; height: 120px; display: block; }
.loader div ul li:first-child { --r: 0deg; --o: 1; }
.loader div ul li:last-child { --o: 1; }
.loader span {
  display: block;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 20px;
  text-align: center;
  color: var(--text);
}
@keyframes page-2 {
  0% { transform: rotateY(180deg); opacity: 0; }
  20% { opacity: 1; }
  35%, 100% { opacity: 0; }
  50%, 100% { transform: rotateY(0deg); }
}
@keyframes page-3 {
  15% { transform: rotateY(180deg); opacity: 0; }
  35% { opacity: 1; }
  50%, 100% { opacity: 0; }
  65%, 100% { transform: rotateY(0deg); }
}
@keyframes page-4 {
  30% { transform: rotateY(180deg); opacity: 0; }
  50% { opacity: 1; }
  65%, 100% { opacity: 0; }
  80%, 100% { transform: rotateY(0deg); }
}
@keyframes page-5 {
  45% { transform: rotateY(180deg); opacity: 0; }
  65% { opacity: 1; }
  80%, 100% { opacity: 0; }
  95%, 100% { transform: rotateY(0deg); }
}

/* 다크모드 */
body.dark-mode {
  background-color: #121212 !important;
  color: #eee;
}
body.dark-mode .card {
  background-color: #1e1e1e;
  color: #eee;
  border-color: #333;
}
body.dark-mode .btn {
  background-color: #333;
  color: #eee;
  border-color: #444;
}
body.dark-mode .btn:hover {
  background-color: #555;
  color: #fff;
}
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  background-color: #2a2a2a;
  color: #eee;
  border: 1px solid #444;
}
body.dark-mode input::placeholder {
  color: #eee;
  opacity: 0.6;
}
body.dark-mode table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #444;
  background-color: #1e1e1e;
  color: #fff;
}
body.dark-mode table th {
  background-color: #2a2a2a;
  border: 1px solid #444;
  color: #fff;
}
body.dark-mode table td,
body.dark-mode table th {
  border: 1px solid #444;
  padding: 8px;
  color: #fff;
}
body.dark-mode table tr:nth-child(odd) td { background-color: #1e1e1e; }
body.dark-mode table tr:nth-child(even) td { background-color: #2a2a2a; }
body.dark-mode select:disabled {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #eee !important;
  opacity: 1 !important;
}

/* 다크모드 토글 스위치 */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 64px;
  height: 34px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #73C0FC;
  transition: .4s;
  border-radius: 30px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  border-radius: 20px;
  left: 2px;
  bottom: 2px;
  z-index: 2;
  background-color: #e8e8e8;
  transition: .4s;
}
.sun svg {
  position: absolute;
  top: 6px;
  left: 36px;
  z-index: 1;
  width: 24px;
  height: 24px;
}
.moon svg {
  fill: #73C0FC;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 1;
  width: 24px;
  height: 24px;
}
.sun svg { animation: rotate 15s linear infinite; }
@keyframes rotate {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}
.moon svg { animation: tilt 5s linear infinite; }
@keyframes tilt {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}
.input:checked + .slider { background-color: #183153; }
.input:focus + .slider { box-shadow: 0 0 1px #183153; }
.input:checked + .slider:before { transform: translateX(30px); }
label.switch {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1000;
}
input#darkModeToggle { position: static; }

/* 폰트 */
@font-face{font-family:'Paperozi';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2');font-weight:100;font-display:swap;}
@font-face{font-family:'Paperozi';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2');font-weight:200;font-display:swap;}
@font-face{font-family:'Paperozi';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');font-weight:300;font-display:swap;}
@font-face{font-family:'Paperozi';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Paperozi';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');font-weight:500;font-display:swap;}
@font-face{font-family:'Paperozi';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');font-weight:600;font-display:swap;}
@font-face{font-family:'Paperozi';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');font-weight:700;font-display:swap;}
@font-face{font-family:'Paperozi';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap;}
@font-face{font-family:'Paperozi';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');font-weight:900;font-display:swap;}

#update-modal div{font-family:'Paperozi',sans-serif;}
.loading.active{display:inline-block}
.loading{display:none}
table td,table th{vertical-align:middle;text-align:center}
table th:first-child,table td:first-child{font-weight:bold}
body.dark-mode .captcha-bold-text { color: black !important; }

/* 탭 스타일 */
.nav-tabs .nav-link { color: #495057; }
.nav-tabs .nav-link.active {
  color: #495057;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}
body.dark-mode .nav-tabs .nav-link { color: #eee; }
body.dark-mode .nav-tabs .nav-link.active {
  color: #eee;
  background-color: #1e1e1e;
  border-color: #444 #444 #1e1e1e;
}

/* 반응형 테이블 */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 모달 애니메이션 */
#teacherCustomizeModal, #settingsMenu, #statusMenu {
  transition: opacity 0.2s ease;
}

/* 자동완성 컨테이너 */
[id$="AutocompleteContainer"] {
  position: absolute;
  z-index: 1000;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ccc;
  border-top: none;
  background-color: white;
  display: none;
  font-size: 0.95em;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* 하이라이트 스타일 (변경사항 표시용 - 클릭 토글 제거됨) */
.highlighted { background-color: lightyellow !important; }
body.dark-mode .highlighted { background-color: #554400 !important; }

/* 마지막 업데이트 정보 */
#lastUpdateInfo { font-size: 12px; }

/* 설정 메뉴 스타일 */
#settingsContent, #teacherCustomizeContent { transition: opacity 0.2s ease; }

/* 모바일 대응 */
@media (max-width: 600px) {
  .table-responsive table { font-size: 12px; }
  .table-responsive table td,
  .table-responsive table th { padding: 4px; }
}