/**
 * Components Fix CSS - 컴포넌트 스타일 수정 및 보완
 * components.css 이후에 로드되어 스타일을 오버라이드
 */

/* ============================================
   GLOBAL - 포커스 outline 제거 (마우스/터치 클릭 시)
   common.css의 *:focus { outline: 2px solid ... } 오버라이드
   키보드(Tab) 탐색 시에는 :focus-visible로 표시
   ============================================ */
*:focus:not(:focus-visible) {
  outline: none !important;
}

/* 모바일 탭 하이라이트 제거 */
button, a, [role="button"], input, select, textarea, label {
  -webkit-tap-highlight-color: transparent;
}

/* ============================================
   HEADER - Fixes
   ============================================ */

/* Nav Link - padding-bottom 제거 (header.css에서 .nav-menu padding-bottom 제거됨) */

/* ============================================
   INPUTS - Fixes
   ============================================ */

/* Form Group - helper-text 유무에 관계없이 일정한 높이 유지 */
.comp-form-group {
  min-height: auto;
}

.comp-form-group .comp-helper-text {
  display: block !important;
  margin-top: 2px !important;
  min-height: 18px !important;
  line-height: 18px !important;
  font-size: var(--font-size-sm) !important;
}

/* Helper text가 없어도 공간 확보 */
.comp-form-group:not(:has(.comp-helper-text))::after {
  content: "";
  display: block;
  height: 20px;  /* margin-top(2px) + min-height(18px) */
}

/* Textarea 스타일 수정 */
textarea.comp-input {
  min-height: 100px;
  height: auto;
  padding: var(--spacing-3);
  resize: vertical;
  line-height: 1.5;
}

/* Select 값 표시 영역 */
.comp-select-value {
  flex: 1;
  text-align: left;
}

.comp-select-value.placeholder {
  color: var(--text-disabled);
}

/* Checkbox/Radio Group - 항목을 묶어서 간격 관리 */
.comp-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.comp-checkbox-group.inline,
.comp-radio-group.inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

.comp-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/* Group 안의 checkbox/radio는 margin-bottom 제거 */
.comp-checkbox-group .comp-checkbox,
.comp-radio-group .comp-radio {
  margin-bottom: 0;
}

/* Checkbox 구조 수정 - label 직접 연결 */
.comp-checkbox {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--spacing-2);
}

.comp-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  margin: 0;
  margin-right: var(--spacing-2);
  background-color: var(--bg-default);
  border: 2px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.comp-checkbox input[type="checkbox"]:hover:not(:disabled) {
  border-color: var(--color-primary-600);
}

.comp-checkbox input[type="checkbox"]:checked {
  background-color: var(--color-primary-500);
  border-color: var(--color-primary-500);
}

.comp-checkbox input[type="checkbox"]::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  color: transparent;
  line-height: 1;
}

.comp-checkbox input[type="checkbox"]:checked::after {
  color: white;
}

.comp-checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.comp-checkbox input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.comp-checkbox label {
  font-size: var(--font-size-sm);  /* 14px */
  color: var(--color-gray-700);
  cursor: pointer;
  user-select: none;
  margin: 0;
}

.comp-checkbox.disabled label {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Radio 구조 수정 - label 직접 연결 */
.comp-radio {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--spacing-2);
}

.comp-radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  margin: 0;
  margin-right: var(--spacing-2);
  padding: 0;
  background-color: var(--bg-default);
  border: 2px solid var(--color-gray-400);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.comp-radio input[type="radio"]:hover:not(:disabled):not(:checked) {
  border-color: var(--color-primary-600);
}

.comp-radio input[type="radio"]:checked {
  border-color: var(--color-primary-500);
}

.comp-radio input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: var(--color-primary-500);
  border-radius: 50%;
}

.comp-radio input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.comp-radio input[type="radio"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--color-gray-100);
}

.comp-radio label {
  font-size: var(--font-size-sm);  /* 14px */
  color: var(--color-gray-700);
  cursor: pointer;
  user-select: none;
  margin: 0;
}

.comp-radio.disabled label {
  opacity: 0.5;
  cursor: not-allowed;
}

/* DatePicker는 datepicker.css와 datepicker.js에서 처리 */

/* ============================================
   FEEDBACK - Fixes
   ============================================ */

/* Progress - 스타일은 components.css에서 정의 */

/* ============================================
   NAVIGATION - Fixes
   ============================================ */

/* Pagination - 클래스명 수정 */
.comp-pagination-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  background-color: var(--bg-default);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
}

