@charset "UTF-8";

/* ============================================= *
 * 전문대 합격예측 — 전용 스타일 (차이점만)
 * 공통 스타일은 Prediction_common.css 에서 제공
 * ============================================= */

/* 4년제/전문대 토글은 전문대 전용 페이지에서는 숨김 */
.univ-category-toggle { display: none !important; }

/* 계열 필터 숨김 (DB에 계열 데이터 없음) */
.faculty-toggle { display: none !important; }

/* 공용 CSS에서 온 파란색(#006fff)을 전문대 합격예측 페이지 한정 티일로 오버라이드 */
.filter-step .filter-step-top .step-tit strong { color: #0891b2; }
.filter-step .filter-grid .filter-item:hover { color: #0891b2; background-color: #ecfeff; }
.filter-step .filter-grid .filter-item.selected,
.filter-step .filter-grid .filter-item.active {
  background-color: #0891b2;
  box-shadow: 0 0.4rem 1.2rem 0 rgba(8, 145, 178, 0.4);
}
/* 선택된 항목 위 호버 시 글자색이 배경색과 겹쳐 안 보이는 문제 방지 */
.filter-step .filter-grid .filter-item.active:hover,
.filter-step .filter-grid .filter-item.selected:hover {
  color: #fff;
  background-color: #0e7490;
}
.filter-step .chosung-bar .chosung-btn:hover {
  color: #0891b2;
  border-color: #0891b2;
  background: #ecfeff;
}
.filter-step .chosung-bar .chosung-btn.active {
  color: #fff;
  background: #0891b2;
  border-color: #0891b2;
  box-shadow: 0 0.2rem 0.6rem rgba(8, 145, 178, 0.3);
}
.main-flow-guide .mfg-title i,
.main-flow-guide .mfg-line,
.main-flow-guide .mfg-dot { color: #0891b2; background: #0891b2; }

/* 대학발표 수시입결 — 전형별 블록 */
.ea-type-block { margin-bottom: 1.6rem; }
.ea-type-block:last-child { margin-bottom: 0; }
.ea-type-title {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  margin-bottom: 0.6rem;
  background: #0891b2;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  border-radius: 0.6rem;
}

/* 대학발표 수시입결 표 — 모달 안에서는 기본 .con-table 보다 컴팩트 */
.ea-wrap .con-table table > thead > tr > th {
  padding: 0.6rem 0.8rem;
  line-height: 1.4;
  font-size: 1.25rem;
}
.ea-wrap .con-table table > tbody > tr > td,
.ea-wrap .con-table table > tbody > tr > th {
  padding: 0.6rem 0.8rem;
  line-height: 1.4;
  font-size: 1.25rem;
}
.ea-wrap .con-table { overflow-x: auto; }

/* ── 판정 기준 안내 (A 타입) ── */
.verdict-howto {
  padding: 1.8rem 2rem;
  margin-bottom: 1.6rem;
  background: #f0fdfa;
  border: 1px solid #a5f3fc;
  border-radius: 1rem;
  line-height: 1.8;
}
.verdict-howto .vh-title {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 1.45rem; font-weight: 800; color: #0e7490;
  margin: 0 0 0.8rem;
}
.verdict-howto .vh-title i { font-size: 1.8rem; color: #0891b2; }
.verdict-howto .vh-intro,
.verdict-howto .vh-final { font-size: 1.35rem; color: #202020; margin: 0.4rem 0; }
.verdict-howto .vh-list {
  margin: 0.6rem 0 0.8rem; padding: 0.8rem 1.2rem 0.8rem 3rem;
  background: #fff; border-radius: 0.6rem;
  font-size: 1.3rem; line-height: 2;
}
.verdict-howto .vh-list li { color: #202020; }
.verdict-howto .vh-list b { color: #0891b2; }
.verdict-howto .vh-final b { color: #0891b2; }
.verdict-howto .vh-note {
  margin: 1rem 0 0; padding: 0.8rem 1rem;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 0.6rem;
  font-size: 1.2rem; color: #92400e;
}
.verdict-howto .vh-note b { color: #78350f; }

/* 등급 축 다이어그램 */
.verdict-axis-wrap { padding: 0.6rem 0.4rem 0; }
.verdict-axis-bar {
  display: flex;
  height: 5rem;
  border-radius: 0.8rem;
  overflow: hidden;
}
.verdict-axis-bar .vab-seg {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  color: #fff; font-weight: 800; font-size: 1.35rem;
}
.verdict-axis-bar .vab-seg i { font-size: 1.6rem; }
.verdict-axis-bar .vab-seg.safe      { background: #22c55e; }
.verdict-axis-bar .vab-seg.possible  { background: #3b82f6; }
.verdict-axis-bar .vab-seg.challenge { background: #f59e0b; }
.verdict-axis-bar .vab-seg.danger    { background: #ef4444; }

.verdict-axis-marks {
  display: flex; justify-content: space-between;
  margin-top: 1rem; padding: 0 0.4rem;
  font-size: 1.15rem; color: #505050;
}
.verdict-axis-marks > div {
  flex: 1; text-align: center; position: relative;
}
.verdict-axis-marks > div::before {
  content: ''; display: block; width: 2px; height: 0.9rem;
  background: #9ca3af; margin: 0 auto 0.4rem;
}
.verdict-axis-marks b { display: block; font-weight: 700; }
.verdict-axis-marks small { display: block; font-size: 1rem; color: #808080; }
.verdict-axis-marks .tx-accent { color: #0891b2; }

.verdict-axis-legend {
  display: flex; gap: 1.8rem; justify-content: center; flex-wrap: wrap;
  margin-top: 1.4rem; font-size: 1.2rem; color: #4b5563;
}
.verdict-axis-legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
.verdict-axis-legend .vl-dot {
  width: 1.2rem; height: 1.2rem; border-radius: 0.3rem; display: inline-block;
}
.verdict-axis-legend .vl-dot.safe      { background: #22c55e; }
.verdict-axis-legend .vl-dot.possible  { background: #3b82f6; }
.verdict-axis-legend .vl-dot.challenge { background: #f59e0b; }
.verdict-axis-legend .vl-dot.danger    { background: #ef4444; }

@media (max-width: 800px) {
  .verdict-axis-bar { height: auto; flex-wrap: wrap; }
  .verdict-axis-bar .vab-seg { min-height: 4rem; font-size: 1.2rem; flex-basis: 50%; }
  .verdict-axis-marks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; }
}

/* ── 전문대 반영방법 패널 (chip + 반영비율 막대) ── */
.cp-reflect-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1.6rem;
}
.cp-reflect-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 0.6rem;
  font-size: 1.3rem;
}
.cp-reflect-chip .chip-label {
  color: #0f766e;
  font-weight: 600;
  font-size: 1.15rem;
}
.cp-reflect-chip .chip-value {
  color: #0f172a;
  font-weight: 700;
}
.cp-ratio-section {
  padding: 1.2rem 1.4rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.8rem;
}
.cp-ratio-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}
.cp-ratio-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.cp-ratio-row {
  display: grid;
  grid-template-columns: 6rem 1fr 5rem;
  align-items: center;
  gap: 1rem;
}
.cp-ratio-label {
  font-size: 1.25rem;
  color: #475569;
  font-weight: 600;
}
.cp-ratio-bar-wrap {
  position: relative;
  height: 1.2rem;
  background: #e2e8f0;
  border-radius: 0.6rem;
  overflow: hidden;
}
.cp-ratio-bar {
  height: 100%;
  background: linear-gradient(90deg, #06b6d4, #0891b2);
  border-radius: 0.6rem;
  transition: width 0.4s ease;
}
.cp-ratio-percent {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0891b2;
  text-align: right;
}
.cp-ratio-empty {
  margin: 0;
  padding: 1rem 0;
  text-align: center;
  color: #94a3b8;
  font-size: 1.2rem;
}
/* 값 없는 행(와꾸 유지) — 라벨/퍼센트만 흐린 색, 막대는 빈 회색 트랙만 */
.cp-ratio-row--empty .cp-ratio-label { color: #94a3b8; font-weight: 500; }
.cp-ratio-row--empty .cp-ratio-percent { color: #94a3b8; font-weight: 500; }

/* 기타(텍스트) — 4개 바 아래 별도 행 */
.cp-ratio-etc {
  display: grid;
  grid-template-columns: 6rem 1fr;
  align-items: center;
  gap: 1rem;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px dashed #cbd5e1;
}
.cp-ratio-etc-label {
  font-size: 1.25rem;
  color: #475569;
  font-weight: 600;
}
.cp-ratio-etc-value {
  font-size: 1.25rem;
  color: #0f172a;
  font-weight: 500;
  word-break: keep-all;
}
.cp-ratio-etc--empty .cp-ratio-etc-label,
.cp-ratio-etc--empty .cp-ratio-etc-value { color: #94a3b8; font-weight: 500; }

/* "대학 발표 입결 기준" 명시 뱃지 */
.stat-source-badge {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.15rem 0.7rem;
  background: #0891b2;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 0.4rem;
  vertical-align: middle;
}
.source-badge {
  display: inline-block;
  margin-left: 0.8rem;
  padding: 0.25rem 0.9rem;
  background: #ecfeff;
  color: #0e7490;
  font-size: 1.1rem;
  font-weight: 700;
  border: 1px solid #a5f3fc;
  border-radius: 0.4rem;
  vertical-align: middle;
}
.stat-year {
  display: block;
  margin-top: 0.4rem;
  font-size: 1.15rem;
  color: #0e7490;
  font-weight: 600;
}

/* 대학발표 수시입결 헤더 (대학·학과) */
.ea-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 1.4rem;
  margin-bottom: 1rem;
  background: #f0fdfa;
  border: 1px solid #a5f3fc;
  border-radius: 0.8rem;
}
.ea-head-univ { font-size: 1.6rem; font-weight: 800; color: #0e7490; }
.ea-head-dept { font-size: 1.4rem; color: #0891b2; font-weight: 600; }

/* 학과 상세 모달 — 모집 정보 그리드 */
.detail-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}
.detail-info-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.2rem 1.4rem;
  background: #f8f9fb;
  border: 1px solid #e6e9ef;
  border-radius: 0.8rem;
}
.detail-info-label { font-size: 1.2rem; color: #808080; font-weight: 600; }
.detail-info-value { font-size: 1.6rem; color: #202020; font-weight: 700; }

/* 학과 상세 모달 — 반영비율 그리드 */
.detail-ratio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.8rem;
}
.detail-ratio-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 1rem 1.4rem;
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  border-radius: 0.8rem;
}
.detail-ratio-label { font-size: 1.3rem; color: #0e7490; font-weight: 600; }
.detail-ratio-value { font-size: 1.6rem; color: #0891b2; font-weight: 800; }
.detail-empty {
  padding: 1.6rem;
  text-align: center;
  color: #808080;
  font-size: 1.3rem;
}

/* 비로그인 안내 배너 */
.cp-login-notice {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 1.8rem 2.4rem;
  margin-bottom: 2.4rem;
  background: linear-gradient(135deg, #ecfeff 0%, #e0f2fe 100%);
  border: 1px solid #a5f3fc;
  border-radius: 1.2rem;
}
.cp-login-notice-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  background: #0891b2;
  color: #fff;
  border-radius: 50%;
  font-size: 2.2rem;
}
.cp-login-notice-text { flex: 1; min-width: 0; }
.cp-login-notice-text strong {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  color: #0e7490;
  margin-bottom: 0.4rem;
}
.cp-login-notice-text p {
  font-size: 1.35rem;
  color: #155e75;
  line-height: 1.5;
  margin: 0;
}
.cp-login-notice-btn {
  flex-shrink: 0;
  padding: 1rem 2.4rem;
  background: #0891b2;
  color: #fff;
  border: none;
  border-radius: 0.8rem;
  font-size: 1.4rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s;
}
.cp-login-notice-btn:hover { background: #0e7490; }
@media (max-width: 800px) {
  .cp-login-notice { flex-direction: column; text-align: center; padding: 1.6rem; }
  .cp-login-notice-btn { width: 100%; }
}

/* sticky 스크롤 컨텍스트 차단 해제 — .portal-layout 의 overflow-x:hidden 이
   sticky 를 가두는 문제 우회 (clip 은 sticky 방해 없이 가로 오버플로만 숨김) */
.portal-layout { overflow-x: clip; }

/* 필터 단계 스크롤 이동 시 상단 헤더만큼 여백 확보 */
#regionStep, #univStep, #deptStep { scroll-margin-top: 10rem; }

/* 3단계: 사이드 필터 + 결과 그리드 */
.dept-filter-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  /* align-items 는 기본값 stretch 유지 — 그래야 사이드 그리드 셀이 결과 높이만큼 늘어나
     내부 sticky 요소가 스크롤 범위 전체에서 따라올 수 있음 */
}
.dept-filter-side {
  /* 그리드 셀 자체는 투명. 시각 스타일과 sticky는 내부 .dept-filter-side-sticky가 담당 */
  position: relative;
}
.dept-filter-side-sticky {
  padding: 1.6rem;
  background: #f8f9fb;
  border: 1px solid #d6dbe2;
  border-radius: 1rem;
  box-shadow: 0 0.6rem 1.6rem rgba(15, 23, 42, 0.18), 0 0.2rem 0.4rem rgba(15, 23, 42, 0.08);
  position: sticky;
  top: 9.5rem; /* 헤더 높이(약 8.4rem) + 여백 */
  max-height: calc(100vh - 11rem);
  overflow-y: auto;
  z-index: 5;
}
/* 사이드 패널 스크롤바 살짝 얇게 */
.dept-filter-side-sticky::-webkit-scrollbar { width: 6px; }
.dept-filter-side-sticky::-webkit-scrollbar-thumb { background: #cfd5de; border-radius: 3px; }
.dept-filter-side-sticky::-webkit-scrollbar-track { background: transparent; }
.dfs-group { margin-bottom: 1.8rem; }
.dfs-group:last-child { margin-bottom: 0; }
.dfs-group h4 {
  margin: 0 0 0.9rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: #0e7490;
  letter-spacing: 0.03rem;
}
.dept-filter-results { min-width: 0; }

/* 사이드 안에서는 기존 탭 바를 세로 리스트로 */
.dept-filter-side .type-tab-bar,
.dept-filter-side .type-name-tab-bar,
.dept-filter-side .period-tab-bar {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0;
}
.dept-filter-side .type-tab-btn,
.dept-filter-side .type-name-tab-btn,
.dept-filter-side .period-tab-btn {
  display: block;
  width: 100%;
  padding: 0.9rem 1.2rem;
  margin: 0;
  text-align: left;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.6rem;
  font-size: 1.45rem;
  font-weight: 500;
  color: #202020;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 전형명칭 — 긴 글자 ... 처리 (툴팁은 JS가 body 레벨에 플로팅으로 표시) */
.dept-filter-side .type-name-tab-btn {
  position: relative;
  white-space: normal;
}
.dept-filter-side .type-name-tab-btn > .tab-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* body 에 붙는 플로팅 툴팁 (overflow 컨테이너 밖으로 벗어나도 안 잘림) */
.type-name-tab-tooltip {
  position: fixed;
  z-index: 10000;
  padding: 0.5rem 0.9rem;
  background: #111827;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 0.4rem;
  pointer-events: none;
  box-shadow: 0 0.2rem 0.6rem rgba(0,0,0,0.25);
  display: none;
}
.type-name-tab-tooltip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 0.5rem solid transparent;
  border-right-color: #111827;
}
.type-name-tab-tooltip.flipped::before {
  right: auto;
  left: 100%;
  border-right-color: transparent;
  border-left-color: #111827;
}
.dept-filter-side .type-tab-btn:hover,
.dept-filter-side .type-name-tab-btn:hover,
.dept-filter-side .period-tab-btn:hover {
  border-color: #0891b2;
  color: #0891b2;
}
.dept-filter-side .type-tab-btn.active,
.dept-filter-side .type-name-tab-btn.active,
.dept-filter-side .period-tab-btn.active {
  background: #0891b2;
  border-color: #0891b2;
  color: #fff;
  font-weight: 700;
}
/* 선택된 사이드 버튼 위에 호버해도 글자 보이도록 (배경만 살짝 진하게) */
.dept-filter-side .type-tab-btn.active:hover,
.dept-filter-side .type-name-tab-btn.active:hover,
.dept-filter-side .period-tab-btn.active:hover {
  color: #fff;
  background: #0e7490;
  border-color: #0e7490;
}

/* 모바일: 사이드가 위로 접힘 */
@media (max-width: 800px) {
  .dept-filter-layout { grid-template-columns: 1fr; gap: 1.2rem; }

  /* 사이드 필터: 모바일은 고정 해제 + 높이 제한 해제 */
  .dept-filter-side-sticky {
    position: static;
    top: auto;
    max-height: none;
    padding: 1.2rem;
    box-shadow: 0 0.2rem 0.6rem rgba(15, 23, 42, 0.08);
    border-radius: 0.8rem;
  }
  .dfs-group { margin-bottom: 1.2rem; }
  .dfs-group h4 { font-size: 1.25rem; margin-bottom: 0.6rem; }

  /* 사이드 세로 탭들을 가로 랩으로 전환 (공간 절약) */
  .dept-filter-side .type-tab-bar,
  .dept-filter-side .type-name-tab-bar,
  .dept-filter-side .period-tab-bar {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .dept-filter-side .type-tab-btn,
  .dept-filter-side .type-name-tab-btn,
  .dept-filter-side .period-tab-btn {
    width: auto;
    padding: 0.6rem 1rem;
    font-size: 1.2rem;
    border-radius: 0.6rem;
  }
  /* 터치 기기에서 전형명칭 툴팁 숨김 (hover로 뜨면 영역 덮음) */
  .dept-filter-side .type-name-tab-btn:hover::after,
  .dept-filter-side .type-name-tab-btn:hover::before { display: none; }
  .dept-filter-side .type-name-tab-btn { overflow: hidden; }
  .dept-filter-side .type-name-tab-btn > .tab-text { white-space: normal; overflow: visible; text-overflow: clip; }

  /* 학년도 탭: 데스크톱 50% 폭을 모바일 100%로 */
  .dev-content > .sub-tab-menu { width: 100%; }
  .dev-content > .sub-tab-menu .sub-tab-button { padding: 0 1.2rem; height: 4.6rem; }
  .dev-content > .sub-tab-menu .sub-tab-button span { font-size: 1.35rem; }

  /* 모집정보 칩 — 소형 */
  .cp-reflect-summary { gap: 0.6rem; }
  .cp-reflect-chip { padding: 0.4rem 0.8rem; font-size: 1.15rem; }
  .cp-reflect-chip .chip-label { font-size: 1.05rem; }

  /* 반영비율 섹션 — 공간 타이트하게 */
  .cp-ratio-section { padding: 1rem 1.1rem; }
  .cp-ratio-title { font-size: 1.2rem; margin-bottom: 0.8rem; }
  .cp-ratio-row { grid-template-columns: 4.5rem 1fr 4rem; gap: 0.6rem; }
  .cp-ratio-label { font-size: 1.15rem; }
  .cp-ratio-percent { font-size: 1.15rem; }

  /* 대학발표 입결 — 헤더 세로 */
  .ea-head { flex-direction: column; align-items: flex-start; gap: 0.3rem; padding: 0.9rem 1.1rem; }
  .ea-head-univ { font-size: 1.4rem; }
  .ea-head-dept { font-size: 1.25rem; }

  /* 판정 안내 박스 */
  .verdict-howto { padding: 1.4rem 1.4rem; }
  .verdict-howto .vh-title { font-size: 1.3rem; }
  .verdict-howto .vh-intro,
  .verdict-howto .vh-final { font-size: 1.2rem; }
  .verdict-howto .vh-list { font-size: 1.15rem; padding: 0.8rem 1rem 0.8rem 2.4rem; }
  .verdict-howto .vh-note { font-size: 1.1rem; }

  /* 학과 카드 내부 뱃지 줄바꿈 */
  .dept-card { padding: 1.4rem 1.6rem; }
  .dept-card .card-dept { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 1.45rem; }
  .dept-card .card-dept .card-period,
  .dept-card .card-dept .card-session,
  .dept-card .card-dept .card-years { margin-left: 0; font-size: 1.05rem; padding: 0.15rem 0.6rem; }
  .dept-card .card-type { font-size: 1.2rem; }
  .dept-card .card-meta span { font-size: 1.15rem; }
  .dept-card .card-predict { font-size: 1.1rem; padding: 0.25rem 0.8rem; }
}

/* ── 좁은 모바일 (480px 이하) ── */
@media (max-width: 480px) {
  .cp-reflect-chip { flex: 1 1 calc(50% - 0.6rem); justify-content: space-between; }
  .cp-ratio-row { grid-template-columns: 4rem 1fr 3.4rem; gap: 0.5rem; }
  .dev-content > .sub-tab-menu { gap: 0.6rem; }
  .dev-content > .sub-tab-menu .sub-tab-button { padding: 0 0.8rem; }
  .dev-content > .sub-tab-menu .sub-tab-button span { font-size: 1.25rem; letter-spacing: -0.06rem; }
}

/* 전형명칭(하위) 필터 탭 — 전형구분 탭 바로 아래 */
.type-name-tab-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.type-name-tab-bar .type-name-tab-btn {
  padding: 0.55rem 1.4rem;
  border: 1px solid #dadada;
  background: #fff;
  font-size: 1.25rem;
  font-weight: 600;
  color: #505050;
  cursor: pointer;
  border-radius: 20rem;
  transition: all 0.2s;
  font-family: inherit;
}
.type-name-tab-bar .type-name-tab-btn:hover { color: #0891b2; border-color: #0891b2; }
.type-name-tab-bar .type-name-tab-btn.active { background: #0891b2; color: #fff; border-color: #0891b2; }

/* 모집시기 필터 탭 (전형 탭 바로 아래) */
.period-tab-bar {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.period-tab-bar .period-tab-btn {
  padding: 0.7rem 1.8rem;
  border: 1px solid #dadada;
  background: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  color: #505050;
  cursor: pointer;
  border-radius: 20rem;
  transition: all 0.2s;
  font-family: inherit;
}
.period-tab-bar .period-tab-btn:hover { color: #0891b2; border-color: #0891b2; }
.period-tab-bar .period-tab-btn.active { background: #0891b2; color: #fff; border-color: #0891b2; }

/* 하단 네비게이션 버튼 (성적 수정 / 홈으로) */
.cp-bottom-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #ebebeb;
}
.cp-bottom-nav .cp-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.1rem 2.4rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.9rem;
  color: #374151;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02rem;
  text-decoration: none;
  box-shadow: 0 0.1rem 0.2rem rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.cp-bottom-nav .cp-nav-btn i {
  font-size: 1.6rem;
  color: #9ca3af;
  transition: color 0.2s;
}
.cp-bottom-nav .cp-nav-btn:hover {
  border-color: #0891b2;
  color: #0891b2;
  box-shadow: 0 0.4rem 1rem rgba(8, 145, 178, 0.15);
  transform: translateY(-0.1rem);
}
.cp-bottom-nav .cp-nav-btn:hover i { color: #0891b2; }
.cp-bottom-nav .cp-nav-btn:active { transform: translateY(0); box-shadow: 0 0.1rem 0.3rem rgba(8, 145, 178, 0.2); }

@media (max-width: 480px) {
  .cp-bottom-nav .cp-nav-btn { padding: 0.9rem 1.4rem; font-size: 1.25rem; }
  .cp-bottom-nav .cp-nav-btn i { font-size: 1.45rem; }
}

/* 전형/학과 선택 타이틀 옆 학과 개수 뱃지 */
.filter-step .filter-step-top { display: flex; align-items: center; gap: 1rem; }
.filter-step .filter-step-top .step-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 1.1rem;
  background: #f3f4f6;
  color: #111827;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.02rem;
  border: 1px solid #0891b2;
  border-radius: 20rem;
  white-space: nowrap;
}

/* 학과 카드 — 합격예측 가능 여부 뱃지 */
.dept-card .card-predict {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.3rem 0.9rem;
  font-size: 1.15rem;
  font-weight: 700;
  border-radius: 0.4rem;
  letter-spacing: -0.02rem;
}
.dept-card .card-predict.available { background: #ecfeff; color: #0e7490; border: 1px solid #a5f3fc; }
.dept-card .card-predict.none      { background: #f3f4f6; color: #808080; border: 1px solid #e5e7eb; }

/* 학과 카드 안의 모집시기·세션·연제 뱃지 (.card-dept 의 flex gap 이 간격 담당) */
.dept-card .card-dept .card-period,
.dept-card .card-dept .card-session,
.dept-card .card-dept .card-years {
  display: inline-block;
  padding: 0.2rem 0.8rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 0.4rem;
}
.dept-card .card-dept .card-period { background: #e0f2fe; color: #075985; }
.dept-card .card-dept .card-session { background: #fef3c7; color: #92400e; }
.dept-card .card-dept .card-years   { background: #ecfccb; color: #3f6212; }

/* 전문대 티일 톤 (기존 susi-vocational.php 와 일관) */
.page-current { background-color: #f0fdfa; }
.page-current .current-container:before { background: linear-gradient(90deg,#67e8f9,#22d3ee); opacity: 0.08; }
.page-current .current-container:after { background: linear-gradient(90deg,#22d3ee,#67e8f9); opacity: 0.1; }

/* 타이틀 강조색 */
.current-tit .tit-accent-voc { color: #0891b2; }

/* 흐름 가이드 티일 톤 */
.main-flow-guide .mfg-title i { color: #06b6d4; }
.main-flow-guide .mfg-line { background: #06b6d4; }
.main-flow-guide .mfg-dot { background: #06b6d4; }
.main-flow-guide .mfg-label { color: #0e7490; }

/* 학년도 탭 — 가로 80%, 가운데 정렬 (좁은 너비에서 글자 줄바꿈 방지) */
.dev-content > .sub-tab-menu {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.dev-content > .sub-tab-menu .sub-tab-button span {
  white-space: nowrap;
}
/* 학년도 탭 활성색 — 티일 딥톤 */
.dev-content > .sub-tab-menu .sub-tab-button.active {
  background-color: #0891b2;
  border-color: #0891b2;
}
.dev-content > .sub-tab-menu .sub-tab-button.active:before {
  border-top-color: #0891b2;
}