/* [1] 기본 설정 */
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

  :root {
    /* CheckED 스타일 파스텔 테마 */
    --primary-color: #8B5CF6;   /* 메인: 부드러운 보라색 */
    --primary-hover: #7C3AED;   /* 호버: 진한 보라색 */
    --secondary-color: #A78BFA; /* 서브: 연한 보라색 */
    --accent-color: #EC4899;    /* 강조: 핑크색 */
    
    --bg-gradient: linear-gradient(135deg, #E0C3FC 0%, #8EC5FC 100%); /* 배경 그라디언트 */
    --glass-bg: rgba(255, 255, 255, 0.85); /* 카드 배경 (반투명) */
    --glass-border: 1px solid rgba(255, 255, 255, 0.8);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
    
    --text-main: #1F2937;
    --text-sub: #6B7280;
    --radius-card: 24px;       /* 둥근 모서리 */
    --radius-input: 12px;
  }

  * { box-sizing: border-box; }
  
  body { 
    margin: 0 auto; 
    padding: 20px; 
    font-family: 'Noto Sans KR', sans-serif; 
    background: var(--bg-gradient); 
    background-attachment: fixed; 
    background-size: cover;
    color: var(--text-main); 
    width: 98%; 
    min-height: 100vh; 
    line-height: 1.6;
    overflow-x: hidden; 
  }
  
  /* 스크롤바 커스텀 */
  ::-webkit-scrollbar { width: 8px; height: 8px; } 
  ::-webkit-scrollbar-track { background: transparent; } 
  ::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.3); border-radius: 10px; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.6); }

  /* [2] 헤더 스타일 */
  header { 
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: var(--glass-border);
    border-radius: var(--radius-card);
    box-shadow: var(--glass-shadow);
    padding: 15px 30px; 
    margin-bottom: 10px;
    display: flex; 
    justify-content: center; 
    align-items: center; 
    position: relative;
  }
  
  .header-left {
    display: flex;
    flex-direction: row; 
    align-items: center;
    justify-content: center;
    gap: 20px; 
  }

  .header-logo { 
    height: 60px; 
    width: auto; 
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); 
    object-fit: contain;
  }
  
  .header-text-group { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    justify-content: center;
  }
  
  header h1 { 
    margin: 0; 
    font-size: 1.8rem; 
    background: linear-gradient(to right, #6D28D9, #DB2777); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800; 
    letter-spacing: -0.5px;
    line-height: 1.2;
  }
  
  #today-date-display { 
    margin: 0;
    font-size: 0.95rem; 
    color: var(--text-sub); 
    font-weight: 500; 
  }
  
  /* [3] 탭 메뉴 */
  .tabs { 
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap; 
    gap: 10px; 
    margin-bottom: 10px; 
    background: transparent;
    padding: 0;
  }
  
  .tab-btn { 
    background: rgba(255, 255, 255, 0.4); 
    border: 1px solid rgba(255,255,255,0.6); 
    color: var(--text-sub); 
    padding: 10px 24px; 
    font-size: 1rem; 
    cursor: pointer; 
    transition: all 0.2s ease; 
    border-radius: 50px; 
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }
  
  .tab-btn:hover { 
    background: rgba(255, 255, 255, 0.9); 
    transform: translateY(-2px);
    color: var(--primary-color);
  }
  
  .tab-btn.active { 
    background: var(--primary-color); 
    color: #ffffff; 
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
  }
  
  .admin-tab-btn { background: rgba(0,0,0,0.05); }

  /* [4] 메인 레이아웃 */
  main { 
    padding: 10px 5px; 
    padding-bottom: 40px;
    height: calc(100vh - 180px); 
    overflow-y: auto;
  }
  
  .tab-content { display: none; animation: slideUp 0.4s ease-out; }
  .tab-content.active { display: block; }

  @keyframes slideUp { 
    from { opacity: 0; transform: translateY(20px); } 
    to { opacity: 1; transform: translateY(0); } 
  }
  
  /* 그리드 시스템 */
  .top-row, .bottom-row, .extra-row { display: flex; gap: 24px; width: 100%; align-items: stretch; margin-bottom: 24px; }
  .top-item-left { flex: 2.5; } .top-item-right { flex: 7.5; }
  .bottom-item-val-50 { flex: 5; } .bottom-item-val-23 { flex: 2.3; } .bottom-item-val-27 { flex: 2.7; }
  .extra-item-70 { flex: 7; } .extra-item-30 { flex: 3; }
  
  /* [5] 카드 스타일 */
  .card { 
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: var(--glass-border);
    border-radius: var(--radius-card);
    padding: 24px; 
    box-shadow: var(--glass-shadow); 
    display: flex; 
    flex-direction: column; 
    transition: transform 0.3s ease;
  }
  
  .card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(31, 38, 135, 0.1); }

  .card-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 20px; 
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(0,0,0,0.1);
  }
  
  .card h2 { 
    margin: 0; 
    font-size: 1.25rem; 
    color: var(--text-main); 
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    padding: 0;
  }
  
  .card h2::before {
    content: ''; display: block; width: 6px; height: 20px;
    background: var(--primary-color); border-radius: 10px; margin-right: 5px;
  }

  .op-box { 
    background: rgba(255, 255, 255, 0.6); 
    border-radius: 16px; 
    padding: 20px; 
    border: 1px solid rgba(255,255,255,0.8);
    font-size: 0.95rem;
    flex: 1; 
  }

  /* [6] 주간 일정 */
  .weekly-grid { display: flex; gap: 15px; overflow-x: auto; padding: 5px; scroll-behavior: smooth; }
  
  .day-card { 
    min-width: 140px; flex: 1; 
    background: rgba(255,255,255,0.7); 
    border: 1px solid rgba(255,255,255,0.8);
    border-radius: 16px; 
    padding: 15px; 
    display: flex; flex-direction: column; 
    transition: 0.2s; cursor: pointer;
  }
  
  .day-card:hover { background: white; transform: scale(1.02); box-shadow: 0 4px 12px rgba(0,0,0,0.05); border-color: var(--primary-color); }
  .day-card.today { background: #FFF7ED; border: 2px solid var(--accent-color); }
  
  .day-date { font-weight: 700; margin-bottom: 8px; color: var(--text-sub); font-size: 0.9rem; border-bottom: 1px solid rgba(0,0,0,0.05); padding-bottom:5px; }
  .holiday-text { color: #EF4444 !important; }
  .day-event { color: var(--primary-color); font-weight: 600; background: rgba(139, 92, 246, 0.1); padding: 2px 6px; border-radius: 6px; display:inline-block; margin-bottom:4px; font-size: 0.85rem;}
  .day-activity { font-size: 0.85rem; color: #444; margin-top: 5px; }

  /* [7] 테이블 */
  .styled-table { 
    width: 100%; border-collapse: separate; border-spacing: 0; 
    background: rgba(255,255,255,0.5); border-radius: 16px; overflow: hidden; 
  }
  
  .styled-table th { 
    background: rgba(139, 92, 246, 0.1); 
    color: var(--primary-color); 
    padding: 12px 10px; 
    font-weight: 700; 
    border-bottom: 1px solid rgba(139, 92, 246, 0.1);
  }
  
  .styled-table td { 
    padding: 10px; 
    border-bottom: 1px solid rgba(0,0,0,0.05); 
    color: var(--text-main); font-size: 0.9rem; vertical-align: middle;
  }
  
  .styled-table tr:hover td { background: rgba(255,255,255,0.8); }

  /* [8] 링크 리스트 스타일 수정 (높이 및 간격 축소) */
  .dashboard-link-item { 
    /* padding: 위아래 7px, 좌우 10px (기존 12px에서 축소 -> 높이 줄어듦) */
    padding: 7px 10px; 
    
    /* margin-bottom: 4px (기존 8px에서 축소 -> 사이 간격 줄어듦) */
    margin-bottom: 4px; 
    
    background: white; 
    border-radius: 12px; 
    border: 1px solid rgba(0,0,0,0.05); 
    transition: 0.2s; 
  }

  .dashboard-link-item:hover { 
    background: #F3E8FF; 
    transform: translateX(3px); 
  }

  .dashboard-link-content { 
    text-decoration: none; 
    color: var(--text-main); 
    font-weight: 500; 
    display: flex; 
    align-items: center; 
    font-size: 0.9rem; /* 글자 크기도 살짝 조절하여 균형 맞춤 */
  }

  /* 아이콘 크기도 살짝 조절 */
  .link-icon { 
    margin-right: 8px; 
    color: var(--primary-color); 
    background: rgba(139, 92, 246, 0.1); 
    padding: 4px; /* 아이콘 배경 여백 축소 */
    border-radius: 50%; 
    font-size: 1rem; /* 아이콘 크기 축소 */
  }

  /* [9] 버튼 & 입력 */
  .add-btn { color: var(--secondary-color); font-size: 2rem; transition: 0.2s; }
  .add-btn:hover { color: var(--primary-color); transform: scale(1.1); }
  
  .btn-confirm, .btn-cancel, .btn-danger, .sub-tab-btn {
    border: none; padding: 10px 20px; border-radius: 50px;
    font-weight: 600; font-size: 0.9rem; cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); transition: 0.2s;
  }
  
  .btn-confirm { background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)); color: white; }
  .btn-confirm:hover { box-shadow: 0 6px 15px rgba(139, 92, 246, 0.3); transform: translateY(-1px); }
  .btn-cancel { background: white; color: var(--text-sub); border: 1px solid #ddd; }
  .btn-danger { background: #EF4444; color: white; }
  
  .sub-tab-btn { background: white; border: 1px solid #ddd; color: var(--text-sub); margin: 0 5px; }
  .sub-tab-btn.active { background: var(--primary-color); color: white; border-color: var(--primary-color); }

  input[type="text"], input[type="password"], input[type="date"], select, textarea {
    width: 100%; padding: 12px 15px; 
    border: 1px solid #E5E7EB; border-radius: var(--radius-input);
    background: #F9FAFB; color: var(--text-main);
    font-family: inherit; font-size: 0.95rem; transition: 0.2s;
  }
  input:focus, textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1); background: white; }

  /* [10] 모달 스타일 (수정됨) */
  .hidden { display: none !important; }

  #modal-overlay,
  #custom-alert-overlay, 
  #custom-confirm-overlay, 
  #op-edit-modal, 
  #other-edit-modal, 
  #approval-edit-modal, 
  #timetable-edit-modal, 
  #student-edit-modal, 
  #site-manage-modal, 
  #site-input-modal,
  #daily-edit-modal, 
  #general-input-modal, 
  #substitute-manage-modal, 
  #substitute-input-modal, 
  #link-manage-modal, 
  #link-input-modal,
  #dept-link-modal, 
  #dept-input-modal,
  #monthly-edit-modal,
  #link-insert-modal,
  #vacation-modal,
  #school-dept-input-modal,
  #holiday-input-modal, 
  #event-input-modal, 
  #user-input-modal,
  #day-detail-modal {
      position: fixed; 
      top: 0; 
      left: 0; 
      width: 100vw; 
      height: 100vh;
      background: rgba(0,0,0,0.4); 
      display: flex; 
      justify-content: center; 
      align-items: center; 
      backdrop-filter: blur(5px);
      z-index: 10000;
  }

  /* 2차 모달 z-index 상향 */
  #site-input-modal, #substitute-input-modal, #link-input-modal, #dept-input-modal, #link-insert-modal, 
  #holiday-input-modal, #event-input-modal, #user-input-modal, #school-dept-input-modal, #day-detail-modal {
      z-index: 12000;
  }
  
  /* 알림창 최상위 */
  #custom-alert-overlay, #custom-confirm-overlay, #toast-container { z-index: 20000 !important; }

  .custom-alert-box, .editor-modal-box, #modal-box {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid white;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    border-radius: 28px;
    padding: 30px;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    max-height: 90vh;
    overflow-y: auto;
  }
  
  @keyframes popIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

  /* [11] 관리자 화면 */
  .admin-sub-content { display: none; } 
  .admin-sub-content.active { display: block; animation: slideUp 0.3s ease-out; }
  
  .admin-panel { max-width: 600px; margin: 0 auto; text-align: center; } 
  .admin-panel-wide { max-width: 1000px; margin: 0 auto; text-align: center; }
  .admin-row-layout { display: flex; gap: 20px; justify-content: center; align-items: stretch; flex-wrap: wrap; } 
  .admin-row-layout .admin-panel { flex: 1; min-width: 300px; margin: 0; }
  
  /* 학교자료 레이아웃 */
  .school-layout { display: flex; gap: 24px; align-items: flex-start; }
  .school-left-panel { flex: 0 0 450px; }
  .school-right-panel { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .dept-column { display: flex; flex-direction: column; gap: 24px; }

  /* [수정] 토스트 알림 (화면 정중앙 배치) */
#toast-container {
  visibility: hidden; 
  min-width: 300px; 
  background-color: white; 
  color: #333; 
  text-align: center;
  border-radius: 50px; 
  position: fixed; 
  z-index: 20000; 
  
  /* ▼ [핵심 변경] 위치를 80% -> 50%로 변경 */
  top: 50% !important; 
  left: 50% !important; 
  
  /* 정중앙을 맞추기 위한 좌표 이동 */
  transform: translate(-50%, -50%) !important;
  
  box-shadow: 0 10px 30px rgba(0,0,0,0.15); 
  opacity: 0; 
  transition: 0.3s;
  border: 1px solid rgba(0,0,0,0.05);
}

