/* ===================================
   Education Custom - 교육관리 전용 스타일
   components.css 공통 스타일을 건드리지 않고
   교육 페이지 전용 오버라이드/추가를 정의
   =================================== */


/* ===================================
   1. 교육과정 정보 테이블 (상세 페이지)
   =================================== */
.edu-info {
  background-color: var(--color-gray-100);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

/* .edu-info 안 표 — 테이블 그리드 선 모두 제거 (외곽 박스 안 깔끔한 key-value 표시) */
.edu-info .table--label,
.edu-info .table--label tbody th,
.edu-info .table--label tbody td,
.edu-info .table--label tbody tr:last-child th,
.edu-info .table--label tbody tr:last-child td {
  border: none;
}

/* .edu-info__list — key-value <dl> 마크업 (.item-detail 패턴 참조) */
.edu-info__list {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.edu-info__row {
  display: flex;
  gap: var(--space-4); /* var(--space-4) */
  align-items: baseline;
  padding: var(--gap-form-label-input) 0; /* --gap-form-label-input(8px) — key-value 행 간격 */
}

/* 라벨 너비 — "부서 > 교육분류" 기준 */
.edu-info__row dt {
  flex: 0 0 140px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1); /* var(--space-1) — 라벨 ↔ tooltip 아이콘 */
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-gray-600);
}

/* dt 안 tooltip-trigger도 인라인 중앙 정렬 */
.edu-info__row dt .tooltip-trigger {
  display: inline-flex;
  align-items: center;
}

/* tooltip-trigger 안의 info 아이콘 — 22px (기본 form-message__icon 18px 보다 키움) */
.tooltip-trigger .form-message__icon {
  width: 22px;
  height: 22px;
}

.edu-info__row dd {
  flex: 1;
  font-size: var(--fs-body);
  color: var(--color-gray-900);
  margin: 0;
  line-height: 1.6;
}


@media (max-width: 767px) {
  .edu-info__row {
    flex-direction: column;
    gap: var(--space-1); /* var(--space-1) */
  }
  .edu-info__row dt {
    flex: none;
  }
}


/* 교육 페이지 board-list 상단 블랙 라인 제거 (모든 교육 페이지 공통) */
[class^="page-edu"] .board-list,
[class*=" page-edu"] .board-list {
  border-top: none;
}

/* ===================================
   2. 교육 안내문 (에디터 콘텐츠)
   =================================== */
.edu-guide {
  padding: var(--space-6) 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls);
  color: var(--color-gray-900);
}

/* 강의 순서 — 단순 번호 리스트 (들여쓰기 X) */
.lesson-list {
  list-style: decimal inside;
  padding: 0;
  margin: var(--space-2) 0 0;
  font-size: var(--fs-body);
  color: var(--color-gray-900);
  line-height: 1.7;
}

.lesson-list > li {
  padding: 0;
}

.edu-guide h3 {
  font-size: var(--fs-title-sm);        /* 28px — content-body__title 동일 */
  font-weight: var(--fw-bold);
  color: var(--color-gray-900);
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
  margin-top: var(--gap-layout-h3-top); /* var(--space-10) */
  margin-bottom: var(--gap-layout-h3-body); /* var(--space-3) */
}

.edu-guide h3:first-child {
  margin-top: 0;
}

.edu-guide p {
  margin-bottom: var(--space-4);
}

.edu-guide ul,
.edu-guide ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

.edu-guide li {
  margin-bottom: var(--space-2);
}


/* ===================================
   3. 교육 신청 폼 — BRI 표준 .content-block + h2.content-block__title 사용.
   기존 .edu-apply / .edu-apply__title 룰은 폐기 (표준 컴포넌트가 처리)
   =================================== */

/* edu-apply__hint, edu-apply__consent-*, edu-apply__required 정의 폐기
   - 보조 안내문(p/span)은 components.css의 .form-message form-message--help 사용
   - 동의 체크 라벨은 components.css의 .form-check / .form-check__input / .form-check__label 사용
   - (필수) 텍스트와 * 별표는 일반 텍스트로 처리 */

.edu-apply__radio-group {
  display: flex;
  gap: var(--space-6);
  align-items: center;
}

.edu-apply__radio-label {
  display: flex;
  align-items: center;
  gap: var(--gap-form-label-input);
  cursor: pointer;
}

