/* ==========================================================================
   Board Common Components - V3
   공통 게시판 컴포넌트 (과목 게시판, 학습지원센터, 마이페이지 상담문의 공통)

   Design Reference: course/bulletin (과목 공지사항)
   - Border: 1px solid #E5E7EB
   - Card: border-radius 12px, background #fff
   - Filter Bar: padding 14px 16px, gap 10px
   - Table: min-width 480px, hover background #F4F9FF
   - Detail Head: background #F9FAFB, padding 28px 32px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Card & Table Wrapper
   -------------------------------------------------------------------------- */
.card {
  background: var(--edu-neutral-0);
  border: 1px solid var(--edu-neutral-200);
  border-radius: var(--edu-radius-lg);
  overflow: hidden;
}

.table-scroll {
  width: 100%;
  overflow-x: auto;
}

/* --------------------------------------------------------------------------
   Base Table Component (.table-edu)
   - 모든 테이블 페이지에서 공통으로 사용하는 기본 테이블 스타일
   -------------------------------------------------------------------------- */
.table-edu {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--edu-text-sm);
  table-layout: fixed; /* 기본값: 고정 너비 */
}

.table-edu--auto {
  table-layout: auto; /* 컨텐츠에 따라 자동 조정 */
}

.table-edu thead th {
  padding: var(--edu-spacing-3) var(--edu-spacing-4);
  background: var(--edu-neutral-50);
  color: var(--edu-neutral-700);
  text-align: center;
  border-bottom: 1px solid var(--edu-neutral-200);
  font-weight: var(--edu-font-semibold);
}

.table-edu tbody th {
  padding: var(--edu-spacing-3) var(--edu-spacing-4);
  background: var(--edu-neutral-50);
  color: var(--edu-neutral-700);
  text-align: center;
  border-bottom: 1px solid var(--edu-neutral-100);
  font-weight: var(--edu-font-semibold);
}

.table-edu tbody td {
  padding: var(--edu-spacing-3) var(--edu-spacing-4);
  color: var(--edu-neutral-700);
  text-align: center;
  border-bottom: 1px solid var(--edu-neutral-100);
  vertical-align: middle;
  word-break: break-word;
}

/* Table Header Modifiers */
.table-edu--nowrap-header thead th {
  white-space: nowrap; /* 헤더 줄바꿈 방지 */
}

/* --------------------------------------------------------------------------
   Info Table (.table-edu--info)
   - 수강신청 상세, 강의계획서 등 상세정보 테이블
   -------------------------------------------------------------------------- */
.table-edu--info {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 16px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  overflow: hidden;
}

.table-edu--info th {
  padding: 10px 12px;
  background: #F9FAFB;
  color: #6B7280;
  font-weight: 600;
  font-size: 15px;
  text-align: left;
  border-bottom: 1px solid #E5E7EB;
  border-right: 1px solid #E5E7EB;
  white-space: nowrap;
  width: 110px;
}

.table-edu--info td {
  padding: 10px 12px;
  color: #374151;
  font-size: 16px;
  border-bottom: 1px solid #E5E7EB;
  border-right: 1px solid #E5E7EB;
}

.table-edu--info tr:last-child th,
.table-edu--info tr:last-child td {
  border-bottom: none;
}

.table-edu--info th:last-child,
.table-edu--info td:last-child {
  border-right: none;
}

.table-edu--info a {
  color: #0073E6;
  text-decoration: none;
}

.table-edu--info a:hover {
  color: #005BB5;
  text-decoration: underline;
}

.table-edu--info caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 768px) {
  .table-edu--info th,
  .table-edu--info td {
    padding: 8px 10px;
    font-size: 15px;
  }

  .table-edu--info th {
    width: 90px;
    font-size: 16px;
  }
}