#toast-container.show { 
  visibility: visible; 
  opacity: 1; 
  /* 나타날 때도 중앙 유지 */
  transform: translate(-50%, -50%) !important; 
}
  .toast-content { padding: 15px 25px; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: bold; }
  .toast-icon { color: #4CAF50; font-size: 1.5rem; }

  /* 기타 스타일 */
  .modal-close-x { float: right; cursor: pointer; color: var(--text-sub); font-size: 1.5rem; transition: 0.2s; }
  .modal-close-x:hover { color: #EF4444; transform: rotate(90deg); }
  .drag-handle { cursor: grab; color: #aaa; margin-right: 5px; }
  
  /* 사이트 링크 스타일 */
  .site-link-style { display: inline-flex; align-items: center; text-decoration: none !important; color: var(--primary-color); font-weight: bold; transition: 0.2s; }
  .site-link-style:hover { color: var(--accent-color); transform: translateX(3px); }
  .site-link-style.no-link { color: #333; font-weight: normal; cursor: default; } .site-link-style.no-link:hover { color: #333; transform: none; }
  .site-link-style .material-icons { font-size: 1.2rem; margin-right: 8px; }
  
  /* ★달력 스타일 수정됨 (클래스 이름 일치)★ */
  .calendar-wrapper { background: white; border-radius: 24px; padding: 20px; box-shadow: var(--glass-shadow); }
  .cal-header-cell { background: #F3E8FF; color: var(--primary-color); border-radius: 8px; margin-bottom: 5px; padding: 10px; text-align: center; font-weight: bold;}
  
  /* [수정] 클래스 이름을 .cal-grid -> .calendar-grid로 변경 */
  .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
  
  .cal-cell { border-radius: 12px; transition: 0.2s; border: 1px solid #f0f0f0; min-height: 100px; padding: 5px; display: flex; flex-direction: column; background: white; }
  .cal-cell:hover { background: #F9FAFB; border-color: var(--primary-color); }
  .cal-date { border-bottom:1px dashed #eee; display:block; margin-bottom:5px; }

  /* 반응형 (모바일) */
  @media (max-width: 992px) {
    .top-row, .bottom-row, .extra-row, .school-layout, .school-right-panel { flex-direction: column; }
    .top-item-left, .top-item-right, .school-left-panel, .dept-column { width: 100%; flex: auto; }
    header { flex-direction: column; text-align: center; }
    .header-left { flex-direction: column; gap:10px; }
    .tabs { gap: 5px; } .tab-btn { padding: 8px 16px; font-size: 0.9rem; }
  }
/* [재수정] 일과운영 수정 창 스타일 최적화 */

/* 1. 모달 창 너비 축소 (600px) */
#op-edit-modal .editor-modal-box {
    max-width: 600px !important; 
    width: 95% !important;
}

/* 2. 날짜 선택 창 너비 (150px) */
#op-edit-date {
    width: 150px !important;
    display: inline-block;
}

/* 3. 입력창(에디터) 디자인 조정 */
#op-edit-modal .editor-content {
    min-height: 300px !important;  /* 높이 300px 고정 */
    max-height: 60vh !important;   
    
    border: 1px solid #aaa !important; /* 테두리를 진한 회색으로 보이게 설정 */
    border-radius: 4px !important;
    
    margin-top: 5px !important;    /* 위쪽 툴바와 5px 간격 띄우기 */
    background-color: white !important;
    cursor: text !important;       /* 마우스 올리면 커서 모양 확실하게 표시 */
    padding: 10px !important;
}

/* 입력창 클릭 시 파란색 테두리로 강조 (커서 위치 확인 용이) */
#op-edit-modal .editor-content:focus {
    border-color: #1976D2 !important;
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2) !important;
    outline: none !important;
}

/* 1. 모달 박스 크기 및 기본 설정 */
/* 1. 모달 박스 크기 (그대로 유지) */
#day-detail-modal-box {
    width: 95% !important;
    max-width: 1000px !important;
    padding: 40px 30px !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
}

/* 2. 테이블 스타일 (구분선 명확하게) */
.detail-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    border-top: 2px solid rgba(139, 92, 246, 0.2); /* 상단 구분선도 연한 보라색으로 */
}

.detail-table th {
    /* [복구] 헤더 배경을 파스텔 보라색으로 변경 */
    background: rgba(139, 92, 246, 0.1) !important; 
    color: var(--primary-color) !important; /* 글자색 보라색 */
    font-weight: bold;
    padding: 15px 10px !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.1);
    text-align: center !important;
}