.edu-apply__radio-text {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

.edu-apply__radio-price {
  color: var(--color-primary-700);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}

.edu-notice--scroll {
  margin-top: 0;
  margin-bottom: var(--space-6);
  max-height: 200px;
  overflow-y: auto;
}

/* 상태 안내 박스 (결제대기, 이수완료 등) */
.edu-status-box {
  margin-top: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  text-align: center;
}

.edu-status-box--warning {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.edu-status-box--success {
  background: var(--color-primary-25);
}

.edu-status-box__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-2);
}

.edu-status-box__desc {
  font-size: var(--fs-small);
  color: var(--color-gray-600);
  margin-bottom: var(--space-4);
}

.edu-status-box__amount {
  color: var(--color-primary-900);
  font-weight: var(--fw-bold);
}

/* .edu-apply__title 룰 폐기 — .content-block__title 표준 사용 */

.edu-apply__course-name {
  font-size: var(--fs-body);
  color: var(--color-gray-600);
  margin-bottom: var(--space-6);
}

/* .edu-apply .member-form / .btn-group--center 룰 폐기 —
   wrapper가 .content-block 표준으로 바뀌었고, .member-form은 components_login.css 표준 사용 */

/* .edu-apply__table — .table.table--label 표준 사용, 페이지 고유(컬럼 폭, 입력 컨트롤 폭)만 정의 */
.edu-apply__table th {
  width: 140px;
}

.edu-apply__table .form-control {
  max-width: 320px;
}

.edu-apply__table select.form-control {
  max-width: 200px;
}

.edu-apply__etc-input {
  margin-top: var(--space-2);
  display: none;
}

.edu-apply__etc-input.is-visible {
  display: block;
}

@media (max-width: 767px) {
  .edu-apply__table,
  .edu-apply__table tbody,
  .edu-apply__table tr,
  .edu-apply__table th,
  .edu-apply__table td {
    display: block;
    width: 100%;
  }

  .edu-apply__table th {
    padding-bottom: var(--space-1);
    border-bottom: none;
  }

  .edu-apply__table td {
    padding-top: var(--space-1);
  }

  .edu-apply__table .form-control,
  .edu-apply__table select.form-control {
    max-width: 100%;
  }
}


/* ===================================
   4. 교육 신청 상태 배지 — 표준 .badge 컴포넌트로 통일
   기존 .edu-status / .edu-status--* 룰은 제거됨.
   - waiting/receipt/external → badge--info
   - approved/completed → badge--success
   - rejected/incomplete → badge--error
   - closed → badge--warning
   =================================== */


/* ===================================
   5. 안내문 박스 (교육승인 조회 하단)
   =================================== */
/* .edu-notice 부모 룰 제거 — 표준 .notice-box(components.css)로 마이그레이션 완료.
   자식 .edu-notice__title / __list / __indent 와 변형 .edu-notice--{scroll|top|warning}는
   .notice-box와 결합되어 그대로 사용됨. */

.edu-notice__title {
  font-size: var(--fs-block);
  font-weight: var(--fw-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-3);
  letter-spacing: var(--ls);
}

.edu-notice__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.edu-notice__list li {
  position: relative;
  padding-left: var(--space-4);
  margin-bottom: var(--space-2);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--color-gray-700);
  letter-spacing: var(--ls);
}
.edu-notice__list li:last-child {
  margin-bottom: 0;
}

.edu-notice__list li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  color: var(--color-gray-500);
}

.edu-notice__list li.edu-notice__indent {
  padding-left: var(--space-8);
}

.edu-notice__list li.edu-notice__indent::before {
  left: 16px;
  content: '-';
}


/* ===================================
   6. PDF 다운로드 링크
   =================================== */
.edu-download {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-primary-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: var(--transition-fast);
  letter-spacing: var(--ls);
}

.edu-download:hover {
  color: var(--color-primary-900);
}

.edu-download.is-disabled {
  color: var(--color-gray-400);
  text-decoration: none;
  pointer-events: none;
  cursor: not-allowed;
}

.edu-download .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}


/* ===================================
   6-1. Table Download Link
   (수료증/영수증 등 테이블 셀 내 아이콘+텍스트 다운로드 링크)
   components_mypage.css의 .page-mypage .td-download-link 패턴을 전역화.
   mypage 네임스페이스가 더 구체적이므로 기존 .page-mypage 페이지는 영향 없음.
   =================================== */
/* .td-download-link 룰 폐기 — 표준 .btn.btn--outline.btn--sm 다운로드 버튼으로 마이그레이션 완료 */