/* Table Action Links */
.table-edu__action-link {
  color: var(--edu-secondary-600, #00B9A3);
  text-decoration: underline;
  font-weight: 500;
  font-size: var(--edu-text-sm);
  transition: color 0.15s ease;
}

.table-edu__action-link:hover {
  color: var(--edu-secondary-700, #009A87);
}

.table-edu__action-link--disabled {
  color: var(--edu-neutral-400);
  text-decoration: none;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Filter Bar (.board-filter-edu)
   - 칩 기반 또는 드롭다운 기반 필터 + 검색 영역
   -------------------------------------------------------------------------- */
.board-filter-edu {
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Form 요소가 flex children을 감쌀 때 레이아웃 유지 */
.board-filter-edu > form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.board-filter-edu__chips {
  display: flex;
  gap: 6px;
  flex: 0 1 auto;
  flex-wrap: wrap;
}

.board-filter-edu__chip {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  background: #fff;
  color: #6B7280;
  border: 1px solid #E5E7EB;
  transition: all 0.15s;
  text-decoration: none;
  /* Button 리셋 (FOUC 방지) */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  margin: 0;
  line-height: normal;
}

.board-filter-edu__chip:hover {
  border-color: #BFDBFE;
  color: #0060BF;
}

.board-filter-edu__chip:focus {
  outline: 2px solid #BFDBFE;
  outline-offset: 2px;
}

.board-filter-edu__chip.on,
.board-filter-edu__chip.active {
  background: #E6F4FF;
  color: #0060BF;
  border-color: #BFDBFE;
}

/* 드롭다운 기반 정렬 (학습지원센터/마이페이지용) */
.board-filter-edu__sort {
  display: flex;
  align-items: center;
}

.board-filter-edu__sort select.form-control {
  width: 140px;
  min-width: 140px;
  height: 42px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 17px;
  transition: border-color 0.15s ease;
  background: #fff;
}

.board-filter-edu__sort select.form-control:hover {
  border-color: #00CDB3;
}

.board-filter-edu__sort select.form-control:focus {
  border-color: #00B9A3;
  outline: 2px solid rgba(0, 185, 163, 0.1);
  outline-offset: 0;
}

.board-filter-edu__search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 240px;
  margin-left: auto;
}

.board-filter-edu__search--full {
  flex: 1;
  min-width: 240px;
}

.board-filter-edu__search .form-control {
  height: 40px;
  padding: 0 32px 0 12px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") no-repeat right 10px center;
  background-size: 14px;
  font-family: inherit;
  font-size: 15px;
  color: #374151;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.board-filter-edu__search .form-control:focus {
  outline: none;
  border-color: #0073E6;
  box-shadow: 0 0 0 3px rgba(0,115,230,0.1);
}

.board-filter-edu__input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  background: #fff;
}

.board-filter-edu__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  font-family: inherit;
  font-size: 16px;
  color: #111827;
  background: transparent;
}

.board-filter-edu__input::placeholder {
  color: #9CA3AF;
}

.board-filter-edu__btn {
  cursor: pointer;
  height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  background: var(--edu-primary-600, #0073E6);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  transition: background 0.15s;
}

.board-filter-edu__btn:hover {
  background: var(--edu-primary-700, #0060BF);
}

/* --------------------------------------------------------------------------
   Table Extensions (.board-table-edu)
   - .table-edu 확장 스타일
   -------------------------------------------------------------------------- */
.board-table-edu {
  min-width: 480px;
}

.board-table-edu caption {
  position: absolute;
  left: -9999px;
}

.board-table-edu th.th-left {
  padding: 12px 16px;
  text-align: left;
}

.board-table-edu td.td-title {
  padding: 15px 16px 15px 24px;
  text-align: left;
}

.board-table-edu td.td-title > a,
.board-table-edu td.td-title > span {
  vertical-align: middle;
}

.board-table-edu td.td-title .ic-file {
  vertical-align: middle;
  margin-left: 4px;
}

.board-table-edu tbody tr {
  cursor: pointer;
  transition: background 0.15s;
}

.board-table-edu tbody tr:hover {
  background: #F4F9FF;
}

.board-table-edu tr.fixed {
  background: #F0F7FF;
}

.board-table-edu tr.fixed:hover {
  background: #E6F2FF;
}

/* Title Cell */
.board-table-edu .title-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.board-table-edu .title-cell a {
  font-size: 17px;
  font-weight: 500;
  color: #111827;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}

.board-table-edu .title-cell a:hover {
  color: #0073E6;
}

.board-table-edu .title-cell a.title-bold {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Card Head (List)
   -------------------------------------------------------------------------- */
.board-card-head {
  display: none;
}

/* --------------------------------------------------------------------------
   Detail Page (.board-detail-edu)
   -------------------------------------------------------------------------- */
.board-detail-edu {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
}

.board-detail-edu__head {
  padding: 28px 32px;
  border-bottom: none;
  background: var(--edu-neutral-50);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.board-detail-edu__head-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.board-detail-edu__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #111827;
  text-wrap: pretty;
}

.board-detail-edu__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  font-size: 15px;
  color: #6B7280;
}

.board-detail-edu__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.board-detail-edu__meta b {
  font-variant-numeric: tabular-nums;
  color: #4B5563;
}

/* Info Row - 타이틀 아래 메타 정보 (뱃지, 상태, 날짜 등) */
.board-detail-edu__info-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border-bottom: 1px solid #F3F4F6;
  background: #fff;
}

.board-detail-edu__info-row .board-badge-edu,
.board-detail-edu__info-row .board-status-edu,
.board-detail-edu__info-row .board-tag-edu {
  margin: 0;
}

.board-detail-edu__info-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: #6B7280;
  transition: color 0.15s ease;
}

.board-detail-edu__info-item b {
  color: #374151;
  font-weight: 600;
}

a.board-detail-edu__info-item:hover {
  color: #0060BF;
}

.board-detail-edu__info-item--link {
  color: var(--edu-primary-600);
  text-decoration: none;
}

.board-detail-edu__info-item--link:hover {
  color: var(--edu-primary-700);
  text-decoration: underline;
}

.board-detail-edu__info-divider {
  width: 1px;
  height: 14px;
  background: #E5E7EB;
}

.board-detail-edu__file {
  padding: 16px 32px;
  border-bottom: 1px solid #F3F4F6;
  background: #F9FAFB;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.board-detail-edu__file-label {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  background: #EEF2F7;
  color: #4B5563;
  font-size: 16px;
  font-weight: 700;
}

.board-detail-edu__file-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #0073E6;
  text-decoration: none;
}

.board-detail-edu__file-link:hover {
  color: #0060BF;
  text-decoration: underline;
}

.board-detail-edu__body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 16px;
  line-height: 1.7;
  color: #374151;
  min-height: 200px;
}