.detail-table td {
    padding: 15px 10px !important;
    border-bottom: 1px solid #eee; /* 행 구분선은 연한 회색 유지 */
    vertical-align: middle;
    font-size: 1rem;
    color: #333;
}

/* 3. 컬럼별 정렬 (그대로 유지) */
.detail-activity-cell {
    text-align: left !important;
    line-height: 1.6;
}

.detail-manager-cell {
    text-align: center !important;
    color: #666;
    white-space: nowrap;
}

/* [수정] 주간 일정 내용 스타일 개선 (줄바꿈 반영) */
.day-activity { 
    color: #333; 
    white-space: pre-wrap !important; /* 입력한 줄바꿈(Enter) 그대로 표시 */
    word-break: break-all; 
    line-height: 1.6 !important;      /* 줄 간격을 넓혀서 읽기 편하게 */
    text-align: left !important;      /* 왼쪽 정렬 강제 */
    margin-top: 8px !important;
    font-size: 0.9rem !important;     /* 글자 크기 약간 조정 */
    display: block;
}

/* 박스 내부 정렬 보정 */
.day-content {
    text-align: left !important;
    padding: 0 2px;
}

/* [수정] 각종 링크 관리 창 너비 확대 (자료 관리 창과 동일하게 맞춤) */
#link-manage-modal .editor-modal-box {
    width: 90% !important;        /* 화면의 90%를 차지 */
    max-width: 1200px !important; /* 최대 1200px까지 늘어남 */
}

