/* ============================================================
   RIBBON Bright Skin — Custom Styles
   main.css 수정 금지 / 모든 커스터마이징은 이 파일에만 작성
   ============================================================ */
:root {
  --sub-color: #8CB827;   /* 서브(포인트) 컬러 — accent(#008037)는 main.css 정의 */
}

/* ============================================================
   User Info Form (userinfo/views/spring/update.tpl 등)
   ============================================================ */
.ui-form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #444;
}
.ui-info-wrap {
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.ui-info-wrap > .row {
  --bs-gutter-x: 0;
  border-bottom: 1px solid #dee2e6;
}
.ui-info-wrap > .row:last-child { border-bottom: none; }
.ui-info-wrap .ui-form-label {
  background-color: #f8f9fa;
  border-right: 1px solid #dee2e6;
  padding: 0.75rem 1rem;
  align-self: stretch;
  display: flex;
  align-items: center;
  color: #555;
}
.ui-info-wrap .col-sm-8 { padding: 0.75rem 1rem; }
.ui-required {
  color: var(--accent-color);
  font-style: normal;
  font-size: 1rem;
  margin-left: 2px;
  vertical-align: middle;
}
.text2_orange {
  color: #e07700;
  font-size: 0.8rem;
}

/* ============================================================
   Call To Action
   ============================================================ */
.call-to-action .desc { max-width: 760px; margin-left: auto; margin-right: auto; }
.btn.btn-solid,
.btn.btn-ghost {
  padding: 14px 36px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 2px;
  border: 1px solid var(--accent-color);
  transition: all 0.3s ease;
  text-decoration: none;
}
.btn.btn-solid {
  background: var(--accent-color);
  color: var(--contrast-color);
}
.btn.btn-solid:hover { opacity: 0.85; }
.btn.btn-ghost {
  background: transparent;
  color: var(--accent-color);
}
.btn.btn-ghost:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

/* ============================================================
   Pagination 2 — 수직 정렬 보정 (main.css align-items 누락)
   ============================================================ */
.pagination-2 ul {
  align-items: center;
}
.pagination-2 li a {
  line-height: 1.5;
}
.pagination-2 li a i {
  vertical-align: middle;
  display: block;
}

/* ============================================================
   Board (aboard) — 게시판 공통 스타일
   ============================================================ */

/* 테이블 헤더 */
.board-table thead tr {
  background-color: var(--accent-color);
  color: #fff;
}
.board-table thead th {
  font-size: 0.85rem;
  font-weight: 500;
  padding: 11px 14px;
  border: none;
  white-space: nowrap;
}

/* 테이블 바디 */
.board-table tbody tr {
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  transition: background 0.15s;
}
.board-table tbody tr:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
}
.board-table tbody td {
  font-size: 0.875rem;
  padding: 10px 14px;
  vertical-align: middle;
}

/* 작성자·작성일 메타 셀 — 제목이 돋보이도록 작고 연하게 (PC/모바일 공통) */
.board-table tbody td.board-cell-meta {
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

/* 제목 링크 */
.board-title-link {
  color: var(--default-color);
  text-decoration: none;
}
.board-title-link:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

/* 카테고리 */
.board-category {
  color: var(--accent-color);
  font-weight: 600;
  margin-right: 3px;
  font-size: 0.82rem;
}

/* 댓글 수 */
.board-comment-count {
  color: var(--accent-color);
  font-size: 0.82rem;
  margin-left: 2px;
}

/* NEW 뱃지 */
.board-badge-new {
  display: inline-block;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  background-color: var(--accent-color);
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
}

/* 글쓰기 버튼 */
.btn-board-write {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  font-size: 0.85rem;
  color: #fff;
  background-color: var(--accent-color);
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s;
}
.btn-board-write:hover {
  color: #fff;
  background-color: color-mix(in srgb, var(--accent-color), #000 15%);
}

/* 하단 영역 (페이지네이션 + 글쓰기) */
.board-footer {
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  padding-top: 12px;
}

/* 검색 폼 */
.board-search {
  padding: 14px 16px;
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 82%);
}
.board-search-select {
  width: auto;
  min-width: 90px;
  border-color: color-mix(in srgb, var(--default-color), transparent 70%);
}
.board-search-input {
  width: 200px;
  border-color: color-mix(in srgb, var(--default-color), transparent 70%);
}
.board-search-select:focus,
.board-search-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 82%);
}
.btn-board-search {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  font-size: 0.85rem;
  color: #fff;
  background-color: var(--accent-color);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.btn-board-search:hover {
  background-color: color-mix(in srgb, var(--accent-color), #000 15%);
}

/* 반응형 */
@media (max-width: 576px) {
  .board-search form {
    flex-direction: column;
    align-items: stretch !important;
  }
  .board-search-select,
  .board-search-input,
  .btn-board-search {
    width: 100% !important;
    justify-content: center;
  }
  .board-footer {
    flex-direction: column;
    gap: 10px;
    align-items: stretch !important;
  }
  .btn-board-write {
    justify-content: center;
  }
}

/* 게시판 테이블 — 모바일에서 세로 카드형 레이아웃으로 전환
   (열 너비가 좁아 깨지는 문제 해결 / 색상·기능 변경 없음) */
@media (max-width: 768px) {
  .board-table colgroup,
  .board-table thead {
    display: none;
  }
  .board-table,
  .board-table tbody,
  .board-table tbody tr,
  .board-table tbody td {
    display: block;
    width: 100%;
  }
  .board-table tbody tr {
    position: relative;
    padding: 10px 4px;
    /* 탭 시 부분 하이라이트(흰색+주조색 혼합) 방지 */
    -webkit-tap-highlight-color: transparent;
  }
  /* 카드 클릭(탭/포커스) 시 전체 영역을 연한 주조색으로 통일 */
  .board-table tbody tr:hover,
  .board-table tbody tr:active,
  .board-table tbody tr:focus-within {
    background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
  }
  .board-table tbody td {
    padding: 4px 2px;
    text-align: left !important;
    white-space: normal;
    border: none;
    /* 셀 배경 투명화 → 행 배경색이 균일하게 비치도록 */
    background-color: transparent;
  }
  /* 라벨 : 값 형태로 표시 */
  .board-table tbody td[data-label]::before {
    content: attr(data-label) " : ";
    font-weight: 600;
    margin-right: 4px;
  }
  /* 제목 셀은 라벨 없이 강조해서 카드 상단에 표시 */
  .board-table tbody td.board-cell-title {
    font-size: 0.95rem;
    padding-bottom: 6px;
  }
  /* 카드 전체를 제목 링크 클릭 영역으로 확장 (어디를 눌러도 상세로 이동) */
  .board-table tbody td.board-cell-title .board-title-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  /* 작성자·작성일은 제목이 돋보이도록 작고 연하게 */
  .board-table tbody td.board-cell-meta,
  .board-table tbody td.board-cell-meta::before {
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
  }
}

/* Bootstrap Icons base - bi 라이브러리 미사용 시 필요 */
.bi {
    display: inline-block;
    width: 1em;
    height: 1em;
    font-size: inherit;
    line-height: 1;
    vertical-align: -.125em;
    background-repeat: no-repeat;
    background-size: 1em 1em;
}

/* Naver Blog Icon - currentColor 적용 (Bootstrap Icons 방식과 동일) */
.bi-naverblog-fill {
    background-color: currentColor;
    background-image: none;
    -webkit-mask-image: url("../img/naverblog.svg");
    mask-image: url("../img/naverblog.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 1em 1em;
    mask-size: 1em 1em;
}


/* ============================================================
   Hero Slider (bxSlider)
   ============================================================ */
.hero-slider {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* bxSlider가 JS로 강제 설정하는 width/margin을 덮어씀 */
.hero-visual .bx-wrapper {
  width: 100% !important;
  margin: 0 !important;
  padding: 0;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.hero-visual .bx-wrapper .bx-viewport {
  width: 100% !important;
  height: 480px !important;
  border-radius: 20px;
  box-shadow: 0 25px 60px color-mix(in srgb, #000, transparent 82%);
  overflow: hidden;
}

.hero-slider li {
  width: 100% !important;
}

.hero-slider li img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 1200px) {
  .hero-visual .bx-wrapper .bx-viewport { height: 400px !important; }
  .hero-slider li img { height: 400px; }
}

@media (max-width: 992px) {
  .hero-visual .bx-wrapper .bx-viewport { height: 350px !important; }
  .hero-slider li img { height: 350px; }
}

@media (max-width: 768px) {
  .hero .hero-block .hero-visual {
    max-width: 100%;
  }
  .hero-visual .bx-wrapper .bx-viewport { height: 260px !important; }
  .hero-slider li img { height: 260px; }
}

@media (max-width: 576px) {
  .hero-visual .bx-wrapper .bx-viewport { height: 220px !important; }
  .hero-slider li img { height: 220px; }
}

/* ============================================================
   Footer Sitelink Selectbox
   ============================================================ */
.footer-select {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 220px;
  padding: 7px 32px 7px 12px;
  font-size: 0.8rem;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--default-color), transparent 92%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%234d4d4d' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 75%);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.footer-select:hover {
  border-color: var(--accent-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
}

.footer-select:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.footer-select option {
  background-color: #fff;
  color: #333;
}

/* Nav Badge */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 4px;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background-color: var(--accent-color);
  border-radius: 8px;
  vertical-align: middle;
}

.nav-badge:empty {
  display: none;
}

/* main Color Text */
.text-main {
  color: var(--accent-color) !important;
  font-weight: 700;
}

/* sub Color Text */
.text-sub {
  color: var(--sub-color) !important;
  font-weight: 700;
}

/* sub Color 배경 강조 */
.bg-sub {
  background-color: var(--sub-color) !important;
  color: #fff !important;
  font-weight: 700;
}
/* bg-sub 내부 아이콘/텍스트도 흰색 강제 (main.css의 .btn-tour i 등 오버라이드) */
.bg-sub i,
.bg-sub span,
.bg-sub .bi {
  color: #fff !important;
}

/* sub Color 테두리 강조 */
.border-sub {
  border-color: var(--sub-color) !important;
}

/* sub Color 인라인 마커 (형광펜 효과) */
.mark-sub {
  background: linear-gradient(transparent 55%, color-mix(in srgb, var(--sub-color), transparent 55%) 55%);
  color: inherit;
  padding: 0 2px;
}

/* main Logo */
.header .logo img {
  max-height: 65px;
  margin-right: 8px;
}

.cards .card-item h5,
.cards .card-item.active h5 {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 7px;
}
.cards .card-item.active h5,
.cards .card-item:hover h5
{
  color: var(--contrast-color);
}

.page-title {
  --background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 50px 0;
  text-align: center;
  position: relative;
}

/* ============================================================
   Board View (게시글 상세) — view.tpl
   ============================================================ */

/* 헤더 */
.board-view-header {
  padding: 20px 0 14px;
  border-bottom: 2px solid var(--accent-color);
  margin-bottom: 0;
}
.board-view-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--heading-color);
  line-height: 1.6;
  margin-bottom: 10px;
}
.board-view-meta {
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

/* 상담 특수 필드 */
.board-view-extra {
  padding: 14px 16px;
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 82%);
  border-radius: 8px;
  font-size: 0.875rem;
}
.board-view-label {
  color: var(--accent-color);
  font-weight: 600;
  min-width: 60px;
  flex-shrink: 0;
}

/* 본문 */
.board-view-content {
  padding: 24px 0;
  font-size: 0.9rem;
  line-height: 1.85;
  min-height: 160px;
  word-break: break-word;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.board-view-content img {
  max-width: 100% !important;
  height: auto !important;
}

/* 첨부파일 */
.board-view-files {
  padding: 12px 16px;
  background: color-mix(in srgb, var(--default-color), transparent 95%);
  border-radius: 8px;
  margin-top: 12px;
  font-size: 0.875rem;
}
.board-view-files-title {
  font-size: 0.83rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--default-color);
}
.board-file-link {
  color: var(--default-color);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  padding: 2px 0;
  transition: color 0.2s;
}
.board-file-link:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

/* 이전/다음 버튼 */
.btn-board-nav {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 0.82rem;
  color: var(--default-color);
  background: color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.btn-board-nav:hover {
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
}

/* 수정/삭제/답글/목록 버튼 */
.btn-board-action {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 0.82rem;
  color: #fff;
  background: var(--accent-color);
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s;
}
.btn-board-action:hover {
  color: #fff;
  background: color-mix(in srgb, var(--accent-color), #000 15%);
}
.btn-board-delete {
  background: #c0392b;
}
.btn-board-delete:hover {
  background: #a93226;
}
.btn-board-list {
  background: color-mix(in srgb, var(--accent-color), transparent 55%);
}
.btn-board-list:hover {
  background: var(--accent-color);
}

/* 댓글 */
.board-comments {
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  padding-top: 20px;
}
.board-comments-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 16px;
}
.board-comment-textarea {
  resize: none;
  font-size: 0.875rem;
  border-color: color-mix(in srgb, var(--default-color), transparent 70%);
}
.board-comment-textarea:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 82%);
}
.btn-comment-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 8px 14px;
  color: #fff;
  background: var(--accent-color);
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.btn-comment-submit:hover {
  background: color-mix(in srgb, var(--accent-color), #000 15%);
}
.board-comment-item {
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
}
.board-comment-author {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--heading-color);
}
.board-comment-content {
  display: block;
  width: 100%;
  resize: none;
  border: none;
  background: transparent;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--default-color);
  padding: 6px 0 0;
  outline: none;
  overflow: hidden;
}
.btn-comment-action {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  padding: 2px 6px;
  font-size: 0.8rem;
  text-decoration: none;
  transition: color 0.2s;
}
.btn-comment-action:hover {
  color: var(--accent-color);
}

