@charset "UTF-8";
:is(.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6) {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "맑은 고딕", "dotum", "돋움", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.table_list th,
.table_list td {
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list_info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 8px;
}
.list_sort_btns {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.list_sort_btns .btns {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}
form.form_search .select_input_box {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 80%;
}
form.form_search > .row {
  min-height: 37px;
}
form.form_search h4.form_title {
  width: auto;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  flex-basis: 100px;
  flex-shrink: 0;
  text-align: center;
  margin-top: 8px;
  line-height: 23px;
  min-height: 23px;
}
.date_input_box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.date_select {
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
}
form.form_search .search_btns {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.filter-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: fit-content;
}
.answer_box label {
  font-size: 15px;
}
.table_detail th {
  --vz-table-color-state: var(--vz-table-active-color);
  --vz-table-bg-state: var(--vz-table-active-bg);
}
.table_detail th {
  text-align: center;
}
.major_jobs label {
  text-align: center;
}

.major_jobs .d-flex .form-control {
  width: 50px;
}
.class-btns .list_sort_btns .btns {
  justify-content: flex-end;
}

span.asterisk {
  padding-left: 3px;
  color: #f06548;
}

/* 배너 목록 페이지 전용 (다른 페이지 영향 없음) */
.page-banner-list .card,
.page-banner-list .card-body,
.page-banner-list .table-responsive,
.page-banner-list .table-responsive.table-card,
.page-banner-list .table-responsive.table-card table,
.page-banner-list .table-responsive.table-card tbody,
.page-banner-list .table-responsive.table-card tr,
.page-banner-list .table-responsive.table-card td {
  overflow: visible !important;
}
.page-banner-list .table-responsive.table-card table {
  position: relative;
  z-index: 1;
}
.page-banner-list .banner-preview {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.page-banner-list .banner-preview .thumb {
  width: 56px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  background: #f8f9fa;
}
.page-banner-list .banner-preview .preview-pop {
  display: none;
  position: absolute;
  left: 70px;
  top: -6px;
  z-index: 10;
  padding: 6px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.page-banner-list .banner-preview .preview-pop img {
  width: 240px;
  height: 135px;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}
.page-banner-list .banner-preview:hover .preview-pop {
  display: block;
}

/* 모바일 반응형 스타일 */
@media (max-width: 768px) {
  form.form_search .select_input_box {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap;
  }
  
  form.form_search .select_input_box.col-auto {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .date_input_box {
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column;
    align-items: stretch;
  }
  
  .date_input_box.col-auto {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .date_selectbox {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .date_selectbox.col-auto {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .date_select {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap;
  }
  
  .date_select .form-date {
    flex: 1;
    min-width: 0;
    max-width: 100%;
  }
  
  .date_btns {
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  
  .date_btns .btn {
    flex: 1;
    min-width: calc(50% - 2px);
    font-size: 12px;
    padding: 6px 8px;
  }
  
  form.form_search > .row {
    overflow-x: hidden;
    margin-left: 0;
    margin-right: 0;
  }
  
  form.form_search h4.form_title {
    flex-basis: auto;
    width: 100%;
    text-align: left;
    margin-bottom: 8px;
  }
  
  form.form_search .row > * {
    padding-left: 0;
    padding-right: 0;
  }
}