/* [추가] 결재라인 수정 창 스타일 개선 */

/* 1. 모달 너비 확대 (기존 600px -> 800px로 약 130% 확대) */
#approval-edit-modal .editor-modal-box {
    max-width: 800px !important;
    width: 95% !important;
}

/* 2. 입력창 디자인 (테두리 진하게, 위쪽 간격 5px 추가) */
#approval-editor.editor-content {
    border: 1px solid #999 !important; /* 진한 회색 테두리 */
    margin-top: 5px !important;        /* 툴바와 5px 간격 */
    min-height: 400px !important;      /* 높이도 넉넉하게 확보 */
}

/* [추가] 기타 안내사항 수정 창 스타일 개선 (결재라인과 동일) */

/* 1. 모달 너비 확대 (800px) */
#other-edit-modal .editor-modal-box {
    max-width: 800px !important;
    width: 95% !important;
}

/* 2. 입력창 디자인 (진한 테두리, 간격, 높이 확보) */
#other-editor.editor-content {
    border: 1px solid #999 !important; /* 진한 회색 테두리 */
    margin-top: 5px !important;        /* 툴바와 5px 간격 */
    min-height: 400px !important;      /* 높이 400px 확보 */
}

/* 1. 결재라인/위임전결 입력창 */
#approval-editor.editor-content {
    padding: 10px !important;       /* 안쪽 여백 10px 추가 */
    line-height: 1.5 !important;    /* 줄 간격도 살짝 여유 있게 */
}