/* 반응형 */
@media (max-width: 576px) {
  .board-view-actions {
    flex-direction: column;
    gap: 10px;
    align-items: stretch !important;
  }
  .board-view-actions > div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
  }
  .board-view-actions .btn-board-nav,
  .board-view-actions .btn-board-action {
    flex: 1;
    justify-content: center;
    min-width: 70px;
  }
}

/* ============================================================
   Entrance Exam Report (test_report_wrap)
   default.css에서 추출 → Bootstrap 5 student 스킨 적용
   비팝업 모드에서는 default.css 미로드 → 이 파일에서 스타일 공급
   팝업 모드는 default.css 자체 로드 유지 (markup 수정 없음)
   ============================================================ */

/* 래퍼 — Bootstrap container 전폭 */
.test_report_wrap {
  max-width: 760px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 배너 */
.test_report_wrap .s_cont_banner {
  margin-bottom: 40px;
}
.test_report_wrap .s_cont_banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* 출력 버튼 */
.test_report_wrap .btn_print {
  margin-bottom: 19px;
  text-align: right;
}
.btn_print a {
  position: relative;
  display: inline-block;
  height: 24px;
  line-height: 24px;
  padding: 0 14px;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  border-radius: 2px;
  background: linear-gradient(to bottom, #a8a8a8, #8b8b8b);
  text-decoration: none;
}

/* 하단 알림 */
.test_report_wrap .test_report_noti {
  text-align: center;
}
.test_report_wrap .test_report_noti p {
  margin-bottom: 40px;
  font-size: 12px;
  color: #777;
}
.test_report_wrap .test_report_noti img {
  max-width: 100%;
  height: auto;
}

/* 시트 공통 */
.test_report_sheet {
  margin-bottom: 40px;
  border-top: 3px solid var(--accent-color);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.test_report_sheet table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.test_report_wrap .test_report_sheet td:last-child {
  border-right: none;
}

/* type_detail — 개인정보 / 배정반 시트 */
.test_report_sheet.type_detail {
  border-bottom: 1px solid var(--accent-color);
}
.test_report_sheet.type_detail th,
.test_report_sheet.type_detail td {
  padding: 10px 10px 10px 20px;
  text-align: left;
  vertical-align: middle;
  font-size: 13px;
  line-height: 1.8;
  color: #333;
  border-bottom: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
  box-sizing: border-box;
}
.test_report_sheet.type_detail tr:last-child th,
.test_report_sheet.type_detail tr:last-child td {
  border-bottom: none;
}
.test_report_sheet.type_detail th {
  background-color: #eee;
  font-weight: bold;
}
.test_report_sheet.type_detail .desc {
  padding: 20px 10px 20px 20px;
  word-break: keep-all;
}

/* type_score — 영역별 점수 시트 */
.test_report_sheet.type_score th,
.test_report_sheet.type_score td {
  text-align: center;
  font-size: 13px;
  border-bottom: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
  box-sizing: border-box;
}
.test_report_sheet.type_score th {
  padding: 10px 0;
  background-color: var(--accent-color);
  color: #fff;
  font-weight: bold;
}
.test_report_sheet.type_score td {
  padding: 13px 0;
  color: #333;
}
.test_report_sheet.type_score td span {
  color: #777;
}
.test_report_sheet.type_score td span strong {
  font-size: 19px;
  color: #333;
  font-weight: bold;
}
.test_report_sheet.type_score td span .total {
  color: var(--accent-color);
  font-weight: 900;
}

/* type_graph — 그래프 시트 */
.test_report_sheet.type_graph th,
.test_report_sheet.type_graph td {
  font-size: 13px;
  border-bottom: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
  box-sizing: border-box;
}
.test_report_sheet.type_graph .graph_box th {
  background-color: var(--accent-color);
  text-align: center;
  vertical-align: top;
  font-size: 15px;
  color: #fff;
  font-weight: bold;
}

/* 점수 막대 그래프 */
.score_graph {
  padding: 26px 30px 0;
  position: relative;
}
.score_graph * {
  box-sizing: border-box;
}
.score_graph .units {
  width: 100%;
  height: 26px;
  background-color: #eee;
  position: absolute;
  left: 0;
  top: 0;
}
.score_graph .units em {
  font-size: 12px;
  line-height: 26px;
  color: #777;
  position: absolute;
  top: 0;
  font-style: normal;
}
.score_graph .units em:nth-of-type(1) { left: 30px; }
.score_graph .units em:nth-of-type(2) { left: 50%; transform: translate(-50%, 0); }
.score_graph .units em:nth-of-type(3) { right: 30px; }
.score_graph .range_area {
  height: 40px;
  padding: 10px 0;
  position: relative;
}
.score_graph .range_area .gradation {
  width: 100%;
  height: 100%;
  font-size: 0;
  position: absolute;
  left: 0;
  top: 0;
}
.score_graph .range_area .gradation::before {
  content: '';
  height: 100%;
  border-left: 1px dashed #e4e4e4;
  position: absolute;
  left: 0;
  top: 0;
}
.score_graph .range_area .gradation span {
  width: 10%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  border-right: 1px dashed #e4e4e4;
}
.score_graph .range_area .bar {
  height: 19px;
  text-align: right;
  background-color: #f7a600;
  position: relative;
  z-index: 1;
}
.score_graph .range_area .bar em {
  margin-right: 6px;
  font-size: 14px;
  letter-spacing: -1px;
  line-height: 19px;
  color: #000;
  font-style: normal;
}

/* info_box — 역량 설명 테이블 */
.test_report_sheet.type_graph .info_box th,
.test_report_sheet.type_graph .info_box td {
  padding: 4px 0;
  font-size: 12px;
  text-align: center;
}
.test_report_sheet.type_graph .info_box th {
  color: #777;
  background-color: #eee;
}
.test_report_sheet.type_graph .info_box th:last-child {
  border-right: none;
}
.test_report_sheet.type_graph .info_box td {
  color: #333;
}
.test_report_sheet.type_graph .info_box .desc {
  padding: 4px 10px 4px 30px;
  text-align: left;
}

#leveltest-details .report_no{
    text-align:center;font-size:15px;color:#666;padding:40px 0 90px;margin-bottom:50px;border-bottom:1px solid #e3e3e3;
}

/* 반응형: 테이블 가로 스크롤 */
@media (max-width: 768px) {
  .test_report_sheet table {
    min-width: 480px;
  }
  .test_report_sheet.type_detail th,
  .test_report_sheet.type_detail td {
    padding: 8px 8px 8px 12px;
    font-size: 12px;
  }
}

/* 인쇄 */
@media print {
  .test_report_wrap .btn_print { display: none; }
  .test_report_sheet { overflow-x: visible; }
  .test_report_sheet table { width: 100%; table-layout: auto; }
}

/* ============================================================
   My History (student/myhistory/views/bright/history.tpl)
   ============================================================ */

/* 공통 컬러 유틸 */
.blue  { color: #3333cc; }
.green { color: #339900; }
.red   { color: #f32c85; }

/* 텍스트 유틸 */
.text2_sche3 { color: #7d7d7d; font-size: 0.9rem; }
.text2_sche4 { color: var(--accent-color); font-size: 0.875rem; font-weight: 600; }
.text2_gray  { color: #9a9a9a; font-size: 0.875rem; line-height: 1.9; }

/* 공통 버튼 */
a.btn_common {
  display: inline-block;
  padding: 5px 16px;
  color: #fff;
  font-size: 0.85rem;
  border-radius: 4px;
  background: linear-gradient(to bottom, var(--accent-color), color-mix(in srgb, var(--accent-color), #000 30%));
  text-decoration: none;
  transition: opacity 0.2s;
}
a.btn_common:hover {
  color: #fff;
  opacity: 0.85;
}

/* ── 수강이력 테이블 ── */
#history .table {
  font-size: 1rem;
  margin-bottom: 20px;
}

/* thead */
#history .table thead tr {
  background-color: var(--accent-color);
}
#history .table thead th {
  border: none;
  padding: 10px 8px;
  vertical-align: middle;
  white-space: nowrap;
}
#history .table thead th p {
  margin: 0;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}
#history .table thead th p.last,
#history .table thead th:last-child p {
  border-right: none;
}

/* tbody */
#history .table tbody td {
  padding: 9px 8px;
  vertical-align: middle;
  color: #555;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
}
#history .table tbody tr:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 96%);
}
#history .table tbody td.last,
#history .table tfoot td {
  border-right: none;
}

/* 라디오 버튼 */
#history .table input[type="radio"] {
  cursor: pointer;
  accent-color: var(--accent-color);
  width: 15px;
  height: 15px;
}