.board-detail-edu__content {
  word-break: break-word;
}

.board-detail-edu__content p {
  margin: 0 0 16px;
}

.board-detail-edu__content p:last-child {
  margin-bottom: 0;
}

.pre-line {
  white-space: pre-line;
}

/* --------------------------------------------------------------------------
   Navigation (.board-nav-edu)
   - 이전/다음글 네비게이션
   -------------------------------------------------------------------------- */
.board-nav-edu {
  border-top: 1px solid #E5E7EB;
  display: flex;
  flex-direction: column;
}

.board-nav-edu__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 32px;
  border-bottom: 1px solid #F3F4F6;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s;
}

.board-nav-edu__item:hover {
  background: #F4F9FF;
  text-decoration: none;
}

.board-nav-edu__item:last-child {
  border-bottom: none;
}

.board-nav-edu__label {
  flex: 0 0 78px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: #6B7280;
}

.board-nav-edu__title {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-nav-edu__date {
  flex: 0 0 auto;
  font-size: 15px;
  color: #9CA3AF;
  font-variant-numeric: tabular-nums;
}

.board-nav-edu__item--disabled {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 32px;
  border-bottom: 1px solid #F3F4F6;
  color: #9CA3AF;
  cursor: default;
}

.board-nav-edu__item--disabled:last-child {
  border-bottom: none;
}

.board-nav-edu__item--disabled .board-nav-edu__title {
  color: #9CA3AF;
}

/* --------------------------------------------------------------------------
   Answer Section (.board-answer-edu)
   - 질문방/교수님께 답변 영역 (채팅 말풍선 스타일)
   -------------------------------------------------------------------------- */
.board-answer-edu {
  display: flex;
  align-items: flex-start;
  gap: var(--edu-spacing-3);
  margin-top: var(--edu-spacing-6);
}

.board-answer-edu__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--edu-success-600) 0%, #059669 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.board-answer-edu__bubble {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 20px 24px;
  background: var(--edu-success-50);
  border-radius: 0 var(--edu-radius-lg) var(--edu-radius-lg) var(--edu-radius-lg);
}