/* 2. 기타 안내사항 입력창 */
#other-editor.editor-content {
    padding: 10px !important;       /* 안쪽 여백 10px 추가 */
    line-height: 1.5 !important;    /* 줄 간격도 살짝 여유 있게 */
}

/* [추가] 월중행사 테이블 스타일 개선 */

/* 1. 평일(기본) 행 배경색을 흰색으로 지정 */
/* (토/일/공휴일 등은 별도의 클래스나 인라인 스타일이 적용되어 있다면 그것이 우선 적용됩니다) */
#month-tab-content table tbody tr {
    background-color: white;
}

/* 2. 컬럼별 정렬 설정 */
/* 날짜(1), 요일(2), 행사(3), 담당자(5) -> 중앙 정렬 */
#month-tab-content table td:nth-child(1), 
#month-tab-content table td:nth-child(2), 
#month-tab-content table td:nth-child(3), 
#month-tab-content table td:nth-child(5) {
    text-align: center !important;
}

/* 주요활동(4), 비고(6) -> 왼쪽 정렬 (내용이 길어서 읽기 편하게) */
#month-tab-content table td:nth-child(4),
#month-tab-content table td:nth-child(6) {
    text-align: left !important;
    padding-left: 10px !important; /* 왼쪽 여백 살짝 줌 */
}