/* 수강증 버튼 + 안내문구 영역 */
.history-footer {
  padding: 16px 20px;
  background: color-mix(in srgb, var(--default-color), transparent 96%);
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
}

/* 안내문구 리스트 */
.history-notice li {
  font-size: 0.875rem;
  color: #9a9a9a;
  line-height: 1.9;
  padding: 1px 0;
}

/* 온라인 결제내역 타이틀 */
.history-online-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent-color);
}

/* 소형 버튼 (영수증) */
.btn-sm-action {
  padding: 3px 10px;
  font-size: 0.78rem;
}

/* 반응형 */
@media (max-width: 768px) {
  #history .table thead th,
  #history .table tbody td {
    font-size: 0.85rem;
    padding: 7px 6px;
    white-space: nowrap;
  }
  .history-footer {
    padding: 14px;
  }
}

/* ============================================================
   Message / 알림장 (for_student/views/message/bright)
   ============================================================ */

/* snb 탭 네비 */
.message-nav .nav-link {
  color: var(--default-color);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 7px 18px;
  border-radius: 20px;
  transition: background 0.2s, color 0.2s;
}
.message-nav .nav-link:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
}
.message-nav .nav-link.active {
  background: var(--accent-color);
  color: #fff;
}

/* 테이블 */
#message .table {
  font-size: 1rem;
  margin-bottom: 0;
}
#message .table thead tr {
  background-color: var(--accent-color);
}
#message .table thead th {
  border: none;
  padding: 10px 12px;
  color: #fff !important;
  background-color: var(--accent-color);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}
#message .table tbody td {
  padding: 10px 12px;
  vertical-align: middle;
  color: #555;
  font-size: 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
}
#message .table tbody tr:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 96%);
}

/* 제목 링크 */
.message-title-link {
  color: var(--default-color);
  text-decoration: none;
  font-weight: 500;
}
.message-title-link:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

/* 발신/수신자 링크 */
.message-sender-link {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 0.85rem;
  text-decoration: none;
}
.message-sender-link:hover {
  color: var(--accent-color);
}

/* 미확인 뱃지 */
.badge-unread {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background-color: #e74c3c;
  border-radius: 10px;
}

/* 체크박스 */
#message .table input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--accent-color);
  width: 15px;
  height: 15px;
}

/* 알림장 테이블 — 모바일에서 세로 카드형 레이아웃으로 전환
   (열 너비가 좁아 깨지는 문제 해결 / 색상·기능 변경 없음) */
@media (max-width: 768px) {
  #message .table colgroup,
  #message .table thead {
    display: none;
  }
  #message .table,
  #message .table tbody,
  #message .table tbody tr,
  #message .table tbody td {
    display: block;
    width: 100%;
  }
  /* 카드(행) 간 구분 */
  #message .table tbody tr {
    position: relative;
    padding: 12px 4px;
    /* 카드 구분선도 주조색 계열로 통일 (회색과 겹쳐 보이는 문제 방지) */
    border-bottom: 1px solid color-mix(in srgb, var(--accent-color), transparent 85%);
    /* 탭 시 부분 하이라이트(흰색+주조색 혼합) 방지 */
    -webkit-tap-highlight-color: transparent;
  }
  /* Bootstrap .table-hover 기본 회색 hover 제거 (주조색과 겹쳐 보이는 원인) */
  #message .table {
    --bs-table-hover-bg: transparent;
    --bs-table-hover-color: inherit;
  }
  #message .table.table-hover > tbody > tr:hover > * {
    box-shadow: none;
    background-color: transparent;
  }
  /* 카드 클릭(탭/포커스) 시 전체 영역을 연한 주조색으로 통일 */
  #message .table tbody tr:hover,
  #message .table tbody tr:active,
  #message .table tbody tr:focus-within {
    background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
  }
  #message .table tbody td {
    padding: 3px 2px;
    text-align: left !important;
    white-space: normal;
    border: none;
    /* 셀 배경 투명화 → 행 배경색이 균일하게 비치도록 */
    background-color: transparent;
  }
  /* 라벨 : 값 형태로 표시 */
  #message .table tbody td[data-label]::before {
    content: attr(data-label) " : ";
    font-weight: 600;
    margin-right: 4px;
  }
  /* 제목 셀은 라벨 없이 강조하고, 아래 구분선으로 나머지 정보와 분리 */
  #message .table tbody td.message-cell-title {
    font-size: 1rem;
    font-weight: 600;
    padding-right: 28px;
    padding-bottom: 8px;
    margin-bottom: 6px;
    /* 제목 아래 구분선도 주조색 계열로 통일 */
    border-bottom: 1px solid color-mix(in srgb, var(--accent-color), transparent 90%);
  }
  /* 제목은 주조색으로 표시해 링크임을 인지할 수 있게 */
  #message .table tbody td.message-cell-title .message-title-link {
    color: var(--accent-color);
  }
  /* 카드 전체를 제목 링크 클릭 영역으로 확장 (어디를 눌러도 상세로 이동) */
  #message .table tbody td.message-cell-title .message-title-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  /* 발신/수신자 링크는 카드 링크 위에 두어 개별 클릭 가능하게 */
  #message .table tbody td .message-sender-link {
    position: relative;
    z-index: 2;
  }
  /* 체크박스는 카드 우측 상단에 고정 (카드 링크보다 위) */
  #message .table tbody td.message-cell-check {
    position: absolute;
    top: 10px;
    right: 4px;
    width: auto;
    padding: 0;
    z-index: 2;
  }
  /* 발신/수신일은 제목이 돋보이도록 작고 연하게 */
  #message .table tbody td.message-cell-meta,
  #message .table tbody td.message-cell-meta::before {
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
  }
}