.comp-pagination-item:hover:not(:disabled):not(.active) {
  background-color: var(--color-gray-100);
}

.comp-pagination-item.active {
  background-color: var(--color-primary-500);
  color: var(--text-inverse);
  border-color: var(--color-primary-500);
}

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

.comp-pagination-ellipsis {
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-2);
  color: var(--text-disabled);
}

.comp-pagination-info {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Breadcrumbs - a 태그 스타일 */
.comp-breadcrumbs-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition-fast);
}

.comp-breadcrumbs-item:hover:not(.active) {
  color: var(--color-primary-700);
  text-decoration: none;
}

.comp-breadcrumbs-item.active {
  color: var(--color-gray-900);
  font-weight: var(--font-weight-semibold);
}

/* Tabs - 클래스명 수정 */
.comp-tab {
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition-fast);
  margin-bottom: -2px;
}

.comp-tab:hover:not(.active) {
  color: var(--text-primary);
  background-color: var(--color-gray-50);
}

.comp-tab.active {
  color: var(--color-primary-600);
  border-bottom-color: var(--color-primary-600);
}

/* Vertical Tabs */
.comp-tabs.vertical {
  display: flex;
  gap: var(--spacing-4);
}

.comp-tabs.vertical .comp-tabs-header {
  flex-direction: column;
  border-bottom: none;
  border-right: 2px solid var(--color-gray-200);
  min-width: 200px;
}

.comp-tabs.vertical .comp-tab {
  border-bottom: none;
  border-right: 2px solid transparent;
  margin-bottom: 0;
  margin-right: -2px;
  text-align: left;
}

.comp-tabs.vertical .comp-tab.active {
  border-bottom-color: transparent;
  border-right-color: var(--color-primary-500);
}

.comp-tabs.vertical .comp-tabs-content {
  flex: 1;
}

/* ============================================
   DATA DISPLAY - Fixes
   ============================================ */

/* Table variants - components.css에서 정의됨 */

/* Chip variants */
.comp-chip.primary {
  background-color: var(--color-primary-100);
  color: var(--color-primary-700);
}

.comp-chip.success {
  background-color: rgba(76, 175, 80, 0.2);
  color: var(--color-success);
}

.comp-chip.warning {
  background-color: rgba(255, 152, 0, 0.2);
  color: var(--color-warning);
}

.comp-chip.error {
  background-color: rgba(244, 67, 54, 0.2);
  color: var(--color-error);
}

/* ============================================
   INPUTS - Error States (Field API 연동)
   ============================================ */

/* Select 에러 */
.comp-select-button.error {
  border-color: var(--color-error);
}
.comp-select-button.error:focus {
  box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.1);
}

/* Checkbox/Radio 그룹 에러 */
.comp-checkbox-group.error .comp-checkbox input[type="checkbox"],
.comp-radio-group.error .comp-radio input[type="radio"] {
  border-color: var(--color-error);
}

/* Switch 에러 */
.comp-switch.error input {
  border-color: var(--color-error);
}

/* ============================================
   SEARCH FORM - comp-input/comp-select 호환
   ============================================ */

/* search-form 내 comp-input 높이 맞춤 */
.search-form .comp-input {
  height: 40px;
  font-size: 1.4rem;
}

/* search-form 내 공통 컴포넌트 높이 맞춤 (form-control 36px 기준) */
.search-form .comp-select {
  width: 100%;
}

.search-form .comp-select .comp-select-button {
  height: 36px;
  font-size: 1.4rem;
}

.search-form .comp-datepicker {
  height: 36px;
  font-size: 1.4rem;
}

.search-form .comp-input {
  height: 36px;
  font-size: 1.4rem;
}

/* ============================================
   BUTTONS - Fixes
   ============================================ */

/* Button full-width 클래스명 수정 */
.comp-btn.full-width {
  width: 100%;
}