/* [수정] 월간 달력 레이아웃 및 텍스트 스타일 개선 */

/* 1. 달력 전체 틀 (가로 7칸 균등 분할 강제) */
#cal-body.calendar-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important; /* 무조건 1:1:1... 비율 */
    width: 100% !important;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    background: white;
    gap: 0 !important; /* 셀 사이 간격 제거 */
}

/* 2. 요일 헤더 (일, 월, 화...) */
.cal-header-cell {
    background: #F3E8FF; /* 연한 보라색 배경 */
    color: #7C3AED;      /* 진한 보라색 글씨 */
    font-weight: bold;
    text-align: center;
    padding: 8px 0;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

/* 3. 날짜 칸 디자인 */
.cal-cell {
    background: white;
    min-height: 100px;  /* 칸 최소 높이 */
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 4px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;   /* 내용이 넘쳐도 칸 깨짐 방지 */
}

/* 4. [핵심] 주요활동 내용 스타일 */
.cal-activity {
    display: block;
    width: 100%;
    margin-top: 3px;
    
    /* ▼ 줄바꿈 및 글자 크기 설정 */
    white-space: pre-wrap !important; /* 줄바꿈(Enter) 적용 */
    word-break: break-all;            /* 긴 단어 줄바꿈 */
    font-size: 0.75rem !important;    /* 글자 크기 축소 (12px 정도) */
    line-height: 1.3 !important;      /* 줄 간격 좁게 */
    color: #444;
    text-align: left;
}

/* 5. 행사 및 휴업일 스타일 */
.cal-event {
    display: block;
    font-size: 0.8rem;
    font-weight: bold;
    color: #1976D2; /* 파란색 */
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-holiday {
    display: block;
    font-size: 0.8rem;
    font-weight: bold;
    color: #D32F2F; /* 빨간색 */
    margin-bottom: 2px;
}

#monthly-edit-modal .editor-modal-box {
    width: 95% !important;        /* 화면 너비의 95%까지 사용 */
    max-width: 1600px !important; /* 최대 1600px까지 늘어남 (기존 대비 대폭 확대) */
}

/* [추가] 사이트/계정 테이블 정렬 스타일 */
/* 2번째(ID), 3번째(PW), 4번째(비고) 컬럼을 가운데 정렬 */
#edu-site-table th:nth-child(2), #edu-site-table td:nth-child(2),
#edu-site-table th:nth-child(3), #edu-site-table td:nth-child(3),
#edu-site-table th:nth-child(4), #edu-site-table td:nth-child(4) {
    text-align: center !important;
}