/* 하단 버튼 + 페이지네이션 */
.message-navi {
  display: flex;
  align-items: center;
}

/* 반응형 */
@media (max-width: 768px) {
  #message .table thead th,
  #message .table tbody td {
    font-size: 0.82rem;
    padding: 8px 8px;
    white-space: nowrap;
  }
  .message-send-body {
    padding: 4px 16px;
  }
  .message-send-field {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 0;
  }
  .message-recipient-inputs {
    grid-template-columns: 1fr;
  }
  .message-send-textarea {
    min-height: 220px;
  }
  .message-send-submit {
    width: 100%;
  }
}

/* 메시지 보내기 */
.message-send-card {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 10px;
  background: var(--surface-color);
}
.message-send-header {
  padding: 16px 20px;
  background: color-mix(in srgb, var(--accent-color), transparent 94%);
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
}
.message-send-title {
  margin: 0;
  color: var(--heading-color);
  font-size: 1rem;
  font-weight: 600;
}
.message-send-title i {
  color: var(--accent-color);
}
.message-send-body {
  padding: 8px 20px;
}
.message-send-field {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
.message-send-field:last-child {
  border-bottom: 0;
}
.message-send-content-field {
  align-items: start;
}
.message-send-label {
  color: var(--heading-color);
  font-size: 0.88rem;
  font-weight: 600;
}
.message-send-control {
  min-width: 0;
}
.message-send-control .form-control,
.message-send-control .form-select {
  border-color: color-mix(in srgb, var(--default-color), transparent 75%);
  font-size: 0.9rem;
}
.message-send-control .form-control:focus,
.message-send-control .form-select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-color), transparent 85%);
}
.message-recipient-inputs {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 10px;
}
.message-recipient {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 3px 8px 3px 0;
  color: var(--default-color);
  font-size: 0.9rem;
  word-break: break-word;
}
.message-recipient i {
  color: var(--accent-color);
}
.message-send-textarea {
  min-height: 250px;
  resize: vertical;
}
.message-send-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.message-send-submit {
  min-width: 100px;
  justify-content: center;
}


/* ============================================================
   Quiz Result (myreport/views/quiz)
   default.css 추출 → Bootstrap 5 반응형 적용
   ============================================================ */

/* 섹션 탭 버튼 */
.quiz_result .q_tab {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 10px;
  margin-bottom: 20px;
}
.quiz_result .q_tab a {
  position: relative;
  display: flex;
  flex: 0 0 calc(50% - 5px);
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 12px 20px;
  color: #888;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 28px;
  background: #eee;
  box-sizing: border-box;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.quiz_result .q_tab a span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  word-break: break-all;
}
.quiz_result .q_tab a:hover,
.quiz_result .q_tab a.active {
  color: #fff;
  font-weight: 700;
  background-color: var(--accent-color);
}

/* 정렬 영역 */
.quiz_result .result_wrap {
  margin-top: 30px;
}
.quiz_cont .sort_area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* 정렬 탭 (PASS / FAIL / 전체) */
.quiz_cont .sort_area .sort_tab {
  display: flex;
  align-items: center;
}
.quiz_cont .sort_area .sort_tab a {
  position: relative;
  display: inline-block;
  color: #999;
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.15s;
}
.quiz_cont .sort_area .sort_tab a + a {
  padding-left: 11px;
  margin-left: 7px;
}
.quiz_cont .sort_area .sort_tab a + a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  background: var(--sub-color);
  border-radius: 50%;
}
.quiz_cont .sort_area .sort_tab a.active {
  color: var(--accent-color);
  font-weight: 700;
}

/* 셀렉트 박스 */
.quiz_cont .sort_area .sort_select {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.quiz_cont .sort_area .sort_select > div {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
}
.quiz_cont .sort_area .sort_select > div select {
  width: 100%;
  height: 34px;
  color: #666;
  font-size: 0.875rem;
  padding: 0 28px 0 14px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  border-radius: 17px;
  background: #f4f4f4;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
}
.quiz_cont .sort_area .sort_select > div select:focus {
  border-color: var(--accent-color);
}
.quiz_cont .sort_area .sort_select > div::after {
  content: '▼';
  position: absolute;
  top: 9px;
  right: 10px;
  color: var(--accent-color);
  font-size: 0.6rem;
  pointer-events: none;
}
.quiz_cont .sort_area .sort_select .sel_month { width: 140px; }
.quiz_cont .sort_area .sort_select .sel_class  { width: 200px; }

/* 결과 리스트 */
.quiz_cont .result_list {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 2px solid var(--accent-color);
}
.quiz_cont .result_list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 결과 카드 */
.quiz_cont .result_list ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(33.333% - 14px);
  min-height: 200px;
  border-radius: 12px;
  background: #f4f4f4;
  box-sizing: border-box;
  padding: 20px 16px;
}
.quiz_cont .result_list ul li > div {
  width: 100%;
  text-align: center;
}

/* 날짜 */
.quiz_cont .result_list ul .result_type .date {
  margin: 6px 0 10px;
  color: #222;
  font-size: 0.9rem;
  font-weight: 700;
}

/* PASS / FAIL 텍스트 */
.quiz_cont .result_list ul .result_type strong {
  position: relative;
  display: block;
  line-height: 1;
  margin-bottom: 18px;
  color: #bbb;
  font-size: 3rem;
  font-weight: 900;
}

/* 점수 dl */
.quiz_cont .result_list ul .result_type dl {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 6px 0;
  border-top: 1px dashed #ddd;
  margin: 0;
}
.quiz_cont .result_list ul .result_type dt {
  color: #555;
  font-size: 0.78rem;
  font-weight: 600;
}
.quiz_cont .result_list ul .result_type dt b {
  padding-left: 2px;
  font-size: 1rem;
  font-weight: 700;
}
.quiz_cont .result_list ul .result_type dd {
  color: #555;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0;
}
.quiz_cont .result_list ul .result_type dd b {
  color: var(--sub-color);
  font-size: 1.6rem;
  font-weight: 900;
}

/* PASS */
.quiz_cont .result_list ul .result_type.pass strong {
  color: var(--accent-color);
}
.quiz_cont .result_list ul .result_type.pass strong::after {
  content: '★';
  position: absolute;
  right: 14px;
  top: -8px;
  font-size: 1rem;
  color: var(--sub-color);
}

/* FAIL */
.quiz_cont .result_list ul .result_type.fail strong {
  color: #e74c3c;
}

/* 결과없음 카드 */
.quiz_cont .result_list ul .result_type.none {
  color: #999;
  font-size: 0.9rem;
}

/* 데이터 없음 */
.quiz_cont .data_none {
  padding: 60px 0;
  color: #999;
  font-size: 0.9rem;
  border-top: 2px solid var(--accent-color);
  border-bottom: 1px solid #e3e3e3;
  text-align: center;
}

/* 반응형 */
@media (max-width: 992px) {
  .quiz_cont .result_list ul li {
    width: calc(50% - 10px);
  }
}
@media (max-width: 768px) {
  .quiz_cont .sort_area {
    flex-direction: column;
    align-items: flex-start;
  }
  .quiz_cont .sort_area .sort_select {
    width: 100%;
  }
  .quiz_cont .sort_area .sort_select .sel_month,
  .quiz_cont .sort_area .sort_select .sel_class {
    width: 50%;
    flex: 1;
  }
}
@media (max-width: 576px) {
  .quiz_result .q_tab a {
    flex: 0 0 100%;
  }
  .quiz_cont .result_list ul li {
    width: 100%;
  }
  .quiz_cont .sort_area .sort_select .sel_month,
  .quiz_cont .sort_area .sort_select .sel_class {
    width: 100%;
    flex: unset;
  }
}

/* ============================================================
   Sitemap (student/sitemap/views/view_b.tpl)
   default.css 기반 → Bootstrap 5 반응형 적용
   이미지 불릿(ico_bullet.png) → CSS ::before 대체
   ============================================================ */

.sitemapBox {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0;
  gap: 0;
}

.sitemapBoxList {
  width: 25%;
  margin-bottom: 30px;
  box-sizing: border-box;
  padding-right: 20px;
}

