/* 기본 설정 */
* {
  box-sizing: border-box;
}

html,
body {
  overflow: hidden !important;
  position: fixed;
}

body {
  margin: auto;
  padding: 0;
  font-family: "IBM Plex Sans KR", sans-serif;
  background-color: #000;
  overflow: hidden;
  cursor: pointer;
  user-select: none;

  user-drag: none; /* Safari */
  -webkit-user-drag: none; /* Safari */
  user-select: none; /* 텍스트 선택 방지 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

#main-content,
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1920px;
  height: 1080px;
}

.bg-container {
  width: 1920px;
  height: 1080px;
  position: relative;
  transform-origin: top left;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #f9f9f9;

  padding: 32px 0;
  font-family: "IBM Plex Sans KR", sans-serif;
  box-sizing: border-box;
}

.question-container {
  width: 1920px;
  height: auto;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 64.8px 76.8px 21.6px;
  box-sizing: border-box;
  text-align: center;
  margin-bottom: 54px;
}

.question-box {
  font-size: 36px;
  font-family: "IBM Plex Sans KR", sans-serif;

  padding: 19.2px 32px;
  background-color: rgba(15, 17, 26, 0.85);
  border: 1.5px solid #00ffe1;
  border-radius: 12px;
  color: white;
  box-shadow: 0 0 10px #00ffe144;

  width: 1344px;
  max-width: 900px;
  min-width: 300px;
}

.dialog-box {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 1536px;
  min-height: 196px;

  /* 배경 & 네온 테두리 */
  background-color: rgba(10, 12, 20, 0.85);
  border: 1.5px solid #b388ff; /* 디지털 그린 */
  box-shadow: 0 0 12px #b388ff66;

  /* 폰트 & 정렬 */
  font-family: "IBM Plex Sans KR", sans-serif;
  font-size: 36px;
  color: #ffffff;
  text-shadow: 0 0 4px #00ffe144;

  /* 둥근 테두리 & 시각 효과 */
  border-radius: 16px;
  backdrop-filter: blur(6px);
  box-sizing: border-box;
  z-index: 9;

  /* 내부 정렬 */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.dialog-name {
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  padding: 8px 24px;
  border: 1.5px solid #b388ff;
  border-radius: 12px;
  font-family: "IBM Plex Sans KR", sans-serif;
  font-size: 24px;
  color: white;
  box-shadow: 0 0 8px #b388ff66;
  white-space: nowrap;
  z-index: 10;
  background-color: rgba(10, 12, 20, 0.95);
}

.dialog-name.left {
  left: 48px;
  right: auto;
  text-align: left;
}

.dialog-name.right {
  right: 48px;
  left: auto;
  text-align: right;
}

.character-left,
.character-right {
  position: fixed;
  bottom: 135px;
  width: 422.4px;
  height: 432px;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 9;
  border-radius: 16px;
  transition: opacity 0.3s ease;
}

/* 왼쪽 캐릭터 */
.character-left {
  left: 230.4px;
}

/* 오른쪽 캐릭터 */
.character-right {
  right: 192px;
}

/* 흐려진 캐릭터 효과 */
.character-inactive {
  opacity: 0.4;
}

/* .dialog-overlay에 narration-mode 클래스가 붙었을 때 .character-left와 .character-right를 display: none 처리함 */
.dialog-overlay.narration-mode ~ .character-left,
.dialog-overlay.narration-mode ~ .character-right {
  display: none;
}

.dialog-text {
  margin: 0;
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  backdrop-filter: blur(4px);
  background-color: rgba(255, 255, 255, 0.3);
  z-index: 8;
  cursor: pointer;
}

.dialog-overlay.narration-mode {
  backdrop-filter: none;
  background-color: transparent;
}

.dialog-overlay.intro-overlay {
  background-color: rgba(15, 17, 26, 1);
  background-image: linear-gradient(
      rgba(0, 255, 255, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 30px 30px; /* 격자 크기 조정 */
  opacity: 1;
}

.click-indicator {
  position: absolute;
  bottom: 24px;
  right: 32px;
  font-size: 24px;
  color: #fff;
  animation: blink 1s step-start infinite;
  display: none;
  font-family: "IBM Plex Sans KR", sans-serif;
}

.title-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;

  box-sizing: border-box;
  width: 1344px;
  min-height: 324px;
  bottom: 378px;
  left: 50%;
  transform: translateX(-50%);
  padding: 32px 64px;

  z-index: 10;
  text-align: center;
  cursor: pointer;

  background: rgba(10, 12, 20, 0.85);
  border: 1.5px solid #39ff14;
  border-radius: 12px;
  box-shadow: 0 0 16px #39ff1488;

  animation: pulse-glow 2s infinite;
}

.title-text {
  margin: 0;
  color: #ffffff;
  font-family: "IBM Plex Sans KR", sans-serif;
  font-size: 40px;
  line-height: 1.6;
  text-shadow: 0 0 6px #39ff14, 0 0 2px #ffffff33;
}

.shake {
  animation: shake 0.5s ease-in-out 2;
}

.mission-clear-overlay,
.mission-start-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  align-items: center;
  justify-content: center;

  background-color: rgba(15, 17, 26, 1);
  background-image: linear-gradient(
      rgba(0, 255, 255, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 30px 30px; /* 격자 크기 조정 */

  z-index: 2000;
  display: none;
}

.mission-clear-text,
.mission-start-text {
  position: relative;
  font-size: 115.2px;
  font-weight: bold;
  font-family: "IBM Plex Sans KR", sans-serif;
  color: #fff;
  text-shadow: 0 0 6px #39ff14, 0 0 2px #ffffff33;
  text-align: center;
  animation: fadeBounce 1s ease-out;
}

.slide-up-out {
  animation: slideUpOut 0.5s ease-in forwards;
}

.red-alert-flash {
  position: fixed;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  background-color: rgba(255, 0, 0, 0.4);
  z-index: 9999;
  animation: flashRed 0.3s ease 3;
  pointer-events: none;
}

/* 상단 네비게이션 바 */
.global-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 72px;
  padding: 0 19.2px;
  background: rgba(10, 20, 40, 0.6); /* 반투명 네이비 배경 */
  backdrop-filter: blur(10px); /* 유리 효과 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.15);
  z-index: 1000;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0, 200, 255, 0.2);
}

/* 버튼 그룹 */
.nav-left,
.nav-right {
  display: flex;
  gap: 16px;
}

/* 공통 버튼 스타일 */
.nav-btn {
  width: 46px;
  height: 46px;
  background: rgba(0, 255, 255, 0.1);
  border: 1.5px solid rgba(0, 200, 255, 0.6);
  border-radius: 50%;
  font-size: 22.4px;
  color: #aaf6ff;
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-btn:hover {
  background-color: rgba(0, 255, 255, 0.2);
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(0, 200, 255, 0.6);
}

.teacher-nav-btn {
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 0, 0.1); /* 옅은 노랑 배경 */
  border: 1.5px solid rgba(255, 255, 100, 0.6); /* 밝은 노랑 테두리 */
  border-radius: 50%;
  font-size: 22.4px;
  color: #fff89a; /* 텍스트 색상 */
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px rgba(255, 255, 100, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}

.teacher-nav-btn:hover {
  background-color: rgba(255, 255, 0, 0.2);
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(255, 255, 120, 0.6);
}

/* 타이틀 스타일 */
.nav-title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40%;
  font-size: 22.4px;
  font-weight: bold;
  color: white;
  font-family: "IBM Plex Sans KR", sans-serif;
  text-shadow: 0 0 4px rgba(0, 255, 255, 0.5);
}

.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.complete-disabled {
  opacity: 0;
  cursor: not-allowed;
  pointer-events: none;
}

.material-symbols-rounded {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.clock-shake-effect {
  animation: clockShake 0.4s ease-in-out;
}

/* 노이즈 효과 */
.noise-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  background: url("../../assets/images/items/static_noise.gif"); /* 노이즈 GIF */
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s ease;
}

/* 깜빡이는 글리치 효과 */
.bg-glitch {
  animation: glitch-flash 0.3s steps(2, end) 3;
}

.disappear-right {
  animation: flyOutRight 0.4s ease forwards;
}

.bg-change {
  animation: fadeInBackground 1s ease-in-out;
}

/* 카메라 플래시 효과 */
.camera-flash {
  position: fixed;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  background: white;
  opacity: 0.9;
  z-index: 9999;
  animation: flashAnim 0.3s ease-in-out;
  pointer-events: none; /* 클릭 차단 방지 */
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.5s ease;
}

.popup-image {
  max-width: 800px;
  max-height: 450px;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
  animation: popUp 0.5s ease;
}

.bg-fake {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 1920px;
  height: 1080px;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  pointer-events: none;
}

.fade-out {
  animation: fadeOut 0.8s ease-out forwards;
}
.fade-in {
  animation: fadeIn 0.8s ease-in forwards;
}

/* 반짝이는 효과 */
@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 10px #39ff1444;
  }
  50% {
    box-shadow: 0 0 20px #39ff14cc;
  }
  100% {
    box-shadow: 0 0 10px #39ff1444;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes popUp {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes flashAnim {
  0% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeInBackground {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

@keyframes flyOutRight {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(300%) rotate(10deg);
    opacity: 0;
  }
}

@keyframes glitch-flash {
  0% {
    filter: contrast(150%) hue-rotate(10deg);
  }
  50% {
    filter: grayscale(100%) hue-rotate(-10deg);
  }
  100% {
    filter: none;
  }
}

@keyframes clockShake {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(2deg);
  }
  20% {
    transform: rotate(-3deg);
  }
  30% {
    transform: rotate(2.5deg);
  }
  40% {
    transform: rotate(-2.5deg);
  }
  50% {
    transform: rotate(2deg);
  }
  60% {
    transform: rotate(-2deg);
  }
  70% {
    transform: rotate(1deg);
  }
  80% {
    transform: rotate(-1deg);
  }
  90% {
    transform: rotate(0.5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes flashRed {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

@keyframes shake {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-5px, 0);
  }
  40% {
    transform: translate(5px, 0);
  }
  60% {
    transform: translate(-5px, 0);
  }
  80% {
    transform: translate(5px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes bounceIn {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -55%) scale(1.3);
    opacity: 1;
  }
  70% {
    transform: translate(-50%, -52%) scale(1.1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.2);
  }
}

@keyframes fadeBounce {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes slideUpOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-200%);
    opacity: 0;
  }
}

/* SweetAlert2 네온 스타일 팝업 (루트 요소) */
.neon-profile-popup {
  background: rgba(10, 20, 30, 0.85) !important;
  border: 2px solid #00faffaa;
  box-shadow: 0 0 20px #00faff55;
  border-radius: 16px !important;
  padding: 32px !important;
  color: #aafaff !important;
  backdrop-filter: blur(6px);
}

/* 내용 텍스트 */
.neon-profile-popup .swal2-icon {
  margin: 8px auto;
}

/* 타이틀 텍스트 */
.neon-profile-popup .swal2-title {
  font-size: 32px !important;
  color: #aafaff !important;
  text-shadow: 0 0 10px #00faffcc;
  margin-bottom: 16px;
}

/* 내용 텍스트 */
.neon-profile-popup .swal2-html-container {
  font-size: 22.4px !important;
  color: #dff !important;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
  padding: 16px 0;
}

/* 버튼 스타일 */
.neon-profile-popup .swal2-confirm,
.neon-profile-popup .swal2-cancel {
  font-size: 17.6px !important;
  font-weight: bold;
  padding: 12.8px 32px !important;
  border-radius: 10px !important;
  border: none;
  box-shadow: 0 0 12px #00faff88;
  background-color: #00faff !important;
  color: #001622 !important;
  transition: transform 0.2s ease;
}

/* 취소 버튼만 다르게 */
.neon-profile-popup .swal2-cancel {
  background-color: #1e2f40 !important;
  color: #aafaff !important;
  box-shadow: none;
}

/* 버튼 호버 효과 */
.neon-profile-popup .swal2-confirm:hover,
.neon-profile-popup .swal2-cancel:hover {
  transform: scale(1.05);
}

/* 인풋 필드 (swal2 기본 클래스 사용) */
.neon-profile-popup .swal2-input {
  width: 100%;
  padding: 14.4px;
  font-size: 19.2px;
  background: #0a1a2a !important;
  border: 1.5px solid #00faff77 !important;
  border-radius: 8px;
  color: #ffffff;
  outline: none;
  box-shadow: inset 0 0 8px #00faff33;
  margin: 0 auto;
}

.neon-profile-popup .swal2-label {
  display: block;
  text-align: left;
  margin: 16px 0 8px;
  font-weight: bold;
  font-size: 19.2px;
  color: #aafaff;
}

.neon-profile-popup .popup-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 16px;
  text-align: left;
  flex: 1;
}

.neon-profile-popup .popup-row {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
}

.neon-profile-popup select.swal2-input {
  background: #0a1a2a;
  border: 1.5px solid #00faff77;
  border-radius: 8px;
  color: #ffffff;
  padding: 12.8px;
  font-size: 19.2px;
  outline: none;
  box-shadow: inset 0 0 8px #00faff33;
  font-family: "IBM Plex Sans KR", sans-serif;
}

/* 전체 팝업 배경 스타일 */
.user-management-custom-swal2-popup,
.import-individual-swal2-popup,
.bulk-create-custom-swal2-popup,
.students-progress-swal2-popup,
.progress-custom-swal2-popup {
  border: 2px solid #00faffaa;
  box-shadow: 0 0 20px #00faff66;
  border-radius: 16px;
  padding: 32px !important;
  color: #aafaff;
  font-family: "IBM Plex Sans KR", sans-serif;
  backdrop-filter: blur(6px);
  background-color: #0a1a2a !important;
  display: flex;
  flex-direction: column;
}

/* 팝업 제목 */
.user-management-custom-swal2-title,
.bulk-create-custom-swal2-title,
.import-individual-swal2-title,
.students-progress-swal2-title,
.progress-custom-swal2-title {
  font-size: 28.8px;
  text-shadow: 0 0 10px #00faffaa;
  margin-bottom: 16px;
}

/* 확인 버튼 (사용 시) */
.user-management-custom-swal2-confirm,
.bulk-create-custom-swal2-confirm,
.import-individual-swal2-confirm,
.progress-custom-swal2-confirm {
  background-color: #00faff !important;
  color: #001622 !important;
  border: none !important;
  font-weight: bold;
  border-radius: 10px !important;
  box-shadow: 0 0 12px #00faff88;
  padding: 12px 32px;
  font-size: 17.6px;
  transition: transform 0.2s;
}

.user-management-custom-swal2-confirm:hover,
.user-management-custom-swal2-popup .popup-button:hover,
.bulk-create-custom-swal2-confirm:hover,
.import-individual-swal2-confirm:hover,
.progress-custom-swal2-confirm:hover {
  transform: scale(1.05);
}

/* 툴바 레이아웃 */
.user-management-custom-swal2-popup .popup-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

/* 왼쪽 버튼 그룹 */
.user-management-custom-swal2-popup .popup-left-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* 공통 버튼 스타일 */
.user-management-custom-swal2-popup .popup-button {
  padding: 9.6px 17.6px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease;
  box-shadow: 0 0 10px rgba(0, 250, 255, 0.2);
}

.user-management-custom-swal2-popup .popup-button.bulk-create {
  background-color: #00faff;
  color: #001622;
  box-shadow: 0 0 12px #00faff88;
}

.user-management-custom-swal2-popup .popup-button.import-individual {
  background-color: #8bc34a;
  color: #001622;
  box-shadow: 0 0 12px #8bc34a88;
}

.user-management-custom-swal2-popup .popup-button.download-data {
  background-color: #ffc107;
  color: #001622;
  box-shadow: 0 0 12px #ffc10788;
}

.user-management-custom-swal2-popup .popup-button.delete-selected {
  background-color: #ff4d4d;
  color: white;
  box-shadow: 0 0 10px #ff4d4d88;
}

.user-management-custom-swal2-popup .generated-user-list {
  max-height: 480px;
  overflow-y: auto;
  padding-right: 6px;
}

.user-management-custom-swal2-popup table thead th {
  background-color: #e6faff; /* 밝은 하늘색 배경 */
  color: #001622; /* 네이비 계열 어두운 텍스트 */
  font-weight: bold;
  border-bottom: 1.5px solid #00faff55;
  text-align: center;
  padding: 12px;
}

.user-management-custom-swal2-popup .toolbar-divider {
  margin: 16px 0;
  height: 1px;
  background-color: #00faffcc; /* 더 선명한 네온 블루 */
  border: none;
  box-shadow: 0 0 8px #00faff88; /* 발광 효과 */
}

.bulk-create-custom-swal2-popup .popup-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 24px;
  text-align: left;
}

.bulk-create-custom-swal2-popup .popup-field label {
  margin-bottom: 6.4px;
  font-size: 17.6px;
  color: #aafaff;
  font-weight: bold;
}

.bulk-create-custom-swal2-popup select.bulk-create-swal2-input {
  background: #0a1a2a;
  border: 1.5px solid #00faff77;
  border-radius: 8px;
  color: #ffffff;
  padding: 14.4px;
  font-size: 17.6px;
  outline: none;
  box-shadow: inset 0 0 8px #00faff33;
  font-family: "IBM Plex Sans KR", sans-serif;
  text-align: center;
}

/* 두 필드를 가로로 나란히 배치하는 행 */
.bulk-create-custom-swal2-popup .popup-row {
  display: flex;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.bulk-create-custom-swal2-popup .popup-field.half-width {
  flex: 1;
  min-width: 0;
}

.bulk-create-swal2-input {
  background: #0a1a2a;
  border: 1.5px solid #00faff77;
  border-radius: 8px;
  color: #ffffff;
  padding: 14.4px;
  font-size: 17.6px;
  outline: none;
  box-shadow: inset 0 0 8px #00faff33;
  font-family: "IBM Plex Sans KR", sans-serif;
  text-align: center;
}

.spinner::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.import-individual-swal2-popup .popup-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: 16px;
  text-align: left;
}

.import-individual-swal2-popup .popup-field label {
  margin-bottom: 6.4px;
  font-size: 17.6px;
  color: #aafaff;
  font-weight: bold;
}

.import-individual-swal2-input {
  background: #0a1a2a;
  border: 1.5px solid #00faff77;
  border-radius: 8px;
  color: #ffffff;
  padding: 14.4px;
  font-size: 17.6px;
  outline: none;
  box-shadow: inset 0 0 8px #00faff33;
  font-family: "IBM Plex Sans KR", sans-serif;
  text-align: center;
}

.import-individual-divider {
  margin: 19.2px 0;
  height: 1px;
  background-color: #00faffcc; /* 더 선명한 네온 블루 */
  border: none;
  box-shadow: 0 0 8px #00faff88; /* 발광 효과 */
}

.popup-header {
  display: flex;
  justify-content: end;
  margin-bottom: 16px;
  color: #000;
}

.popup-table {
  display: flex;
  justify-content: center;
}

.refresh-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background-color: #00faff !important;
  color: #001622 !important;
  border: none !important;
  font-weight: bold;
  border-radius: 10px !important;
  box-shadow: 0 0 12px #00faff88;
  padding: 12px 22.4px;
  font-size: 17.6px;
  transition: transform 0.2s;
}

