/* class-management.css - 학급 관리 페이지 스타일 */

/* CSS 변수는 css-variables.css에서 통합 관리됩니다 */

/* 전체 레이아웃 스타일 - 너비를 1200px로 고정 */
.main-section {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* 대시보드 헤더 스타일 */
.class-dashboard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.page-title h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.page-title h1 i {
    color: var(--primary-color);
}

.page-title .subtitle {
    font-size: 1rem;
    color: var(--text-medium);
    margin: 0;
}

.dashboard-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* 대시보드 통계 카드 */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.stat-card {
    background-color: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    position: relative;
}

.stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--primary-color);
}

.stat-card.student-stat-card::after {
    background-color: var(--accent-color);
}

.stat-card.activity-stat-card::after {
    background-color: var(--success-color);
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: rgba(79, 70, 229, 0.1);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-right: 1.25rem;
    flex-shrink: 0;
}

.student-stat-card .stat-icon {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--accent-color);
}

.activity-stat-card .stat-icon {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.stat-content {
    flex: 1;
}

.stat-number {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 0.25rem 0;
    line-height: 1.2;
}

.stat-label {
    font-size: 1rem;
    color: var(--text-medium);
    margin: 0;
}

/* 클래스 목록 헤더 */
.classes-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.classes-list-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.classes-list-header h2 i {
    color: var(--primary-color);
}

.classes-filter {
    min-width: 200px;
}
/* 학급 정보 카드 - 단순화 및 정리 */
.class-info {
   background-color: var(--bg-white);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
   padding: 1.5rem;
   margin-bottom: 2rem;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.class-info:hover {
   transform: translateY(-3px);
   box-shadow: var(--shadow-lg);
}

.class-info-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 1.5rem;
   flex-wrap: wrap;
   gap: 1rem;
}

.class-name {
   font-size: 1.5rem;
   font-weight: 700;
   color: var(--text-dark);
   margin: 0;
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
}

.class-name .region-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: #6c757d;
  color: white;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 1rem; /* iOS zoom fix */
  font-weight: 500;
}

.class-name .region-badge i {
  color: white;
}

.class-name .year-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: #17a2b8;
  color: white;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 1rem; /* iOS zoom fix */
  font-weight: 500;
}

.class-name .year-badge i {
  color: white;
}

.class-name .school-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: var(--success-color, #28a745);
  color: white;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 1rem; /* iOS zoom fix */
  font-weight: 500;
}

.class-name .school-badge i {
  color: white;
}

.class-name .class-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: var(--primary-color, #4a90e2);
  color: white;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 1rem; /* iOS zoom fix */
  font-weight: 500;
}

.class-name .class-badge i {
  color: white;
}

.class-name .student-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: #fd7e14;
  color: white;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 1rem; /* iOS zoom fix */
  font-weight: 500;
}

.class-name .student-count-badge i {
  color: white;
}

/* 학급 통계 단순화 - 전체 학생 수만 표시 */
.class-stats {
   display: flex;
   align-items: center;
   gap: 1rem;
   margin-bottom: 1.5rem;
}

.class-stat {
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.stat-value {
   font-size: 1.5rem;
   font-weight: 700;
   color: var(--primary-color);
}

.stat-label {
   font-size: 1rem;
   color: var(--text-medium);
}

/* 학급 카드 (여러 학급 보기) */
.classes-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   gap: 1.5rem;
}

.class-card {
   background-color: var(--bg-white);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
   overflow: hidden;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   cursor: pointer;
}

.class-card:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-lg);
}

.class-card-header {
   background-color: var(--primary-color);
   color: white;
   padding: 1.5rem;
   position: relative;
   overflow: hidden;
}

.class-card-header::before {
   content: '';
   position: absolute;
   top: -50px;
   right: -50px;
   width: 100px;
   height: 100px;
   background-color: rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   z-index: 0;
}

.class-card-header h2 {
   margin: 0;
   font-size: 1.5rem;
   position: relative;
   z-index: 1;
}

.class-card-header p {
   margin: 0.5rem 0 0 0;
   opacity: 0.9;
   position: relative;
   z-index: 1;
   font-size: 1rem;
}