.sitemapBoxList ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 대메뉴 헤더 */
.sitemapBoxList li.sitemap_header {
  margin-bottom: 10px;
  border-bottom: 2px solid var(--accent-color);
}
.sitemapBoxList li.sitemap_header a {
  display: block;
  padding: 8px 4px;
  color: var(--accent-color);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  background: none;
}
.sitemapBoxList li.sitemap_header a:hover {
  color: color-mix(in srgb, var(--accent-color), #000 20%);
}

/* 서브메뉴 아이템 */
.sitemapBoxList li {
  margin-bottom: 3px;
}
.sitemapBoxList li a {
  position: relative;
  display: block;
  padding: 5px 5px 5px 18px;
  color: #666;
  font-size: 13px;
  text-decoration: none;
  transition: color 0.15s;
}

/* 이미지 불릿 → CSS 화살표로 대체 */
.sitemapBoxList li a::before {
  content: '›';
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-color);
  font-size: 15px;
  line-height: 1;
}
/* 헤더 링크에는 불릿 제외 */
.sitemapBoxList li.sitemap_header a::before {
  display: none;
}

.sitemapBoxList li a:hover {
  color: var(--accent-color);
  font-weight: 600;
}

/* 반응형 */
@media (max-width: 992px) {
  .sitemapBoxList {
    width: 33.333%;
  }
}
@media (max-width: 768px) {
  .sitemapBoxList {
    width: 50%;
  }
}
@media (max-width: 480px) {
  .sitemapBox {
    padding: 0;
  }
  .sitemapBoxList {
    width: 100%;
    padding-right: 0;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  }
}

/* ============================================================
   My Report / Report Card
   bright_report.tpl  +  report_card_for_student_on_bright*.tpl
   default.css 추출 → Bootstrap 5 반응형 적용
   ============================================================ */

/* ── 성적표 페이지 전체 너비 제한 ── */
#myReport .container {
  max-width: 760px;
}

/* ── 학기 선택 드롭다운 (bright_report.tpl) ── */
#myReport .sort_select {
  margin-bottom: 20px;
  text-align: right;
}
#myReport .sort_select .sel_class {
  position: relative;
  display: inline-block;
}
#myReport .sort_select .sel_class select {
  width: 270px;
  height: 36px;
  color: #666;
  font-size: 0.85rem;
  padding: 0 36px 0 16px;
  border: none;
  border-radius: 20px;
  background: #f4f4f4;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}
#myReport .sort_select .sel_class::after {
  content: '▼';
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 0.65rem;
  color: var(--accent-color);
  pointer-events: none;
}

/* ── 성적표 없음 ── */
#myReport .report_no {
  padding: 60px 0 80px;
  text-align: center;
  font-size: 0.875rem;
  color: #666;
  border-bottom: 1px solid #e3e3e3;
  margin-bottom: 40px;
}