/* 삭제 버튼 (error variant) */
.comp-btn.error {
  background-color: var(--color-error, #F44336);
  color: var(--text-inverse);
  border: 1px solid var(--color-error, #F44336);
}
.comp-btn.error:hover:not(:disabled) {
  background-color: #D32F2F;
  border-color: #D32F2F;
}
.comp-btn.error:active:not(:disabled) {
  background-color: #C62828;
}

/* 아웃라인 error 버튼 (삭제 등) */
.comp-btn.outlined.error {
  background-color: transparent;
  border: 1px solid var(--color-error, #F44336);
  color: var(--color-error, #F44336);
}
.comp-btn.outlined.error:hover:not(:disabled) {
  background-color: rgba(244, 67, 54, 0.05);
}
.comp-btn.outlined.error:active:not(:disabled) {
  background-color: rgba(244, 67, 54, 0.1);
}

/* 아웃라인 success 버튼 (엑셀 등) */
.comp-btn.outlined.success {
  background-color: transparent;
  border: 1px solid var(--color-success, #4CAF50);
  color: var(--color-success, #4CAF50);
}
.comp-btn.outlined.success:hover:not(:disabled) {
  background-color: rgba(76, 175, 80, 0.05);
}
.comp-btn.outlined.success:active:not(:disabled) {
  background-color: rgba(76, 175, 80, 0.1);
}

/* 아웃라인 secondary 버튼 (파일 다운로드/업로드 등) */
.comp-btn.outlined.secondary {
  background-color: transparent;
  border: 1px solid var(--color-gray-500, #9E9E9E);
  color: var(--color-gray-500, #9E9E9E);
}
.comp-btn.outlined.secondary:hover:not(:disabled) {
  background-color: var(--color-gray-50, rgba(0,0,0,0.03));
}
.comp-btn.outlined.secondary:active:not(:disabled) {
  background-color: var(--color-gray-100, rgba(0,0,0,0.06));
}

/* 소형 버튼 (테이블 내 수정/삭제) */
.comp-btn.xs {
  padding: 2px 8px;
  font-size: 12px;
}

/* ============================================
   LAYOUT UTILITIES
   ============================================ */

/* 2열 폼 레이아웃 (모달 내 form-group 2개를 나란히) */
.comp-form-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.comp-form-row > .comp-form-group {
  flex: 1;
  min-width: 200px;
}

/* 모달 크기 변형 */
.comp-modal-dialog.modal-sm { max-width: 520px; }
.comp-modal-dialog.modal-md { max-width: 600px; }
.comp-modal-dialog.modal-lg { max-width: 640px; }
.comp-modal-dialog.modal-xl { max-width: 960px; }

/* 소형 badge */
.badge.sm { font-size: 12px; }

/* 게시물 목록 아이콘 */
.pst-cmnt-cnt { color:var(--color-error); font-size:11px; margin-left:2px; font-weight:500; }
.pst-icon { display:inline-block; margin-left:4px; vertical-align:middle; font-size:10px; font-weight:700; border-radius:2px; padding:1px 4px; line-height:1.4; }
.pst-icon.new { background:#ff6b35; color:#fff; }
.pst-icon.hot { background:#e53e3e; color:#fff; }
.pst-icon.lock { background:none; color:var(--color-gray-400); font-size:11px; padding:0; }
.pst-icon.notice { background:#c4956a; color:#fff; padding:2px 8px; border-radius:4px; font-size:12px; margin-left:0; }

/* 컬럼 리사이즈 핸들 */
.col-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    z-index: 1;
}
.col-resize-handle:hover {
    background: var(--color-primary-300, #90caf9);
}

/* 클릭 가능 행 */
.clickable-row { cursor: pointer; }

/* flex 유틸 */
.flex-1 { flex: 1; }

/* 간격 유틸 */
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.ml-2 { margin-left: 8px; }

/* ============================================
   ACTION BAR (하단 버튼 영역)
   - 상세/폼 페이지 하단의 버튼 그룹
   ============================================ */
.action-bar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
}

/* 좁은 화면: 버튼이 한 줄에 다 안 들어가면 줄바꿈한다.
   버튼 줄은 대개 왼쪽 묶음 / 오른쪽 묶음을 space-between 으로 벌려 놓는데,
   모바일에서는 그 묶음이 화면 밖으로 밀려나 버튼이 안 보였다
   (예: 학생 정보 관리 +383px, 교사 정보 관리 +311px).
   바깥 줄과 안쪽 묶음 모두 풀어 줘야 실제로 접힌다. */
@media (max-width: 768px) {
  .action-bar,
  .action-bar > div {
    flex-wrap: wrap;
  }
}

/* ============================================
   INFO CARD (상세 정보 카드)
   ============================================ */
.info-card {
  background: var(--bg-paper);
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  padding: 20px;
}
.info-card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.info-card-label {
  color: var(--text-secondary);
  font-size: 13px;
}
.info-card-value {
  font-weight: 600;
  margin: 4px 0 0 0;
}
.info-card-value.secondary {
  font-weight: 500;
  color: var(--text-secondary);
}

/* ============================================
   SECTION HEADER (제목 + 버튼 바)
   ============================================ */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  margin-bottom: 16px;
}
.section-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

/* 부제 레이블 (타이틀 옆 보조 텍스트) */
.subtitle-label {
  font-weight: 400;
  color: var(--text-secondary);
  font-size: 14px;
  margin-left: 8px;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

/* --- 태블릿 (≤ 1024px) --- */
@media (max-width: 1024px) {
  /* 검색 폼 그리드: 5열 → 3열 */
  .search-form .form-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* --- 모바일 (≤ 768px) --- */
@media (max-width: 768px) {
  /* 컨테이너 패딩 축소 */
  #container {
    padding-left: var(--spacing-3) !important;   /* 12px */
    padding-right: var(--spacing-3) !important;
    padding-top: 20px !important;
    padding-bottom: 40px !important;
  }

  /* 페이지 타이틀 */
  .page-title .tit {
    font-size: 2rem;
  }

  /* 브레드크럼 숨김 */
  .breadcrumb-wrap {
    display: none;
  }

  /* 검색 폼: 5열 → 1열 */
  .search-form .form-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .search-form .form-group {
    margin-bottom: 1.2rem;
  }

  .search-form .form-group.double {
    grid-column: span 1;
  }

  .search-container .search-form .btn {
    width: 100%;
    margin-top: 0.5rem;
  }

  /* 테이블 유틸 바 */
  .tbl-wrap .tbl-util {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .tbl-wrap .tbl-util .btn-box {
    margin-left: 0;
  }

  .tbl-wrap .tbl-util .btn-box .btn {
    width: 100%;
  }

  /* comp-table 가로 스크롤: table만 스크롤, pagination은 고정 */
  .comp-table-scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .comp-table-scroll .comp-table {
    min-width: 600px;
  }

  /* 스크롤바 항상 표시 */
  .comp-table-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .comp-table-scroll::-webkit-scrollbar-track {
    background: var(--color-gray-200);
  }
  .comp-table-scroll::-webkit-scrollbar-thumb {
    background: var(--color-gray-400);
    border-radius: 3px;
  }

  /* 모달: 좌우 여백 유지 */
  .comp-modal-dialog {
    max-width: calc(100% - 32px) !important;
    margin: 40px auto !important;
    min-height: auto;
    border-radius: var(--radius-lg) !important;
  }

  .comp-modal-body {
    padding: var(--spacing-4) !important;
    max-height: 70vh;
    overflow-y: auto;
  }

  /* 2열 폼 → 1열 */
  .comp-form-row {
    flex-direction: column !important;
  }
  .comp-form-row > .comp-form-group {
    min-width: 0 !important;
  }

  /* info-card 세로 정렬 */
  .info-card-row {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* section-header 세로 정렬 */
  .section-header {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .section-header > div {
    display: flex;
    gap: 8px;
  }
  .section-header > div .btn {
    flex: 1;
  }

  /* codeMngModal split → 세로 스택 */
  .code-split-layout {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .code-split-left,
  .code-split-right {
    width: 100% !important;
  }

  .code-panel {
    padding: 12px !important;
  }

  .code-split-search {
    flex-wrap: wrap;
  }

  .code-split-search .comp-input {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
  }

  /* 코드 안내 아이콘 방향 변경 (↓) */
  .code-empty-guide i.fa-arrow-left::before {
    content: "\f063";  /* fa-arrow-down */
  }
}

/* --- 소형 모바일 (≤ 480px) --- */
@media (max-width: 480px) {
  #container {
    padding-left: var(--spacing-2) !important;   /* 8px */
    padding-right: var(--spacing-2) !important;
  }

  /* 검색 폼 패딩 축소 */
  .search-form {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* 테이블 버튼 축소 */
  .comp-table .comp-btn.small {
    padding: 2px 6px;
    font-size: 12px;
  }

  /* 페이징 버튼 축소 */
  .comp-table-pagination-btn {
    min-width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .comp-table-pagination-info {
    font-size: 12px;
    min-width: auto;
  }
}

/* ============================================
   프로젝트 커스텀 규칙 (pub 없음, 유지 필요)
   ============================================ */

/* point 버튼 (빨간 삭제 계열) 텍스트/아이콘 흰색 */
.comp-btn.point,
.comp-btn.point i,
.comp-btn.point:hover:not(:disabled),
.comp-btn.point:hover:not(:disabled) i {
  color: #fff !important;
}

/* xs 사이즈 버튼은 min-width 없음 (point의 80px 오버라이드) */
.comp-btn.xs {
  min-width: auto !important;
}

/* 검색 영역 native select 화살표 복원 (글로벌 select { appearance: none } 오버라이드) */
select.form-control,
select.comp-input {
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  padding-right: 28px;
  cursor: pointer;
}

/* 테이블 셀 내 comp-select 드롭다운 오버플로 허용 —— 셀렉트가 든 셀에만 건다.

   예전에는 모든 td 에 걸었는데, 그러면 components.css 의 셀 말줄임이 죽는다.
   text-overflow:ellipsis 는 overflow:hidden 일 때만 동작하기 때문이다.
   그래서 설명처럼 긴 값이 잘리지 않고 옆 칸으로 흘러넘쳤다(예: 공통코드 관리 목록).
   드롭다운을 밖으로 빼야 하는 건 셀렉트가 든 셀뿐이라 그 셀만 남긴다. */
.comp-table td:has(.comp-select) {
  overflow: visible;
}
.comp-table td .comp-select-dropdown {
  position: absolute;
  z-index: 100;
}

/* 컨트롤만 든 칸에는 말줄임을 걸지 않는다.

   components.css 의 셀 말줄임은 긴 "글자" 를 자르려는 것인데,
   text-overflow:ellipsis 는 내용이 칸보다 넓기만 하면 글자가 없어도 "…" 을 그린다.
   선택 칸은 폭이 38px 인데 .comp-checkbox 라벨의 내용폭이 55px 로 잡혀
   체크박스 오른쪽에 "…" 이 찍혔다(교사 정보 관리 등 8개 화면).
   버튼 칸도 같다 — 60px 칸에 44px 버튼이 딱 맞게 들어가도 태그 사이의 공백 문자가
   넘쳐서 버튼 오른쪽에 "…" 이 찍힌다(시행관리 상세의 '입장' 칸 등).
   clip 은 잘라내기만 하고 "…" 을 그리지 않아, 칸 폭이나 다른 칸에는 영향이 없다.
   ※ 글자가 든 칸(.comp-link 등)은 말줄임이 필요하므로 건드리지 않는다. */
.comp-table td:has(> .comp-checkbox),
.comp-table td:has(> .comp-radio),
.comp-table td:has(> .comp-btn),
.comp-table td:has(> .comp-switch),
.comp-table th:has(> .comp-checkbox),
.comp-table th:has(> .comp-radio),
.comp-table th:has(> .comp-btn),
.comp-table th:has(> .comp-switch) {
  text-overflow: clip;
}

/* comp-table-wrapper 오른쪽 끝 정렬 보정
   (scrollbar-gutter: stable이 불필요한 여백을 만드는 문제 해결) */
.comp-table-wrapper {
  overflow-x: hidden;
  scrollbar-gutter: auto;
}
.comp-table-wrapper:not(.sticky-header) {
  overflow-y: clip;
}
.comp-table-wrapper .comp-table {
  table-layout: fixed;
  width: 100%;
  /* table-layout:fixed 에서 th 에 적은 열 폭은 "비율" 로 해석된다.
     그래서 화면이 좁아지면 모든 열이 같이 줄고, 폭을 적지 않은 열
     (예: 공통코드 관리의 설명)이 먼저 0 에 가깝게 눌려 내용이 안 보였다.
     min-width 를 max-content 로 두면 적어 둔 열 폭 아래로는 줄지 않고,
     다 못 담으면 .comp-table-scroll 이 가로로 밀어 준다.
     width 는 100% 그대로라 여유가 있을 때는 예전처럼 컨테이너를 채운다.
     페이지가 표에 min-width 를 직접 준 경우(예: 학교 관리 900px)는
     그 값이 우선이라 기존 동작이 유지된다. */
  min-width: max-content;
}

/* 페이지 사이즈 select — 페이지 숫자 버튼과 동일한 사이즈 (32px / 14px) */
.comp-select.comp-table-page-size { width: 80px !important; display: inline-block; }
.comp-select.comp-table-page-size .comp-select-button {
  height: 32px !important;
  padding: 0 10px !important;
  font-size: var(--font-size-sm) !important;
  border-radius: var(--radius-md) !important;
}
.comp-select.comp-table-page-size .comp-select-value { font-size: var(--font-size-sm) !important; }
.comp-select.comp-table-page-size .comp-select-icon { font-size: 11px !important; }
.comp-select.comp-table-page-size .comp-select-option {
  padding: 6px 10px !important;
  font-size: var(--font-size-sm) !important;
  white-space: nowrap !important;
  text-align: center !important;
}
/* 드롭다운: 위쪽으로 열기 (페이징은 항상 하단이므로 위쪽 공간 충분 + wrapper overflow 회피) */
.comp-select-dropdown.comp-table-page-size-dropdown {
  top: auto !important;
  bottom: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 2px !important;
}