.class-card-header-icon {
   position: absolute;
   top: 1.25rem;
   right: 1.25rem;
   font-size: 2.25rem;
   opacity: 0.3;
}

.class-card-body {
   padding: 1.5rem;
}

.class-card-stats {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1.5rem;
   margin-bottom: 1.5rem;
}

.class-card-stat {
   text-align: center;
}

.class-card-stat-value {
   font-size: 2rem;
   font-weight: 700;
   color: var(--primary-color);
   transition: transform 0.2s ease;
}

.class-card:hover .class-card-stat-value {
   transform: scale(1.1);
}

.class-card-stat-label {
   font-size: 1rem;
   color: var(--text-medium);
}

.class-card-actions {
   display: flex;
   justify-content: space-between;
   gap: 1rem;
}

/* 칭호별 학생 수 표시 스타일 - 독립적인 컨테이너로 분리 */
.title-distribution-container {
   background-color: var(--bg-white);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
   padding: 1.5rem;
   margin-bottom: 2rem;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.title-distribution-container:hover {
   transform: translateY(-3px);
   box-shadow: var(--shadow-lg);
}

.title-distribution h3 {
   font-size: 1.25rem;
   margin-bottom: 1.5rem;
   color: var(--text-dark);
   display: flex;
   align-items: center;
   gap: 0.75rem;
}

.title-distribution h3 i {
   color: var(--primary-color);
}

.title-bars {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.title-bar {
   display: flex;
   align-items: center;
   gap: 1rem;
}

.title-label {
   display: flex;
   align-items: center;
   width: 120px;
   min-width: 120px;
   gap: 0.5rem;
   font-weight: 500;
}

.title-icon {
   width: 28px;
   height: 28px;
   object-fit: contain;
}

.title-bar-container {
   flex: 1;
   height: 28px;
   background-color: var(--bg-card);
   border-radius: var(--radius-md);
   position: relative;
   overflow: hidden;
}

.title-bar-fill {
   height: 100%;
   border-radius: var(--radius-md);
   transition: width 0.5s ease;
}

.title-bar-fill.level1 {
   background-color: var(--level-1-color);
}

.title-bar-fill.level2 {
   background-color: var(--level-2-color);
}

.title-bar-fill.level3 {
   background-color: var(--level-3-color);
}

.title-bar-fill.level4 {
   background-color: var(--level-4-color);
}

.title-bar-fill.level5 {
   background-color: var(--level-5-color);
}

.title-bar-fill.level6 {
   background-color: var(--level-6-color);
}

.title-count {
   position: absolute;
   right: 12px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 0.95rem;
   font-weight: 500;
   color: var(--text-dark);
}

/* 학생 목록 테이블 컨테이너 */
.students-container {
   background-color: var(--bg-white);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
   overflow: hidden;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.students-container:hover {
   transform: translateY(-3px);
   box-shadow: var(--shadow-lg);
}

.students-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1.5rem;
   border-bottom: 1px solid var(--border-color);
}

.students-header h2 {
   font-size: 1.25rem;
   margin: 0;
   display: flex;
   align-items: center;
   gap: 0.75rem;
}

.students-header h2 i {
   color: var(--primary-color);
}

.add-student-btn {
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

/* 필터 및 검색 */
.students-table-container {
   padding: 1.5rem;
   overflow-x: auto;
}

.filter-container {
   display: flex;
   gap: 1rem;
   margin-bottom: 1rem;
}

.search-container {
   position: relative;
   flex: 1;
}

.search-input {
   width: 100%;
   padding: 0.75rem 1rem 0.75rem 2.5rem;
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   font-size: 1rem;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input:focus {
   outline: none;
   border-color: var(--primary-color);
   box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.search-icon {
   position: absolute;
   left: 0.75rem;
   top: 50%;
   transform: translateY(-50%);
   color: var(--text-light);
}

.dropdown-filter {
   min-width: 150px;
   padding: 0.75rem 1rem;
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   font-size: 1rem;
   background-color: var(--bg-white);
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 1rem center;
   background-size: 1em;
   padding-right: 2.5rem;
}

.dropdown-filter:focus {
   outline: none;
   border-color: var(--primary-color);
   box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* 학생 테이블 */
.students-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 1rem;
}

.students-table th {
   text-align: left;
   padding: 1rem;
   border-bottom: 2px solid var(--border-color);
   color: var(--text-dark);
   font-weight: 600;
}

.students-table td {
   padding: 1rem;
   border-bottom: 1px solid var(--border-color);
   color: var(--text-medium);
}

.students-table tr:hover {
   background-color: var(--bg-light);
}

/* 학생 이름과 이메일 폰트 통일 */
.students-table .student-name,
.students-table .student-email {
   font-family: 'Noto Sans KR', sans-serif;
   font-weight: 500;
   color: var(--text-dark);
   font-size: 1rem;
}

.students-table .student-name {
   display: flex;
   align-items: center;
   gap: 0.75rem;
}

.students-table .student-avatar {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   object-fit: cover;
}

/* 학교 필드 읽기 전용 스타일 */
.school-readonly {
   background-color: var(--bg-card) !important;
   color: var(--text-medium) !important;
   cursor: not-allowed;
   font-weight: 500;
}

/* 비밀번호 초기화 버튼 스타일 */
.reset-password-btn {
   background-color: var(--accent-color);
   color: white;
   border: none;
   padding: 0.5rem 1rem;
   border-radius: var(--radius-md);
   font-size: 1rem; /* iOS zoom fix */
   font-weight: 500;
   cursor: pointer;
   transition: background-color 0.2s ease, transform 0.2s ease;
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.reset-password-btn:hover {
   background-color: var(--accent-dark);
   transform: translateY(-2px);
}

.reset-password-btn i {
   font-size: 1rem; /* iOS zoom fix */
}

/* 레벨 배지 크기 및 색상 조정 */
.level-badge {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   color: #1F2937;
   font-weight: 600;
   padding: 0.3rem 0.4rem;
   border-radius: 0.25rem;
   font-size: 0.75rem; /* 12px */
   line-height: 1.1;
   white-space: nowrap;
   min-width: 50px;
   max-width: 60px;
   text-align: center;
   border: 1px solid rgba(0, 0, 0, 0.1);
   vertical-align: middle;
   height: auto;
}

.level-badge .level-number {
   font-size: 1rem; /* iOS zoom fix */
   font-weight: 700;
   margin-bottom: 0.1rem;
}

.level-badge .level-name {
   font-size: 0.65rem;
   font-weight: 500;
}

/* 레벨별 배지 색상 */
.level-badge.level-1 {
   background-color: var(--level-1-color);
}

.level-badge.level-2 {
   background-color: var(--level-2-color);
}

.level-badge.level-3 {
   background-color: var(--level-3-color);
}

.level-badge.level-4 {
   background-color: var(--level-4-color);
}

.level-badge.level-5 {
   background-color: var(--level-5-color);
}

.level-badge.level-6 {
   background-color: var(--level-6-color);
}

.student-actions {
   display: flex;
   gap: 0.5rem;
}

.action-btn {
   background: none;
   border: none;
   font-size: 1rem;
   color: var(--text-medium);
   cursor: pointer;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background-color 0.2s ease, color 0.2s ease;
}

.action-btn:hover {
   background-color: var(--bg-card);
   color: var(--primary-color);
}

.action-btn.edit:hover {
   color: var(--primary-color);
}

.action-btn.delete:hover {
   color: var(--error-color);
}

/* 페이지네이션 */
.pagination {
   display: flex;
   justify-content: center;
   gap: 0.5rem;
   margin-top: 1.5rem;
}

.pagination-btn {
   width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   color: var(--text-medium);
   font-size: 1rem; /* iOS zoom fix */
   background-color: var(--bg-white);
   cursor: pointer;
   transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pagination-btn:hover {
   background-color: var(--bg-card);
}

.pagination-btn.active {
   background-color: var(--primary-color);
   color: white;
   border-color: var(--primary-color);
}

.pagination-btn.disabled {
   opacity: 0.5;
   cursor: not-allowed;
}

/* 학생 없음 메시지 */
.no-students-message {
   text-align: center;
   padding: 3rem 0;
   color: var(--text-light);
   font-style: italic;
}

/* 학급 없음 메시지 */
.no-classes-message {
   text-align: center;
   padding: 5rem 2rem;
   background-color: var(--bg-white);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
}

.no-classes-icon {
   font-size: 4rem;
   color: var(--text-light);
   margin-bottom: 1.5rem;
}

.no-classes-message h2 {
   margin-bottom: 1rem;
   color: var(--text-dark);
   font-size: 1.5rem;
}

.no-classes-message p {
   margin-bottom: 2rem;
   color: var(--text-medium);
   max-width: 600px;
   margin-left: auto;
   margin-right: auto;
   font-size: 1.125rem;
}

/* 모달 스타일 */
.modal {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.7);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.show {
   opacity: 1;
   visibility: visible;
}

.modal-content {
   background-color: #ffffff;
   background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
   border-radius: var(--radius-lg);
   width: 90%;
   max-width: 500px;
   max-height: 85vh;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
   overflow: hidden;
   transform: translateY(-20px);
   transition: transform 0.3s ease;
   position: relative;
   z-index: 1001;
   display: flex;
   flex-direction: column;
}

.modal.show .modal-content {
   transform: translateY(0);
}

.modal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1.25rem 1.5rem;
   border-bottom: 1px solid #e5e7eb;
   background-color: #ffffff;
}

.modal-header h3 {
   margin: 0;
   color: var(--text-dark);
   font-size: 1.25rem;
   display: flex;
   align-items: center;
   gap: 0.75rem;
}

.modal-header h3 i {
   color: var(--primary-color);
}

.close-modal-btn {
   background: none;
   border: none;
   font-size: 1.25rem;
   color: var(--text-light);
   cursor: pointer;
   transition: color 0.2s ease;
}

.close-modal-btn:hover {
   color: var(--text-dark);
}

.modal-body {
   padding: 1.5rem;
   background-color: #ffffff;
   color: #333333;
   overflow-y: auto;
   flex: 1;
   max-height: calc(85vh - 140px);
}

.form-group {
   margin-bottom: 1.25rem;
}

.form-label {
   display: block;
   margin-bottom: 0.5rem;
   color: #374151;
   font-weight: 500;
}

.required-field::after {
   content: " *";
   color: var(--error-color);
   font-weight: bold;
}

.form-control {
   width: 100%;
   padding: 0.75rem 1rem;
   border: 1px solid #e5e7eb;
   border-radius: var(--radius-md);
   font-size: 1rem;
   color: #333333;
   background-color: #ffffff;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus {
   outline: none;
   border-color: var(--primary-color);
   box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.modal-footer {
   display: flex;
   justify-content: flex-end;
   gap: 1rem;
   padding: 1rem 1.5rem;
   background-color: #f9fafb;
   border-top: 1px solid var(--border-color);
}

/* 비밀번호 초기화 모달 스타일 */
.reset-password-info {
   display: flex;
   align-items: flex-start;
   gap: 1rem;
   padding: 1rem;
   background-color: var(--bg-light);
   border-radius: var(--radius-md);
   margin-bottom: 1rem;
}

.info-icon {
   font-size: 2rem;
   color: var(--info-color);
   flex-shrink: 0;
}

.info-content h4 {
   margin: 0 0 0.5rem 0;
   color: var(--text-dark);
   font-size: 1.1rem;
}

.info-content p {
   margin: 0 0 0.5rem 0;
   color: var(--text-medium);
   line-height: 1.5;
}

.warning-text {
   color: var(--accent-color);
   font-weight: 500;
   font-size: 1rem; /* iOS zoom fix */
}

/* 버튼 스타일 */
.primary-btn, .secondary-btn, .accent-btn {
   padding: 0.75rem 1.25rem;
   border-radius: var(--radius-md);
   font-size: 1rem;
   font-weight: 500;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
   text-decoration: none;
}

.primary-btn {
   background-color: var(--primary-color);
   color: white;
   border: none;
}

.primary-btn:hover {
   background-color: var(--primary-dark);
   transform: translateY(-2px);
   box-shadow: 0 4px 6px rgba(79, 70, 229, 0.25);
}

.secondary-btn {
   background-color: var(--bg-card);
   color: var(--text-medium);
   border: 1px solid var(--border-color);
}

.secondary-btn:hover {
   background-color: var(--border-color);
   transform: translateY(-2px);
}

.accent-btn {
   background-color: var(--accent-color);
   color: white;
   border: none;
}

.accent-btn:hover {
   background-color: var(--accent-dark);
   transform: translateY(-2px);
   box-shadow: 0 4px 6px rgba(245, 158, 11, 0.25);
}

/* 받아쓰기 모달 스타일 */
#dictationModal .modal-content {
   max-width: 600px;
}

#dictationSentences {
   font-family: 'Noto Sans KR', sans-serif;
   min-height: 200px;
   resize: vertical;
}

/* 토스트 메시지 스타일 */
#toastContainer {
   position: fixed;
   bottom: 2rem;
   right: 2rem;
   z-index: 1000;
}

.toast {
   padding: 1rem 1.5rem;
   background-color: var(--bg-white);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-lg);
   margin-top: 1rem;
   display: flex;
   align-items: center;
   gap: 1rem;
   animation: fadeInUp 0.3s ease;
   max-width: 350px;
   opacity: 1;
   transition: opacity 0.3s ease;
}

.toast.success {
   border-left: 4px solid var(--success-color);
}

.toast.error {
   border-left: 4px solid var(--error-color);
}

.toast.info {
   border-left: 4px solid var(--info-color);
}

.toast-icon {
   font-size: 1.5rem;
}

.toast.success .toast-icon {
   color: var(--success-color);
}

.toast.error .toast-icon {
   color: var(--error-color);
}

.toast.info .toast-icon {
   color: var(--info-color);
}

.toast-content {
   flex: 1;
}

.toast-title {
   font-weight: 600;
   margin-bottom: 0.25rem;
   color: var(--text-dark);
}

.toast-message {
   font-size: 1rem; /* iOS zoom fix */
   color: var(--text-medium);
}

@keyframes fadeInUp {
   from {
       opacity: 0;
       transform: translateY(20px);
   }
   to {
       opacity: 1;
       transform: translateY(0);
   }
}

/* 로딩 화면 */
.loading {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(249, 250, 251, 0.9);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1000;
   backdrop-filter: blur(5px);
   transition: background-color 0.3s ease;
}

body.dark-mode .loading {
   background-color: rgba(31, 41, 55, 0.9);
}

.loader-container {
   text-align: center;
   background-color: var(--bg-white);
   padding: 2rem;
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg);
   max-width: 300px;
   width: 100%;
}

.loader {
   width: 60px;
   height: 60px;
   border: 4px solid var(--bg-card);
   border-top: 4px solid var(--primary-color);
   border-radius: 50%;
   margin: 0 auto 1.5rem;
   animation: spin 1.5s linear infinite;
}

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

.loading-text {
   color: var(--text-dark);
   font-size: 1.1rem;
   font-weight: 500;
}

/* 학생 정보 로딩 모달 - 진행 상황 표시 */
.students-loading-modal {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.8);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 2000;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease, visibility 0.3s ease;
}

.students-loading-modal.show {
   opacity: 1;
   visibility: visible;
}

.students-loading-content {
   background-color: var(--background-color);
   padding: 2rem;
   border-radius: var(--border-radius-lg);
   box-shadow: var(--shadow-lg);
   text-align: center;
   max-width: 500px;
   width: 90%;
   transform: translateY(20px);
   transition: transform var(--transition-normal);
   overflow: hidden;
}

.students-loading-modal.show .students-loading-content {
   transform: translateY(0);
}

.students-loading-spinner {
   width: 50px;
   height: 50px;
   border: 4px solid var(--bg-light);
   border-top: 4px solid var(--primary-color);
   border-radius: 50%;
   margin: 0 auto 1.5rem;
   animation: spin 1.2s linear infinite;
}

.students-loading-text {
   color: var(--text-color);
   font-size: 1.1rem;
   font-weight: 600;
   margin: 0 0 1rem 0;
   text-align: center;
}

.students-loading-progress {
   color: var(--text-medium);
   font-size: 1rem; /* iOS zoom fix */
   margin: 0.5rem 0;
   min-height: 1.2rem; /* 진행 상황 텍스트 공간 확보 */
}

.students-loading-bar {
   width: 100%;
   height: 6px;
   background-color: var(--bg-card);
   border-radius: 3px;
   overflow: hidden;
   margin: 1rem 0;
}

.students-loading-bar-fill {
   height: 100%;
   background-color: var(--primary-color);
   width: 0%;
   transition: width 0.3s ease;
   border-radius: 3px;
}

/* 반응형 레이아웃 */
@media (max-width: 1280px) {
   .main-section {
       max-width: 1200px !important;
   }
}

@media (max-width: 992px) {
   .dashboard-stats {
       grid-template-columns: repeat(2, 1fr);
   }
   
   .activity-stat-card {
       grid-column: 1 / -1;
   }
   
   .main-section {
       max-width: 95% !important;
       padding: 0 1rem;
   }
}

@media (max-width: 768px) {
   .class-dashboard-header {
       flex-direction: column;
   }
   
   .dashboard-actions {
       width: 100%;
       margin-top: 1rem;
   }
   
   .dashboard-stats {
       grid-template-columns: 1fr;
   }
   
   .students-table th:nth-child(4),
   .students-table td:nth-child(4) {
       display: none;
   }
   
   .filter-container {
       flex-direction: column;
   }
   
   .class-stats {
       gap: 1rem;
       flex-direction: column;
       align-items: flex-start;
   }

   .class-stat {
       flex-direction: row;
       align-items: center;
       gap: 0.5rem;
   }

   .stat-value {
       margin-right: 0.5rem;
   }
   
   .class-info-header {
       flex-direction: column;
       align-items: flex-start;
   }
   
   .modal-content {
       width: 95%;
       max-height: 90vh;
   }
   
   .modal-body {
       max-height: calc(90vh - 120px);
       padding: 1rem;
   }
   
   .title-label {
       width: 100px;
       min-width: 100px;
   }
}

@media (max-width: 480px) {
   .page-title h1 {
       font-size: 1.75rem;
   }
   
   .stat-icon {
       width: 50px;
       height: 50px;
       font-size: 1.5rem;
   }
   
   .stat-number {
       font-size: 2rem;
   }
   
   .class-card-stat-value {
       font-size: 1.75rem;
   }
   
   .students-header {
       flex-direction: column;
       align-items: flex-start;
       gap: 1rem;
   }
   
   .add-student-btn {
       width: 100%;
       justify-content: center;
   }
   
   .students-table th:nth-child(4),
   .students-table td:nth-child(4) {
       display: none;
   }
   
   .action-btn {
       width: 28px;
       height: 28px;
       font-size: 1rem; /* iOS zoom fix */
   }
   
   .modal-footer {
       flex-direction: column-reverse;
   }
   
   .modal-footer button {
       width: 100%;
       justify-content: center;
   }
   
   .title-label {
       width: 80px;
       min-width: 80px;
       font-size: 1rem; /* iOS zoom fix */
   }
   
   .title-icon {
       width: 22px;
       height: 22px;
   }
   
   .title-count {
       right: 8px;
       font-size: 1rem; /* iOS zoom fix */
   }
}

/* 다크모드에서도 모달은 항상 밝은 배경 유지 */
body.dark-mode .modal-content {
   background-color: #ffffff !important;
   background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
}

body.dark-mode .modal-header {
   background-color: #ffffff !important;
   border-bottom-color: #e5e7eb !important;
}

body.dark-mode .modal-header h3 {
   color: #1f2937 !important;
}

body.dark-mode .modal-body {
   background-color: #ffffff !important;
   color: #333333 !important;
}

body.dark-mode .modal-footer {
   background-color: #f9fafb !important;
   border-top-color: #e5e7eb !important;
}

body.dark-mode .form-label {
   color: #374151 !important;
}

body.dark-mode .form-control {
   background-color: #ffffff !important;
   color: #333333 !important;
   border-color: #e5e7eb !important;
}

body.dark-mode .form-control:focus {
   background-color: #ffffff !important;
   border-color: var(--primary-color) !important;
}

body.dark-mode .close-modal-btn {
   color: #6b7280 !important;
}

body.dark-mode .close-modal-btn:hover {
   color: #1f2937 !important;
}