/* ── PRINT / SR 공통 버튼 ── */
a.btn_common_arr {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 20px 8px 18px;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 4px;
  background: linear-gradient(to bottom, var(--accent-color), color-mix(in srgb, var(--accent-color), #000 30%));
  text-decoration: none;
  transition: opacity 0.2s;
}
a.btn_common_arr::after {
  content: '›';
  margin-left: 6px;
  font-size: 1.1rem;
  line-height: 1;
}
a.btn_common_arr:hover {
  color: #fff;
  opacity: 0.85;
}

/* ============================================================
   report_card_for_student_on_bright_v2.tpl
   ============================================================ */

.report_card {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}
.report_card img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 학생 기본정보 */
.report_card .user_info {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 20px 24px 0;
  border-bottom: 1px solid #e7e7e7;
  background: #f8f8f8;
  box-sizing: border-box;
}
.report_card .user_info dl {
  width: 50%;
  padding: 16px 0;
}
.report_card .user_info dl:nth-of-type(1),
.report_card .user_info dl:nth-of-type(2) {
  border-bottom: 1px dashed #dfdfdf;
}
.report_card .user_info dt {
  position: relative;
  display: inline-block;
  /*width: 90px;*/
  padding-right: 12px;
  margin-right: 10px;
  color: #222;
  font-size: 1rem;
  font-weight: 700;
  text-align: right;
  box-sizing: border-box;
}
.report_card .user_info dt::after {
  content: '';
  position: absolute;
  right: 0;
  top: 11px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #222;
}
.report_card .user_info dd {
  display: inline-block;
  color: #777;
  font-size: 1rem;
  font-weight: 700;
}

/* 영역별 점수 (type1~4 컬럼) */
.report_card .sbj_score {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  margin: 40px 0;
  text-align: center;
}
.report_card .sbj_score dl {
  flex: 1;
  min-width: 0;
}
.report_card .sbj_score dt {
  height: 48px;
  line-height: 48px;
  margin-bottom: 5px;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  background: #444;
  border-radius: 10px;
}
.report_card .sbj_score dd {
  padding: 0;
  margin: 0;
}
.report_card .sbj_score dd ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.report_card .sbj_score dd li {
  height: 48px;
  line-height: 48px;
  color: #777;
  font-size: 0.875rem;
  font-weight: 700;
  list-style: none;
  background: #eee;
  border: 2.5px solid #eee;
  border-radius: 10px;
}
.report_card .sbj_score dd li + li {
  margin-top: 5px;
}
.report_card .sbj_score .type3 dd li {
  color: #222;
  font-size: 0.9rem;
  background: #f6f6f6;
  border-color: #f6f6f6;
}
.report_card .sbj_score .type4 dt {
  background: var(--accent-color);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.report_card .sbj_score .type4 dd li {
  color: var(--accent-color);
  font-size: 0.95rem;
  font-weight: 900;
  background: #fff;
  border-color: var(--accent-color);
}

/* 종합평가 */
.report_card .evaluation {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  margin: 30px 0;
}
.report_card .evaluation dl {
  flex: 1;
  min-width: 260px;
  text-align: center;
  border-radius: 15px;
  border: 1px solid var(--accent-color);
  overflow: hidden;
}
.report_card .evaluation dl dt {
  padding: 12px 0;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  background: var(--accent-color);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.report_card .evaluation dl dd {
  padding: 20px 12px;
  color: var(--accent-color);
  font-size: 1rem;
  font-weight: 900;
  word-break: break-word;
  margin: 0;
}

/* 서명 영역 */
.report_card .sign_area {
  margin-top: 24px;
  text-align: right;
}
.report_card .sign_area img {
  max-width: 100%;
  height: auto;
}

/* 평가 기준 이미지 */
.report_card .criteria {
  margin: 60px 0;
}
.report_card .criteria img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 스피킹 평가 코멘트 */
.report_card .comment {
  margin-bottom: 40px;
}
.report_card .comment img {
  max-width: 100%;
  height: auto;
  display: block;
}
.report_card .cmt_cont {
  line-height: 1.75;
  padding: 60px 40px 40px;
  color: #777;
  font-size: 0.875rem;
  border-bottom: 1px solid #e7e7e7;
  background: #f8f8f8 url('/asset/bright/asset/junior/branch/img/myclass/bg_comment.png') no-repeat 40px 30px;
  word-break: break-word;
}
.report_card .cmt_cont * {
  color: #777;
  font-size: 0.875rem;
  word-break: break-word;
}

/* 리딩/문법 상세점수 테이블 (v2 .report_tbl) */
.report_card .report_tbl {
  overflow-x: auto;
  margin-bottom: 20px;
}
.report_card .report_tbl table {
  width: 100%;
  min-width: 400px;
  border-collapse: collapse;
}
.report_card .report_tbl table tr:first-child td {
  border-top: 1px solid var(--accent-color);
}
.report_card .report_tbl table tr + tr td {
  border-top: 1px solid #e3e3e3;
}
.report_card .report_tbl table tr:last-child td {
  border-bottom: 1px solid var(--accent-color);
}
.report_card .report_tbl td {
  padding: 14px 20px;
  color: #222;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}
.report_card .report_tbl td + td {
  border-left: 1px solid #e3e3e3;
}
.report_card .report_tbl td > div {
  display: flex;
  justify-content: space-between;
}
.report_card .report_tbl td span {
  color: #999;
}
.report_card .report_tbl td span em {
  color: var(--accent-color);
  font-style: normal;
}
.report_card .report_tbl td.total {
  color: #fff;
  font-size: 0.95rem;
  background: var(--accent-color);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.report_card .report_tbl td.total span {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
}
.report_card .report_tbl td.total span em {
  color: var(--sub-color);
  font-style: normal;
  font-weight: 900;
}

/* ── 그래프 공통 ── */
.graph_wrap {
  position: relative;
  padding-bottom: 60px;
  margin-bottom: 20px;
}
.graph_wrap .tit_graph {
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 16px;
}
.graph_wrap .tit_graph span {
  color: var(--accent-color);
}
.graph_wrap .gh_info {
  margin-bottom: 16px;
  text-align: right;
}
.graph_wrap .gh_info li {
  display: inline-block;
  color: #666;
  font-size: 0.8rem;
  vertical-align: middle;
}
.graph_wrap .gh_info li + li {
  margin-left: 15px;
}
.graph_wrap .gh_info li::before {
  content: '●';
  display: inline-block;
  font-size: 0.9rem;
  margin-right: 4px;
  vertical-align: middle;
}
.graph_wrap .gh_info li:nth-child(1)::before { color: #eee; }
.graph_wrap .gh_info li:nth-child(2)::before { color: var(--accent-color); }

/* v2 그래프 (bg_graph2.png — 720px 배경) */
.graph_wrap .graph_group {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 720px;
  height: 257px;
  padding: 0 0 6px 40px;
  background: url('/asset/bright/asset/junior/branch/img/myclass/bg_graph2.png') no-repeat 0 0;
  box-sizing: border-box;
}
.graph_wrap .graph_cont {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 25%;
  height: 245px;
}
.graph_wrap .graph_cont .gh_txt {
  position: absolute;
  bottom: -28px;
  font-size: 0.875rem;
  color: #222;
  font-weight: 700;
  white-space: nowrap;
}
.graph_wrap .gh_area {
  position: relative;
  display: inline-block;
  width: 40px;
  height: calc((var(--score) / 60) * 100%);
  margin: 0 5px;
}
.graph_wrap .gh_area .bar {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  background-color: #eee;
  border-radius: 30px 30px 0 0;
}
.graph_wrap .gh_area.my .bar {
  background-color: var(--accent-color);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.graph_wrap .gh_area em {
  position: absolute;
  top: 15px;
  left: 0;
  width: 100%;
  color: #999;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: -0.7px;
  text-align: center;
}
.graph_wrap .gh_area.my em {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 900;
}
.graph_wrap .info_txt {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: right;
  border-top: 1px dotted #d2d2d2;
  font-size: 0.78rem;
  color: #999;
  padding-top: 6px;
}

/* v1 그래프 (graph_wrap.low — bg_graph.jpg, absolute 배치) */
.graph_wrap.low {
  display: flex;
  justify-content: flex-start;
  gap: 30px;
  flex-wrap: wrap;
}
.graph_wrap.low .tit_graph,
.graph_wrap.low .gh_info {
  margin-left: 10px;
}
.graph_wrap.low .gh_info {
  text-align: center;
  background-color: #f3f3f3;
  padding: 2px 10px;
}
.graph_wrap.low .gh_info li::before { content: '■'; }
.graph_wrap.low .gh_info li:nth-child(1)::before { color: var(--accent-color); }
.graph_wrap.low .gh_info li:nth-child(2)::before { color: var(--sub-color); }
.graph_wrap.low .graph_group {
  display: block;
  width: 350px;
  max-width: 350px;
  height: 220px;
  padding: 0;
  background: url('/asset/bright/asset/junior/branch/img/myclass/bg_graph.jpg') no-repeat 0 0;
  position: relative;
  margin-top: 18px;
}
.graph_wrap.low .graph_cont {
  position: absolute;
  bottom: 4px;
  width: 20%;
  height: 211px;
  display: block;
}
.graph_wrap.low .graph_cont:nth-of-type(1) { left: 70px; }
.graph_wrap.low .graph_cont:nth-of-type(2) { left: 168px; }
.graph_wrap.low .graph_cont:nth-of-type(3) { left: 265px; }
.graph_wrap.low .graph_cont .gh_txt {
  position: absolute;
  bottom: -22px;
  left: 10px;
  font-size: 0.75rem;
  font-weight: 900;
  white-space: nowrap;
}
.graph_wrap.low .gh_area {
  position: absolute;
  display: block;
  width: 20px;
  left: 0;
  bottom: 0;
  margin: 0;
}
.graph_wrap.low .gh_area.my { left: 25px; }
.graph_wrap.low .gh_area .bar {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  background-color: var(--accent-color);
  border-radius: 0;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.graph_wrap.low .gh_area.my .bar { background-color: var(--sub-color); }
.graph_wrap.low .gh_area em {
  position: absolute;
  top: -17px;
  left: 0;
  width: 20px;
  text-align: center;
  font-size: 0.72rem;
  color: var(--accent-color);
  letter-spacing: -0.7px;
}
.graph_wrap.low .gh_area.my em {
  color: var(--sub-color);
  font-weight: 900;
}

/* ============================================================
   report_card_for_student_on_bright.tpl (v1 버전)
   ============================================================ */

/* 테이블 공통 */
div[class^=report_tbl] {
  overflow-x: auto;
  margin-bottom: 16px;
}
div[class^=report_tbl] table {
  width: 100%;
  border-collapse: collapse;
}
div[class^=report_tbl] tbody td .score {
  color: var(--accent-color);
  font-weight: 900;
}

/* .report_tbl1 — 학생 기본정보 */
.report_tbl1 table {
  min-width: 480px;
  border-top: 2px solid var(--accent-color);
}
.report_tbl1 th,
.report_tbl1 td {
  height: 40px;
  font-size: 0.85rem;
  padding: 0 14px;
}
.report_tbl1 th {
  font-weight: 700;
  color: #fff;
  background-color: var(--accent-color);
  border-bottom: 1px solid color-mix(in srgb, var(--accent-color), #000 38%);
  border-right: 1px solid color-mix(in srgb, var(--accent-color), #000 38%);
  white-space: nowrap;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.report_tbl1 td {
  padding-left: 20px;
  color: #222;
  border-bottom: 1px solid #d7d7d7;
}
.report_tbl1 td.group {
  font-weight: 700;
  color: var(--sub-color);
  background-color: var(--accent-color);
  border-bottom: 1px solid color-mix(in srgb, var(--accent-color), #000 38%);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* .report_tbl2 — 최종결과 (100점 환산) */
.report_tbl2 table {
  min-width: 480px;
}
.report_tbl2 th,
.report_tbl2 td {
  height: 40px;
  font-size: 0.85rem;
  text-align: center;
  padding: 0 10px;
}
.report_tbl2 thead th {
  font-weight: 700;
  color: #fff;
  background-color: var(--accent-color);
  border-right: 1px solid color-mix(in srgb, var(--accent-color), #000 38%);
  border-bottom: 1px solid color-mix(in srgb, var(--accent-color), #000 38%);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.report_tbl2 tbody th,
.report_tbl2 tbody td {
  border-right: 1px solid #d7d7d7;
  border-bottom: 1px solid #d7d7d7;
}
.report_tbl2 tbody th {
  font-weight: 700;
  color: #222;
  background-color: #f3f3f3;
}
.report_tbl2 tbody td {
  font-weight: 700;
  color: #999;
}
.report_tbl2 tbody td.total {
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  background-color: var(--accent-color);
  border-right: none;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.report_tbl2 tbody td.total span {
  font-weight: 700;
  color: var(--sub-color);
}
.report_tbl2 .bor_no {
  border-right: none !important;
}

/* .report_tbl3 — 세부 항목별 점수 */
.report_tbl3 {
  padding-bottom: 40px;
}
.report_tbl3 table {
  min-width: 520px;
}
.report_tbl3 th,
.report_tbl3 td {
  height: 40px;
  font-size: 0.85rem;
  font-weight: normal;
  text-align: center;
  padding: 0 8px;
}
.report_tbl3 tbody th,
.report_tbl3 tbody td {
  border-right: 1px solid #d7d7d7;
  border-bottom: 1px solid #d7d7d7;
}
.report_tbl3 tbody td:last-child { border-right: none; }
.report_tbl3 tbody tr:last-child th,
.report_tbl3 tbody tr:last-child td { border-bottom: none; }
.report_tbl3 tbody td { border-right: none; }
.report_tbl3 tbody th.title {
  font-weight: 700;
  background-color: color-mix(in srgb, var(--accent-color), #fff 38%);
  color: #fff;
  border-bottom: none;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.report_tbl3 tbody th {
  background-color: #f3f3f3;
  color: #666;
}
.report_tbl3 tfoot th,
.report_tbl3 tfoot td {
  color: #fff;
  border-right: 1px solid color-mix(in srgb, var(--accent-color), #000 38%);
  border-bottom: 1px solid color-mix(in srgb, var(--accent-color), #000 38%);
  background-color: var(--accent-color);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.report_tbl3 tfoot td .score {
  color: var(--sub-color);
  font-weight: 700;
}

/* SR 보기 버튼 */
div[class^=report_tbl] .btn_sr {
  display: inline-block;
  vertical-align: middle;
  font-size: 0.78rem;
  color: #fff;
  padding: 0 14px;
  line-height: 26px;
  border-radius: 4px;
  background: linear-gradient(#a8a8a8, #8b8b8b);
  text-decoration: none;
}

/* ── 코멘트 영역 (v1) ── */
.comment_wrap .title {
  border-bottom: 2px solid var(--accent-color);
  margin-bottom: 28px;
  padding-bottom: 6px;
}
.comment_wrap .title p {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-color);
  padding: 4px 0;
}
.comment_wrap .list + .list {
  padding-top: 30px;
}
.comment_wrap .comment_tit {
  font-size: 0.875rem;
  color: #222;
  font-weight: 700;
  padding-bottom: 8px;
}
.comment_wrap .comment_box {
  font-size: 0.8rem;
  color: #666;
  line-height: 1.55;
  background-color: #f3f3f3;
  padding: 16px 20px;
  min-height: 100px;
  overflow-y: auto;
  word-break: break-word;
}

/* ── 반응형 ── */
@media (max-width: 992px) {
  .graph_wrap .graph_group {
    width: 100%;
    background-size: cover;
    overflow-x: auto;
  }
}
@media (max-width: 768px) {
  #myReport .sort_select .sel_class select {
    width: 220px;
  }
  .report_card .user_info dl {
    width: 100%;
  }
  .report_card .sbj_score dl {
    flex: 0 0 calc(50% - 5px);
  }
  .report_card .sbj_score dt,
  .report_card .sbj_score dd li {
    height: 42px;
    line-height: 42px;
    font-size: 0.82rem;
  }
  .report_card .evaluation {
    flex-direction: column;
  }
  .report_card .cmt_cont {
    padding: 50px 20px 30px;
    background-position: 20px 28px;
  }
  .graph_wrap.low {
    flex-direction: column;
    gap: 20px;
  }
  .graph_wrap.low > div {
    overflow-x: auto;
  }
}
@media (max-width: 480px) {
  .report_card .sbj_score dl {
    flex: 0 0 100%;
  }
  .report_card .user_info dt {
    width: 70px;
    font-size: 0.875rem;
  }
  .report_card .user_info dd {
    font-size: 0.875rem;
  }
}

/* ── 인쇄 ── */
@media print {
  #myReport .sort_select { display: none; }
  .report_card .user_info,
  .report_card .sbj_score,
  .report_card .evaluation { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  div[class^=report_tbl] { overflow-x: visible; }
  div[class^=report_tbl] table { min-width: 0 !important; }
  .report_card .report_tbl { overflow-x: visible; }
  .report_card .report_tbl table { min-width: 0 !important; }
  .graph_wrap .graph_group { overflow-x: visible; }
}

/* ============================================================
   Intro - About Spring (intro/views/hello/spring.tpl)
   원본 spring/asset/css/default_style.css(.s_content.aboutus) 기반
   → Bootstrap(skin2) 이식. 애니메이션은 원본 effect.js 대신 AOS 사용
   이미지 원본 가로 762px → 760px 컬럼 가운데 정렬
   ============================================================ */
.spring-aboutus {
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.5;
}
.spring-aboutus img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 인트로 배너 */
.spring-aboutus .s_cont_banner {
  margin-bottom: 40px;
}
.spring-aboutus .s_cont_banner img { width: 100%; }

/* about_spring — 타이틀(dt) 위에 서브/본문(dd)을 동일 캔버스로 겹쳐 합성 */
.spring-aboutus .about_spring {
  position: relative;
  margin: 60px 0 0;
}
.spring-aboutus .about_spring dt { margin: 0; }
.spring-aboutus .about_spring dt img { width: 100%; }
.spring-aboutus .about_spring dd {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  margin: 0;
}
.spring-aboutus .about_spring dd span {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
}
.spring-aboutus .about_spring dd span img { width: 100%; }

/* prm_img — 프로그램 특징 이미지 리스트 (원본: margin-top 60px, li 간격 30px) */
.spring-aboutus .prm_img {
  list-style: none;
  padding: 0;
  margin: 60px 0 0;
}
.spring-aboutus .prm_img li { margin: 0; }
.spring-aboutus .prm_img li + li { margin-top: 30px; }
.spring-aboutus .prm_img li img { width: 100%; }

/* direct_system — 직영 시스템 영역 */
.spring-aboutus .direct_system { margin-top: 80px; }
.spring-aboutus .direct_system .tit { margin: 0 0 30px; }
.spring-aboutus .direct_system .tit img { width: 100%; }
.spring-aboutus .direct_system .direct_system_bottom {
  width: 100%;
  margin-top: 30px;
}

/* 모바일 — 컬럼 좌우 여백 확보 */
@media (max-width: 800px) {
  .spring-aboutus { padding: 0 4px; }
  .spring-aboutus .about_spring,
  .spring-aboutus .prm_img { margin-top: 40px; }
  .spring-aboutus .direct_system { margin-top: 50px; }
}

/* ============================================================
   Education - Program (education/views/spring/program.tpl)
   원본 spring/asset/css/default_style.css(.s_content.program) 기반
   → Bootstrap(skin2) 이식. 애니메이션은 원본 effect.js 대신 AOS 사용
   탭 클릭 스크롤은 go_scroll() (prm_level1~4, prm_target 클래스 의존)
   ============================================================ */
.spring-program {
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.5;
}
.spring-program img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 배너 */
.spring-program .s_cont_banner { margin-bottom: 40px; }
.spring-program .s_cont_banner img { width: 100%; }

/* 학습 로드맵 */
.spring-program .road_map {
  position: relative;
  margin-top: 60px;
}

/* 타이틀 + Target 보기 버튼 (원본: tit relative, 버튼 absolute right/top:-16px) */
.spring-program .road_map .tit {
  position: relative;
  margin: 0 0 40px;
  text-align: left;
}
/* 타이틀 이미지(prm_tit.png 336x33)는 작은 이미지 — 늘리지 않고 native 크기 유지 */
.spring-program .road_map .tit > img { width: auto; }
.spring-program .road_map .tit .btn_target {
  position: absolute;
  right: 0;
  top: -16px;
}
.spring-program .road_map .tit .btn_target img {
  width: auto;
  max-width: 100%;
  display: inline-block;
}

/* 레벨 영역 */
.spring-program .level {
  position: relative;
}

/* 레벨 탭 — prm_bg.png(연민트 배경 패널)을 탭 배경으로 깔아 투명 탭 PNG가 그 위에 비치도록 */
.spring-program .level .tab_level {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 60px;
  background: url('/asset/spring/asset/img/program/prm_bg.png') no-repeat 0 0;
  background-size: 100% 100%;
}
.spring-program .level .tab_level li { flex: 1; min-width: 0; margin: 0; }
.spring-program .level .tab_level li a { display: block; }
.spring-program .level .tab_level li img { width: 100%; }

/* 레벨별 안내 이미지 스택 (원본: 간격 30px, 하단 margin 80px) */
.spring-program .level .prm_level {
  list-style: none;
  padding: 0;
  margin: 0 0 80px;
}
.spring-program .level .prm_level li { margin: 0; }
.spring-program .level .prm_level li + li { margin-top: 30px; }
.spring-program .level .prm_level li img { width: 100%; }

/* 학습 별 Target (원본 padding:20px 0 40px) */
.spring-program .prm_target { padding: 20px 0 40px; }
.spring-program .prm_target img { width: 100%; }

/* 모바일 */
@media (max-width: 800px) {
  .spring-program { padding: 0 4px; }
  .spring-program .road_map { margin-top: 40px; }
  /* 버튼이 타이틀과 겹치지 않도록 흐름 배치로 전환 */
  .spring-program .road_map .tit .btn_target {
    position: static;
    display: block;
    margin-top: 8px;
    text-align: right;
  }
  .spring-program .level .tab_level { margin-bottom: 40px; }
  .spring-program .level .prm_level { margin-bottom: 50px; }
}

/* ============================================================
   Education - LMS / Learning System (education/views/spring/spring_lms.tpl)
   원본 spring/asset/css/default_style.css(.s_content.program) 기반
   → Bootstrap(skin2) 이식. 애니메이션은 원본 effect.js 대신 AOS 사용
   .list_effect: 동일 크기 이미지 레이어 합성(첫 li 흐름배치, 나머지 겹침)
   ============================================================ */
.spring-lms {
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.5;
}
.spring-lms img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 배너 */
.spring-lms .s_cont_banner { margin-bottom: 40px; }
.spring-lms .s_cont_banner img { width: 100%; }

/* 섹션 간격 */
.spring-lms .spiral_syllabus,
.spring-lms .blended_learning,
.spring-lms .readers,
.spring-lms .co-teaching { /*margin-top: 40px;*/ }
/* spiral_syllabus는 배너 바로 다음 첫 섹션이라 간격 축소 */
.spring-lms .spiral_syllabus { margin-top: 20px; }

/* 공통 타이틀 */
.spring-lms .tit { margin: 0 0 24px; }
.spring-lms .tit img { width: 100%; }

/* 섹션 내 일반 이미지 간격 */
.spring-lms .spiral_syllabus > img,
.spring-lms .blended_learning > img,
.spring-lms .readers > img {
  width: 100%;
  margin-top: 20px;
}

/* list_effect — 동일 크기 이미지 레이어 합성
   첫 li(정상 흐름)가 높이 확보, 나머지 li는 absolute로 겹쳐 순차 등장 */
.spring-lms .list_effect {
  position: relative;
}
.spring-lms .list_effect ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.spring-lms .list_effect ul li {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  margin: 0;
}
.spring-lms .list_effect ul li:first-child { position: static; }
.spring-lms .list_effect ul li img { width: 100%; }

/* Spiral 리스트 배경 패널 (spiral_list_bg.png 760x338, 리스트와 동일 크기) */
.spring-lms .spiral_syllabus .list_effect {
  background: url('/asset/spring/asset/img/program/learning_system/spiral_list_bg.png') no-repeat 0 0;
  background-size: 100% 100%;
}

/* Readers 회색 라운드 패널 */
.spring-lms .readers {
  border-radius: 15px;
  background: #f6f6f6;
  overflow: hidden;
}

/* 모바일 */
@media (max-width: 800px) {
  .spring-lms { padding: 0 4px; }
  .spring-lms .spiral_syllabus,
  .spring-lms .blended_learning,
  .spring-lms .readers,
  .spring-lms .co-teaching { margin-top: 50px; }
}

/* ============================================================
   Education - Classification (education/views/spring/spring_archi.tpl)
   원본 spring/asset/css/default_style.css(.s_content.program) 기반
   → Bootstrap(skin2) 이식. 애니메이션은 원본 effect.js 대신 AOS 사용
   .list_effect: 동일 크기 이미지 레이어 합성(첫 li 흐름배치, 나머지 겹침)
   ============================================================ */
.spring-archi {
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.5;
}
.spring-archi img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 공통 타이틀 */
.spring-archi .tit { margin: 0; }
.spring-archi .tit img { width: 100%; }

/* 섹션 간격 (원본: mastery margin-top 135px) */
.spring-archi .mastery { margin-top: 135px; }

/* list_effect — 동일 크기 이미지 레이어 합성
   첫 li(정상 흐름)가 높이 확보, 나머지 li는 absolute로 겹쳐 순차 등장
   (원본: primary/mastery .list_effect margin-top 55px) */
.spring-archi .list_effect {
  position: relative;
  margin-top: 55px;
}
.spring-archi .list_effect ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.spring-archi .list_effect ul li {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  margin: 0;
}
.spring-archi .list_effect ul li:first-child { position: static; }
.spring-archi .list_effect ul li img { width: 100%; }

/* 모바일 */
@media (max-width: 800px) {
  .spring-archi { padding: 0 4px; }
  .spring-archi .mastery { margin-top: 80px; }
  .spring-archi .list_effect { margin-top: 35px; }
}

/* ============================================================
   Entrance - Level Test Process (entrance/views/spring/process.tpl)
   원본 spring/asset/css/default_style.css(.s_content.admission) 기반
   → Bootstrap(skin2) 이식. 애니메이션은 원본 effect.js 대신 AOS 사용
   leveltest ul: 3개 스텝을 가로 한 줄(flex space-between)로 배치
   ============================================================ */
.spring-process {
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.5;
}
.spring-process img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 배너 */
.spring-process .s_cont_banner { margin-bottom: 40px; }
.spring-process .s_cont_banner img { width: 100%; }

/* 레벨테스트 영역 */
.spring-process .leveltest { margin-top: 40px; }

/* 타이틀 (작은 이미지 258x29 — 늘리지 않고 가운데 정렬) */
.spring-process .leveltest .tit {
  margin: 0 0 40px;
  text-align: center;
}
.spring-process .leveltest .tit img {
  width: auto;
  max-width: 100%;
  display: inline-block;
}

/* 스텝 3개 — 가로 한 줄 (원본: flex, space-between)
   native 비율(220 / 257 / 257)에 맞춘 너비로 반응형 축소 */
.spring-process .leveltest ul {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
}
.spring-process .leveltest li { margin: 0; }
.spring-process .leveltest li:nth-child(1) { width: 28.9%; }
.spring-process .leveltest li:nth-child(2),
.spring-process .leveltest li:nth-child(3) { width: 33.8%; }
.spring-process .leveltest li img { width: 100%; }

/* 안내 문구 (작은 이미지 427x46 — 가운데 정렬) */
.spring-process .leveltest .noti {
  margin: 0;
  text-align: center;
}
.spring-process .leveltest .noti img {
  width: auto;
  max-width: 100%;
  display: inline-block;
}

/* 모바일 */
@media (max-width: 800px) {
  .spring-process { padding: 0 4px; }
}
@media (max-width: 480px) {
  /* 좁은 화면에서는 스텝을 세로로 쌓아 가독성 확보 */
  .spring-process .leveltest ul {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .spring-process .leveltest li,
  .spring-process .leveltest li:nth-child(1),
  .spring-process .leveltest li:nth-child(2),
  .spring-process .leveltest li:nth-child(3) {
    width: auto;
    max-width: 75%;
  }
}

/* ============================================================
   Login (skin/student/spring/login_student.tpl)
   Notice 리스트의 날짜(.noticedt) 우측 정렬
   ============================================================ */
.level-test-banner-section {
  padding: 0 0 20px;
}
.level-test-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 28px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(120deg, #005a36, #008047);
  border-radius: 12px;
  box-shadow: 0 10px 24px color-mix(in srgb, #005a36, transparent 78%);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.level-test-banner:hover,
.level-test-banner:focus-visible {
  color: #fff;
  box-shadow: 0 14px 30px color-mix(in srgb, #005a36, transparent 68%);
  transform: translateY(-3px);
  outline: none;
}
.level-test-banner-copy {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}
.level-test-banner-question {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  opacity: 0.92;
}
.level-test-banner-question i {
  font-size: 1.15rem;
}
.level-test-banner-title {
  font-size: 1.1rem;
  font-weight: 700;
}
.level-test-banner-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 10px 18px;
  color: #005a36;
  background: #fff;
  border-radius: 24px;
  font-size: 0.88rem;
  font-weight: 700;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.level-test-banner:hover .level-test-banner-button,
.level-test-banner:focus-visible .level-test-banner-button {
  background-color: #eaf7ef;
  transform: translateX(3px);
}

.campus-facilities .facility-list li {
  display: flex;
  align-items: center;
}
.campus-facilities .facility-list .campus-news-item {
  padding-right: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}
.campus-facilities .facility-list .campus-news-item:hover,
.campus-facilities .facility-list .campus-news-item:focus-visible {
  color: var(--accent-color);
  transform: translateX(4px);
  outline: none;
}
.campus-facilities .facility-list .campus-news-item i {
  transition: color 0.2s ease, transform 0.2s ease;
}
.campus-facilities .facility-list .campus-news-item:hover i,
.campus-facilities .facility-list .campus-news-item:focus-visible i {
  color: color-mix(in srgb, var(--accent-color), #000 15%);
  transform: scale(1.15);
}
.campus-facilities .facility-list .campus-news-item:hover .noticedt,
.campus-facilities .facility-list .campus-news-item:focus-visible .noticedt {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
}
.campus-facilities .facility-list li .noticedt {
  margin-left: auto;
  padding-left: 12px;
  flex-shrink: 0;
  white-space: nowrap;
  color: #999;
  font-size: 0.85em;
}
.campus-facilities .campus-news-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.campus-facilities .campus-news-header h3 {
  margin-bottom: 0;
}
.campus-facilities .campus-news-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  color: var(--accent-color);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}
.campus-facilities .campus-news-more:hover {
  color: color-mix(in srgb, var(--accent-color), #000 20%);
  transform: translateX(3px);
}
.campus-facilities .campus-news-more i {
  transition: transform 0.2s ease;
}
.campus-facilities .campus-news-more:hover i,
.campus-facilities .campus-news-more:focus-visible i {
  transform: translateX(3px);
}

@media (max-width: 768px) {
  .level-test-banner-section {
    padding-bottom: 10px;
  }
  .level-test-banner,
  .level-test-banner-copy {
    flex-direction: column;
    text-align: center;
  }
  .level-test-banner {
    gap: 18px;
    padding: 24px 20px;
  }
  .level-test-banner-copy {
    gap: 8px;
  }
  .level-test-banner-button {
    justify-content: center;
    width: 100%;
    max-width: 220px;
  }
}

/* ============================================================
   Location (intro/views/location/spring.tpl)
   지도 영역(.map-wrapper) 최소 높이: PC 600px / 모바일 350px
   ============================================================ */
.location .map-wrapper {
  min-height: 600px;
}

@media (max-width: 768px) {
  .location .map-wrapper {
    min-height: 350px;
  }
}

/* ============================================================
   Page Title (skin/student/spring/student_layout.tpl)
   메뉴명(h1) 옆에 새싹 아이콘(ico_sprout.png) 추가
   ============================================================ */
.page-title-with-sprout {
  display: inline-flex;
  align-items: center;
}
.page-title-with-sprout .title-sprout {
  width: auto;
  height: 0.7em;
  margin-left: 0.25em;
}

/* ============================================================
   GLightbox 팝업 (sisul 갤러리 등)
   클릭 시 뜨는 이미지가 화면 밖으로 커지지 않도록 뷰포트에 맞춤
   ============================================================ */
.glightbox-container .gslide-image img,
.glightbox-container .gslide-media img {
  max-width: 100% !important;
  max-height: 88vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}
.glightbox-container .gslide-media {
  max-width: 95vw;
}