/* 1. 사용자 프로필 카드 너비 조정 (50% -> 40%로 축소) */
#tab-user-info .user-profile-container {
    width: 40% !important;        /* 너비 40% */
    min-width: 350px !important;  /* 너무 작아지지 않게 최소폭 설정 */
    margin: 30px auto !important; /* 화면 중앙 정렬 */
    padding: 40px !important;
    border-radius: 30px !important;
}

/* 2. 보유 권한 목록 컨테이너 (왼쪽 정렬 강제) */
#user-profile-perms {
    text-align: left !important; 
    margin-top: 10px;
}

/* 3. 보유 권한 배지 스타일 (연한 보라색 버튼) */
.perm-badge {
    display: inline-block;
    padding: 8px 16px !important;
    margin: 4px !important;
    border-radius: 50px !important;
    background-color: #EDE9FE !important; /* 연한 배경 */
    color: #7C3AED !important;            /* 진한 글씨 */
    font-weight: bold !important;
    font-size: 0.9rem !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

/* [추가] 알림창 내부(아이콘, 글자, 버튼) 중앙 정렬 */
.custom-alert-box {
    text-align: center !important;
}

/* [추가] 관리자 설정 서브 탭(버튼) 중앙 정렬 */
.admin-sub-tabs {
    display: flex !important;
    justify-content: center !important; /* 가로 중앙 정렬 */
    gap: 10px !important;               /* 버튼 사이 간격 */
    margin-bottom: 20px !important;     /* 아래쪽 여백 */
    flex-wrap: wrap !important;         /* 화면이 좁으면 줄바꿈 */
}

/* [추가] 로그인 모달 입력창과 버튼 사이 간격 넓히기 */
#modal-box .modal-buttons {
    margin-top: 20px !important;  /* 기존 간격 없음에서 30px로 확대 */
}

/* [추가] 로그인 모달: 아이디와 비밀번호 입력창 사이 간격 */
#input-id {
    margin-bottom: 10px !important; /* 기존보다 20px 띄우기 */
}

/* 보결 테이블 특화 (높이 맞춤 및 중앙 정렬) */
  .substitute-section.card { height: 100%; }
  
  #substitute-table th, 
  #substitute-table td { 
      padding: 8px 5px; 
      height: 40px; 
      text-align: center !important; /* 여기에 중앙 정렬 추가됨 */
  }

  /* 일과시간표 표시용: 줄바꿈 허용 및 중앙 정렬 */
  #time-table td { 
      white-space: pre-wrap; 
      vertical-align: middle !important; /* 세로 중앙 정렬 */
      text-align: center !important;     /* 가로 중앙 정렬 */
  }

  /* 학생 현황 테이블 중앙 정렬 */
  #student-status-table td {
      text-align: center !important;
      vertical-align: middle !important;
  }

  /* [스켈레톤 로딩 애니메이션] */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton-row {
    width: 100%;
    height: 100%;
}