.refresh-btn:hover {
  transform: scale(1.05);
}

.refresh-btn .refresh-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  /* color: #aafaff; */
  font-size: 24px;
}

.students-progress-swal2-popup table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ccc;
  table-layout: fixed;
}

.students-progress-swal2-popup table th,
.students-progress-swal2-popup table td {
  border: 1px solid #ccc;
  padding: 10px 12px;
  text-align: center;
  vertical-align: middle;
  font-size: 17.6px;
}

/* thead 스타일 유지 */
.students-progress-swal2-popup table thead th {
  background-color: #e6faff;
  color: #001622;
  font-weight: bold;
  border-bottom: 1.5px solid #00faff55;
  padding: 10px 12px;
}

/* 첫 번째 열만 너비 지정 (예: 이름 열) */
.students-progress-swal2-popup table th:first-child,
.students-progress-swal2-popup table td:first-child {
  width: 15%;
  text-align: center;
  padding-left: 16px;
  white-space: nowrap;
}

progress {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  border: 1.5px solid #00faff;
  border-radius: 8px;
  background-color: #111827; /* 배경 */
  overflow: hidden;
}

/* 채워지는 바 (value) */
progress::-webkit-progress-value {
  background-color: #00faff; /* 채워지는 부분 */
  border-radius: 4px;
}