/* 말풍선 꼬리 */
.board-answer-edu__bubble::before {
  content: '';
  position: absolute;
  top: 0;
  left: -10px;
  border-width: 0 10px 10px 0;
  border-style: solid;
  border-color: transparent var(--edu-success-50) transparent transparent;
}

.board-answer-edu__title {
  margin: 0 0 var(--edu-spacing-2) 0;
  font-size: var(--edu-text-lg);
  font-weight: 700;
  color: var(--edu-neutral-900);
}

.board-answer-edu__bubble .board-detail-edu__content {
  padding: 0;
}

.board-answer-edu__meta {
  display: block;
  font-size: var(--edu-text-2xs);
  color: var(--edu-neutral-500);
  text-align: right;
}

/* --------------------------------------------------------------------------
   Form (.board-form-edu)
   -------------------------------------------------------------------------- */
.board-form-edu {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
}

.board-form-edu__head {
  padding: 20px 32px;
  border-bottom: 1px solid #E5E7EB;
  background: var(--edu-neutral-50);
}

.board-form-edu__head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.board-form-edu__body {
  padding: 32px;
}

.board-form-edu__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.board-form-edu__group:last-child {
  margin-bottom: 0;
}

.board-form-edu__row {
  display: flex;
  gap: 16px;
}

.board-form-edu__row .board-form-edu__group {
  flex: 1;
  margin-bottom: 0;
}

.board-form-edu__label {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

.board-form-edu__label .required {
  color: #DC2626;
  margin-left: 2px;
}

.board-form-edu__value {
  font-size: 17px;
  color: #111827;
  padding: 10px 0;
}

.board-form-edu__input {
  height: 44px;
  padding: 0 14px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-family: inherit;
  font-size: 17px;
  color: #111827;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.board-form-edu__input:focus {
  outline: none;
  border-color: #0073E6;
  box-shadow: 0 0 0 3px rgba(0,115,230,0.1);
}

.board-form-edu__input::placeholder {
  color: #9CA3AF;
}

.board-form-edu__select {
  height: 44px;
  padding: 0 40px 0 14px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-family: inherit;
  font-size: 17px;
  color: #111827;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236B7280' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6l3.5 4 3.5-4h-7z'/%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.board-form-edu__select:focus {
  outline: none;
  border-color: #0073E6;
  box-shadow: 0 0 0 3px rgba(0,115,230,0.1);
}

.board-form-edu__textarea {
  min-height: 200px;
  padding: 14px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-family: inherit;
  font-size: 17px;
  line-height: 1.6;
  color: #111827;
  background: #fff;
  resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.board-form-edu__textarea:focus {
  outline: none;
  border-color: #0073E6;
  box-shadow: 0 0 0 3px rgba(0,115,230,0.1);
}

.board-form-edu__hint {
  font-size: 15px;
  color: #6B7280;
}

.board-form-edu__char-count {
  text-align: right;
  font-size: 15px;
  color: #9CA3AF;
}

/* File Upload */
.board-form-edu__file-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: #F9FAFB;
  border: 1px dashed #D1D5DB;
  border-radius: 8px;
}

.board-form-edu__file-name {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 400px;
  font-size: 16px;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-form-edu__file-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #E5E7EB;
  color: #6B7280;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s;
  border: none;
  cursor: pointer;
}

.board-form-edu__file-remove:hover {
  background: #DC2626;
  color: #fff;
}

.board-form-edu__file-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 6px;
  background: #0073E6;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer !important;
  transition: background 0.15s;
  border: none;
  overflow: hidden;
  margin-left: auto;
}

.board-form-edu__file-btn:hover {
  background: #0060BF;
}

.board-form-edu__file-btn input[type="file"] {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  transform: translate(-300px, 0) scale(4);
  cursor: pointer;
}