.skeleton-box {
    background: #f0f0f0;
    background-image: linear-gradient(
        90deg, 
        #f0f0f0 25%, 
        #f8f8f8 50%, 
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite; /* 반짝이는 속도 */
    border-radius: 4px;
    display: inline-block;
}

/* 텍스트 줄 모양 스켈레톤 */
.skeleton-text {
    height: 16px;
    width: 80%;
    margin-bottom: 6px;
}
.skeleton-text.short { width: 40%; }
.skeleton-text.long { width: 95%; }

/* 테이블 안에서 스켈레톤 위치 잡기 */
.skeleton-cell {
    padding: 15px !important;
    vertical-align: middle;
}

/* [토스트 알림창 디자인] */
#global-toast {
    visibility: hidden; /* 기본적으로 숨김 */
    min-width: 250px;
    background-color: #333; /* 진한 회색 배경 */
    color: #fff;
    text-align: center;
    border-radius: 50px; /* 둥근 모서리 */
    padding: 16px;
    position: fixed;
    z-index: 20000; /* 모달보다 위에 뜨도록 아주 높게 설정 */
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%); /* 정확히 가운데 정렬 */
    font-size: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    opacity: 0;
    transition: opacity 0.3s, bottom 0.3s; /* 부드러운 효과 */
}

/* 토스트가 활성화되었을 때 붙는 클래스 */
#global-toast.show {
    visibility: visible;
    opacity: 1;
    bottom: 50px; /* 살짝 위로 올라오며 등장 */
}

/* [추가] 에디터 및 뷰어 줄 간격 최적화 */
.op-box p, .op-box div, 
.editor-content p, .editor-content div {
    margin: 0 !important;        /* 문단 사이 강제 여백 제거 */
    padding: 0 !important;       /* 안쪽 여백 제거 */
    line-height: 1.4 !important; /* 줄 간격을 글자 크기의 1.4배로 설정 (적당함) */
}

/* 텍스트가 그냥 들어갔을 경우를 대비한 상위 박스 설정 */
.op-box, .editor-content {
    line-height: 1.4 !important;
}

/* 리스트(글머리 기호)가 들어갔을 때 들여쓰기 및 간격 조정 */
.op-box ul, .op-box ol,
.editor-content ul, .editor-content ol {
    margin: 5px 0 5px 20px !important; /* 위아래 간격 좁힘 */
    padding: 0 !important;
}
.op-box li, .editor-content li {
    margin-bottom: 2px !important; /* 리스트 항목 사이 간격 좁힘 */
}

/* [추가] 보결 관리 창 너비 확대 (120% 이상 넓게) */
#substitute-manage-modal .editor-modal-box {
    width: 80% !important;         /* 화면 너비의 90% 사용 */
    max-width: 1000px !important;  /* 최대 1200px까지 늘어남 (기존 대비 2배 이상 확대) */
}

/* [추가] 일과 시간표 에디터: 임의 크기 조절 금지 & 디자인 다듬기 */
#timetable-editor-table textarea {
    resize: none !important;      /* 마우스로 크기 조절하는 핸들 제거 */
    overflow: hidden !important;  /* 내용이 넘쳐도 스크롤바 생기지 않게 함 */
    min-height: 40px;             /* 최소 높이 설정 (너무 납작해지지 않도록) */
    padding: 8px 5px;             /* 안쪽 여백 */
    line-height: 1.4;             /* 줄 간격 */
    box-sizing: border-box;       /* 테두리 포함 크기 계산 */
    vertical-align: middle;       /* 셀 중앙 정렬 */
}
/* 팝업창 보이기/숨기기 스타일 */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 9999;
    display: none; justify-content: center; align-items: center;
}
.modal-overlay.active { display: flex; } /* active 클래스가 붙으면 보임 */
.modal-box { background: white; padding: 20px; border-radius: 8px; width: 400px; max-width: 90%; }