@charset "UTF-8";
/* =========================================================================
   신청·참석 (edu-list) — 부분 적용 오버라이드
   -------------------------------------------------------------------------
   · 범위  : 첨부 이미지 2개 부분만 적용. 카드 박스(리본 라벨/그림자/버튼/
             상태 처리)는 기존 educationV2.css 그대로 유지.
             ① 일정 헤더 : 진행방식 필터(필형) + 마감 숨기기(민트 체크)
             ② 카드 내부 : 날짜 위계(연도 small·일자 크게) / 장소 / 잔여석
   · 전제  : educationV2.css 는 공용이므로 수정하지 않고,
             style.css 이후에 이 파일을 link.
   · 스코프: #education-26 #main … (id 2개)
             → educationV2.css 의 #education-26 … (id 1개)보다 항상 우선.
   · 위치  : /resources/common/css/edu-list.css
   ========================================================================= */


/* ── ① 일정 헤더 : 진행방식 필터 + 마감 숨기기 ─────────────────────────── */
#education-26 #main .education-list .list-header .util {
  align-items: center;
  gap: 12px;
}

/* 진행방식 : 필(pill)형 셀렉트 */
#education-26 #main .education-list .list-header select.form-compact {
  font-size: 14px;
  font-weight: 600;
  color: #363B41;
  text-align: left;
  background: #FFF url(../img/icon/arrow-select-sm.svg) no-repeat right 14px center / 10px auto;
  border: 1px solid #E6E6E6;
  border-radius: 999px;
  padding: 8px 32px 8px 14px;
  cursor: pointer;
}

/* 마감 숨기기 : 민트 체크박스 */
#education-26 #main .education-list .list-header .form-inline {
  gap: 6px;
  cursor: pointer;
}

#education-26 #main .education-list .list-header .form-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background-size: 11px auto;
  margin-right: 0;
}

#education-26 #main .education-list .list-header .form-checkbox:checked {
  background-color: #19CEB3;
  border-color: #19CEB3;
}


/* ── ② 카드 내부 : 날짜 위계 / 장소 / 잔여석 (좌측 정렬) ───────────────── */
#education-26 #main .education-list .list-item {
  text-align: left;   /* 내부 정보 좌측 정렬 (버튼은 기존 center 유지) */
}

/* 날짜 위계 : 연도는 small 톤으로 흡수, 일자를 크게 */
#education-26 #main .education-list .list-item .edu-date {
  gap: 2px;
  font-variant-numeric: tabular-nums;
}

#education-26 #main .education-list .list-item .edu-date .y {
  font-size: 13px;
  font-weight: 600;
  color: #898A8E;
}

#education-26 #main .education-list .list-item .edu-date .d {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
}

#education-26 #main .education-list .list-item .edu-date .t {
  font-size: 15px;
  font-weight: 600;
  color: #686B73;
  margin-top: 2px;
}

/* 장소 / 진행방식 : 좌측 정렬
   · edu-area(장소)는 정보 모달/지도로 연결되는 링크 → 밑줄 유지로 클릭 유도 */
#education-26 #main .education-list .list-item .edu-area,
#education-26 #main .education-list .list-item .edu-zoom {
  justify-content: flex-start;
  font-weight: 600;
}

#education-26 #main .education-list .list-item .edu-area {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 장소 + 잔여석 한 줄 배치 (잔여 유무와 무관하게 카드 높이 동일) */
#education-26 #main .education-list .list-item .edu-where {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

/* 잔여석 : 장소 옆에 노출 */
#education-26 #main .education-list .list-item .seats {
  font-size: 14px;
  font-weight: 700;
  color: #FF5065;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* 마감/비활성 카드에서는 잔여석도 기존 오버레이와 함께 디밍됨 (별도 처리 불필요) */


/* ── 반응형 (educationV2.css 의 667px 티어와 동일 기준) ─────────────────── */
@media screen and (max-width: 667px) {
  #education-26 #main .education-list .list-header .util {
    gap: 8px;
  }

  #education-26 #main .education-list .list-header select.form-compact {
    font-size: 13px;
    padding: 7px 28px 7px 12px;
  }

  #education-26 #main .education-list .list-item .edu-date .d {
    font-size: 16px;
  }

  #education-26 #main .education-list .list-item .edu-date .t {
    font-size: 14px;
  }

  #education-26 #main .education-list .list-item .seats {
    font-size: 13px;
  }
}