/* Fileinput State Control */
.fileinput-new .fileinput-exists {
  display: none !important;
}

.fileinput-exists .fileinput-new {
  display: none !important;
}

/* Form Actions */
.board-form-edu__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-top: 8px;
}

/* --------------------------------------------------------------------------
   Empty State (.board-empty-edu)
   -------------------------------------------------------------------------- */
.board-empty-edu {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  padding: 44px 24px 48px;
  background: #fff;
  border: 1px dashed #E5E7EB;
  border-radius: 12px;
}

.board-empty-edu__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #F3F4F6;
}

.board-empty-edu__title {
  font-size: 18px;
  font-weight: 600;
  color: #374151;
  margin: 0;
}

.board-empty-edu__desc {
  font-size: 16px;
  color: #6B7280;
  margin: 0;
}

/* --------------------------------------------------------------------------
   More Button (.board-more-edu)
   -------------------------------------------------------------------------- */
.board-more-edu {
  display: flex;
  justify-content: center;
}

.board-more-edu__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  height: 44px;
  padding: 0 26px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  background: #fff;
  color: #4B5563;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.15s;
  text-decoration: none;
}

.board-more-edu__btn:hover {
  border-color: #0073E6;
  color: #0073E6;
}

/* --------------------------------------------------------------------------
   Actions Bar (.board-actions-edu)
   -------------------------------------------------------------------------- */
.board-actions-edu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.board-actions-edu--center {
  justify-content: center;
}

.board-actions-edu--start {
  justify-content: flex-start;
  margin-top: var(--edu-spacing-4);
}

.board-actions-edu--end {
  justify-content: flex-end;
}

.board-actions-edu__left {
  display: flex;
  gap: 10px;
}

.board-actions-edu__right {
  display: flex;
  gap: 10px;
}

/* --------------------------------------------------------------------------
   Badges (.board-badge-edu)
   -------------------------------------------------------------------------- */
.board-badge-edu {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
}

.board-badge-edu--teal {
  background: #E6FAF7;
  color: #00806F;
}

.board-badge-edu--blue {
  background: #E6F4FF;
  color: #0060BF;
}

.board-badge-edu--purple {
  background: #F3E8FF;
  color: #7C3AED;
}

.board-badge-edu--yellow {
  background: #FEF3C7;
  color: #92400E;
}

.board-badge-edu--green {
  background: #DCFCE7;
  color: #166534;
}

.board-badge-edu--gray {
  background: #F3F4F6;
  color: #6B7280;
}

/* Status Badges */
.board-status-edu {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--edu-radius-full);
  font-size: var(--edu-text-xs);
  font-weight: var(--edu-font-bold);
  white-space: nowrap;
}

.board-status-edu--pending {
  background: var(--edu-neutral-100);
  color: var(--edu-neutral-600);
}

.board-status-edu--temp {
  background: var(--edu-warning-50);
  color: var(--edu-warning-700);
}

.board-status-edu--completed {
  background: var(--edu-success-50);
  color: var(--edu-success-700);
}

/* New Badge */
.board-new-edu {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #FFB800;
  color: #3A2A00;
  font-size: 15px;
  font-weight: 800;
}

/* Tag (List Row) */
.board-tag-edu {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: var(--edu-text-xs);
  font-weight: 700;
  white-space: nowrap;
}

.board-tag-edu--teal {
  background: #E6FAF7;
  color: #00806F;
}

.board-tag-edu--blue {
  background: #E6F4FF;
  color: #0060BF;
}

.board-tag-edu--purple {
  background: #F3E8FF;
  color: #7C3AED;
}

.board-tag-edu--yellow {
  background: #FEF3C7;
  color: #D97706;
}

.board-tag-edu--pink {
  background: #FCE7F3;
  color: #DB2777;
}

.board-tag-edu--default {
  background: #F3F4F6;
  color: #6B7280;
}