/* ===================================
   7. .table tbody td 안의 strong — 전체 테이블 공통
   .table tbody td 전역 규칙(word-break: normal; white-space: nowrap; text-overflow: ellipsis)이
   strong 인라인 요소에 적용되지 않는 문제 해결.
   display: block으로 전환해야 overflow: hidden + text-overflow가 동작함.
   white-space / word-break 는 전역 td 규칙에서 상속됨.
   =================================== */
.table td strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: var(--fw-semibold);
}


/* ===================================
   7-1. .td-category 셀 — 부서+교육분류 인라인 1줄 표시
   .u-meta-tag { display: block } + strong { display: block } 이 조합되어 2줄 생성.
   .td-category 컨텍스트에서 인라인으로 재정의 → td 전역 규칙
   (overflow:hidden; white-space:nowrap; text-overflow:ellipsis)이 말줄임 처리.
   =================================== */
.table .td-category .u-meta-tag {
  display: inline;
}
.table .td-category .u-meta-tag::after {
  content: " > ";
}
.table .td-category strong {
  display: inline;
}



/* ===================================
   8. 접수인원 표시
   =================================== */
.edu-capacity {
  font-size: var(--fs-body);
  color: var(--color-gray-700);
  letter-spacing: var(--ls);
}

.edu-capacity__current {
  font-weight: var(--fw-bold);
  color: var(--color-primary-700);
}

.edu-capacity__total {
  font-weight: var(--fw-medium);
}


/* ===================================
   8. 검색 필터 확장 (날짜 범위)
   =================================== */
.edu-search__date-range {
  display: flex;
  align-items: center;
  gap: var(--gap-button-group);
}

.edu-search__date-range .form-control {
  flex: 1;
  min-width: 130px;
}

.edu-search__date-separator {
  color: var(--color-gray-500);
  font-size: var(--fs-small);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .edu-search__date-range {
    flex-direction: column;
    gap: var(--space-1);
  }

  .edu-search__date-separator {
    display: none;
  }
}


/* ===================================
   9. 첨부파일 영역 (상세 페이지)
   =================================== */
.edu-attachments {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-gray-300);
  margin-top: var(--space-6);
}

.edu-attachments__title {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-gray-700);
  margin-bottom: var(--space-2);
  letter-spacing: var(--ls);
}

.edu-attachments__file {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-icon);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-gray-700);
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: var(--transition-fast);
  margin-right: var(--space-2);
  margin-bottom: var(--space-2);
  letter-spacing: var(--ls);
}

.edu-attachments__file:hover {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-300);
}

.edu-attachments__file .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.edu-attachments__file-size {
  color: var(--color-gray-500);
  font-size: var(--fs-small);
}

/* ========================================================================
 * 021_course_search.html 전용 — 교육구분 등 긴 분류명 표시 처리.
 *  - 필터 드롭다운(Tom Select): 닫힌 컨트롤은 좁게 한 줄 말줄임(...),
 *    펼친 목록은 내용 폭에 맞게 확장하여 전체 텍스트 노출.
 *  - 표 "교육구분" 열: 말줄임 없이 실제 명칭을 줄바꿈하여 전부 표기.
 * body[data-lnb-active] 페이지 스코프 한정 → 공용 컴포넌트/타 페이지 무영향.
 * ====================================================================== */

/* 필터 드롭다운 — 닫힌 컨트롤(선택값) */
body[data-lnb-active="course-search"] .ts-wrapper.single .ts-control {
  flex-wrap: nowrap;
  padding-right: 3rem; /* Tom Select 캐럿(::after) 영역 넉넉히 확보 — 말줄임을 화살표보다 더 일찍 끊어 겹침 방지 */
}

body[data-lnb-active="course-search"] .ts-wrapper.single .ts-control > .item {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 7rem; /* 선택값 표시 폭 고정 — "시험책임자 또…" 부근에서 일찍 말줄임(16px 기준 약 6~7글자) */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 필터 드롭다운 — 열린 옵션 목록은 내용 폭에 맞게 확장(전체 텍스트 노출).
 * 닫힌 필터는 좁게 유지되고, 펼쳤을 때만 가장 긴 옵션 기준으로 넓어짐. */
body[data-lnb-active="course-search"] .ts-dropdown {
  width: max-content !important;
  min-width: 100%;
  max-width: min(24rem, 92vw);
}

body[data-lnb-active="course-search"] .ts-dropdown .option {
  white-space: nowrap;
}

/* 표 "교육구분" 열 — 말줄임 없이 실제 명칭 전부 표기(좁으면 줄바꿈 허용) */
body[data-lnb-active="course-search"] td[data-label="교육구분"] {
  max-width: 8rem;
  white-space: normal;
  word-break: var(--word-break-base);
}