/* 남은 부분 (track) */
progress::-webkit-progress-bar {
  background-color: #111827; /* 남은 부분 */
}

/* 말풍선 스타일 */
.custom-intro-tooltip {
  background-color: rgba(10, 20, 30, 0.85) !important; /* 네이비 톤 배경 */
  border: 2px solid #00faffaa;
  box-shadow: 0 0 20px #00faff55;
  border-radius: 16px;
  color: #ffffff !important; /* 흰 글씨 */
  border-radius: 16px !important;
  font-family: "IBM Plex Sans KR", sans-serif;
  font-size: 16px;
  padding: 16px;
  box-shadow: 0 0 20px #00faff55 !important;
}

.custom-intro-tooltip .introjs-tooltiptext {
  color: #ffffff !important;
  text-align: center;
  word-break: keep-all;
}

/* 툴팁 제목 강조 (기본 구조는 h1 ~ h3로 들어갈 수 있음) */
.custom-intro-tooltip h3 {
  font-size: 28.8px;
  margin: 0;
  text-shadow: 0 0 10px #00faffcc !important;
}

/* 다음/이전/완료 버튼 스타일 */
.introjs-button {
  margin-top: 8px;
  padding: 16px;
  font-size: 19.2px;
  font-weight: bold;
  background: #00faff !important;
  color: #001622 !important;
  border: none !important;
  border-radius: 5px !important;
  box-shadow: 0 0 12px #00faff88;
  cursor: pointer;
  transition: transform 0.2s;
}

.introjs-button:hover {
  transform: scale(1.03);
}