.board-tag-edu--warning {
  background: #FEF3C7;
  color: #92400E;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .board-filter-edu {
    flex-direction: column;
    align-items: stretch;
  }

  .board-filter-edu > form {
    flex-direction: column;
    align-items: stretch;
  }

  .board-filter-edu__sort select.form-control {
    width: 100%;
  }

  .board-filter-edu__search {
    flex: 1 1 auto;
    min-width: 0;
  }

  .board-filter-edu__input {
    min-width: auto;
  }

  .board-filter-edu__btn {
    width: 100%;
  }

  .board-detail-edu__head {
    padding: 20px;
  }

  .board-detail-edu__title {
    font-size: 20px;
  }

  .board-detail-edu__file {
    padding: 14px 20px;
  }

  .board-detail-edu__body {
    padding: 20px;
    font-size: 15px;
  }

  .board-nav-edu__item {
    padding: 14px 20px;
    flex-wrap: wrap;
  }

  .board-nav-edu__label {
    flex: 0 0 auto;
  }

  .board-nav-edu__title {
    flex: 1 1 100%;
    order: 3;
    margin-top: 8px;
  }

  .board-nav-edu__date {
    margin-left: auto;
  }

  .board-nav-edu__item--disabled {
    padding: 14px 20px;
    flex-wrap: wrap;
  }

  .board-answer-edu__avatar {
    width: 32px;
    height: 32px;
  }

  .board-answer-edu__avatar svg {
    width: 16px;
    height: 16px;
  }

  .board-answer-edu__bubble {
    padding: 16px 20px;
  }

  .board-answer-edu__bubble::before {
    left: -8px;
    border-width: 0 8px 8px 0;
  }

  .board-form-edu__body {
    padding: 20px;
  }

  .board-form-edu__row {
    flex-direction: column;
    gap: 0;
  }

  .board-form-edu__row .board-form-edu__group {
    margin-bottom: 24px;
  }

  .board-detail-edu__info-row {
    padding: 12px 20px;
    gap: 8px;
  }

  .board-detail-edu__info-item {
    font-size: 14px;
  }

  .board-detail-edu__info-divider {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Common Buttons
   -------------------------------------------------------------------------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--edu-spacing-2);
  cursor: pointer;
  height: 46px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--edu-radius-md);
  background: var(--edu-primary-600);
  color: var(--edu-neutral-0);
  font-family: inherit;
  font-size: var(--edu-text-section-label);
  font-weight: var(--edu-font-semibold);
  text-decoration: none;
  transition: all 0.15s;
}

.btn-primary:hover {
  background: var(--edu-primary-700);
}

.btn-primary:disabled {
  background: var(--edu-neutral-300);
  cursor: not-allowed;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--edu-spacing-2);
  cursor: pointer;
  height: 44px;
  padding: 0 24px;
  border: 1px solid var(--edu-neutral-300);
  border-radius: var(--edu-radius-md);
  background: var(--edu-neutral-0);
  color: var(--edu-neutral-700);
  font-family: inherit;
  font-size: var(--edu-text-body);
  font-weight: var(--edu-font-semibold);
  text-decoration: none;
  transition: all 0.15s;
}

.btn-outline:hover {
  border-color: var(--edu-primary-500);
  color: var(--edu-primary-600);
  background: var(--edu-primary-50);
}

.btn-danger-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--edu-spacing-2);
  cursor: pointer;
  height: 44px;
  padding: 0 24px;
  border: 1px solid var(--edu-error-300);
  border-radius: var(--edu-radius-md);
  background: var(--edu-neutral-0);
  color: var(--edu-error-600);
  font-family: inherit;
  font-size: var(--edu-text-body);
  font-weight: var(--edu-font-semibold);
  text-decoration: none;
  transition: all 0.15s;
}

.btn-danger-outline:hover {
  background: var(--edu-error-50);
  border-color: var(--edu-error-400);
}

/* --------------------------------------------------------------------------
   Pagination (.pagination-edu)
   -------------------------------------------------------------------------- */
.pagination-edu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.pagination-edu__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
}

.pagination-edu__item:hover {
  border-color: #0073E6;
  color: #0073E6;
}

.pagination-edu__item.active {
  background: #0073E6;
  border-color: #0073E6;
  color: #fff;
}

.pagination-edu__item.disabled {
  color: #D1D5DB;
  pointer-events: none;
}