/* ============================================
   JUMCLASS Customer Center Unified CSS System
   
   통합된 고객센터 CSS 시스템
   - 모든 CS Center 페이지에서 사용하는 통일된 스타일
   - BEM 네이밍 컨벤션 적용
   - 컴포넌트 기반 구조
   - Figma 디자인 스펙 기반
   
   Created: 2025-08-28
   ============================================ */

/* Import 레거시 탭 스타일 (inc_tab_menu.php 호환) */
@import url('../components/cs-center-tabs.css');

/* ===========================================
   0. CSS Variables
   =========================================== */
:root {
  --cs-black: #000000;
  --cs-white: #ffffff;
  --cs-main-purple: #802fff;
  --cs-gray-10: #1a1a1a;
  --cs-gray-20-line: #333333;
  --cs-gray-30: #4c4c4c;
  --cs-gray-40: #666666;
  --cs-gray-50: #7f7f7f;
  --cs-gray-60: #999999;
  --cs-gray-70: #b2b2b2;
  --cs-gray-80: #cccccc;
  --cs-gray-90: #e5e5e5;
  --cs-background-1: #191919;
  --cs-background-2: #292929;
  --cs-background-3-line: #4b4b4b;
  --cs-line-2: #dadada;
  --cs-disable-icon: #a9a9a9;
}

/* ===========================================
   1. Base Layout & Container Styles
   =========================================== */

/* Body overflow 방지 */
html.has-jumclass-cs-center,
body.has-jumclass-cs-center {
  overflow-x: hidden;
  max-width: 100%;
}

/* 모바일에서 세로 스크롤바 제거하면서 스크롤은 가능하게 */

/* ===========================================
   Overscroll Behavior - 제거됨 (스크롤 체이닝 허용)
   =========================================== */

/* 스크롤 체이닝 허용을 위해 overscroll-behavior 속성들을 모두 제거했습니다. */

/* 모바일 전용 - 부드러운 스크롤만 유지 */
@media (max-width: 768px) {
  /* 스크롤 가능한 콘텐츠 영역들 */
  .student-new .jumclass-cs-center__content,
  .student-new .jumclass-cs-faq__list,
  .student-new .jumclass-cs-notice__table-wrapper,
  .student-new .jumclass-cs-policy__text-box {
    -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
  }

  /* 가로 스크롤 영역 */
  .student-new .jumclass-cs-center__tabs,
  .student-new .cs-tab-menu {
    -webkit-overflow-scrolling: touch;
  }

  .student-new .jumclass-cs-faq__list {
    padding: 0px 20px;
  }

  .student-new .cs-notice-pagination {
    margin-top: 24px;
  }
}
@media (max-width: 768px) {
  html.has-jumclass-cs-center {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.has-jumclass-cs-center {
    overflow-x: hidden;
    overflow-y: visible;
    width: 100%;
    max-width: 100%;
    position: relative;
  }
}

/* CS Center 페이지 공통 컨테이너 */
.student-new .jumclass-cs-center {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: var(--cs-black);
  padding-top: 65px; /* GNB height */
  padding-bottom: 120px; /* Footer height */
  overflow-x: hidden; /* 모바일 가로스크롤 방지 */
}

/* CS Center 컨텐츠 래퍼 */
.student-new .jumclass-cs-center__content {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0px;
  overflow: visible; /* 페이지네이션이 잘리지 않도록 */
  width: 100%;
  box-sizing: border-box;
}

/* 정책 페이지용 컨텐츠 래퍼 - 배경과 패딩 제공 */
.student-new .jumclass-cs-center__content:has(.jumclass-cs-policy__text-box) {
  background: #191919;
  border-radius: 6px;
  padding: 16px 4px 16px 16px; /* 오른쪽만 패딩 없음 - 스크롤바가 안쪽에 위치 */
  box-sizing: border-box;
}

/* ===========================================
   2. Header Section
   =========================================== */

/* 페이지 헤더 섹션 */
.student-new .jumclass-cs-center__header {
  text-align: center;
  margin-bottom: 0px;
  padding: 0 0 40px;
}

/* 카테고리 텍스트 (보라색) */
.student-new .jumclass-cs-center__category {
  color: var(--cs-main-purple);
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 140%; /* 20px */
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}

/* 페이지 타이틀 */
.student-new .jumclass-cs-center__title {
  color: var(--cs-white);
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
  line-height: 140%; /* 39px */
  letter-spacing: -0.03em;
}

/* ===========================================
   3. Tab Navigation (Figma 기반 업데이트)
   =========================================== */

.student-new .jumclass-cs-center__tabs {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  border-bottom: 2px solid var(--cs-gray-20-line);
  overflow: visible;
  z-index: 0;
}

/* 언더라인 요소는 제거 - border-bottom으로 대체 */

.student-new .jumclass-cs-center__tabs-list {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0;
  gap: 40px;
  margin: 0;
  list-style: none;
  height: 42px;
  overflow: visible;
}

.student-new .jumclass-cs-center__tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 0 10px;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.student-new .jumclass-cs-center__tab-link {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 140%; /* 25px */
  letter-spacing: -0.03em;
  color: var(--cs-gray-40);
  text-decoration: none;
  white-space: nowrap;
}

.student-new .jumclass-cs-center__tab--active .jumclass-cs-center__tab-link {
  color: var(--cs-white);
}

.student-new .jumclass-cs-center__tab-indicator {
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  z-index: 1;
}

.student-new
  .jumclass-cs-center__tab--active
  .jumclass-cs-center__tab-indicator {
  background: var(--cs-white);
  z-index: 2;
}

/* ===========================================
   4. Common Components
   =========================================== */

/* 검색 박스 */
.student-new .jumclass-cs-center__search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #191919;
  border: 1px solid #333;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.student-new .jumclass-cs-center__search-box:focus-within {
  border-color: #802fff;
}

.student-new .jumclass-cs-center__search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: Pretendard;
  font-size: 14px;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.42px;
}

.student-new .jumclass-cs-center__search-input::placeholder {
  color: #666;
}

/* 빈 상태 */
.student-new .jumclass-cs-center__empty {
  text-align: center;
  padding: 80px 20px;
}

.student-new .jumclass-cs-center__empty-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: #191919;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.student-new .jumclass-cs-center__empty-text {
  color: #666;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.48px;
}

/* 페이지네이션 (Figma 기반) */
.student-new .jumclass-cs-center__pagination {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 40px 0 0;
  gap: 24px;
  width: 100%;
}

/* 이전/다음 그룹 */
.student-new .jumclass-cs-center__pagination-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.student-new .jumclass-cs-center__pagination-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
}

/* 화살표 아이콘 */
.student-new .jumclass-cs-center__pagination-icon {
  width: 11.4px;
  height: 5.7px;
  border: 1.5px solid var(--cs-background-3-line);
  border-top: none;
  border-left: transparent;
  border-right: transparent;
}

/* 이전 버튼 화살표 (왼쪽) */
.student-new
  .jumclass-cs-center__pagination-group--prev
  .jumclass-cs-center__pagination-icon {
  transform: rotate(90deg);
}

/* 다음 버튼 화살표 (오른쪽) */
.student-new
  .jumclass-cs-center__pagination-group--next
  .jumclass-cs-center__pagination-icon {
  transform: rotate(-90deg);
}

/* 페이지 번호들 */
.student-new .jumclass-cs-center__pagination-numbers {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}

.student-new .jumclass-cs-center__page-number {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 140%; /* 22px */
  text-align: center;
  letter-spacing: -0.03em;
  color: var(--cs-gray-30);
  text-decoration: none;
  min-width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.student-new .jumclass-cs-center__page-number--active {
  background: var(--cs-main-purple);
  border-radius: 4px;
  color: var(--cs-white);
}

/* ===========================================
   5. Notice Page Specific Styles
   =========================================== */

/* 공지사항 리스트 */
.student-new .jumclass-cs-notice__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 공지사항 아이템 */
.student-new .jumclass-cs-notice__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0; /* FAQ와 동일한 padding으로 변경 */
  border-bottom: 1px solid #333;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.student-new .jumclass-cs-notice__item:hover {
  background: rgba(128, 47, 255, 0.05);
}

/* .student-new .jumclass-cs-notice__item:first-child {
  border-top: 1px solid #333;
} */

/* 공지사항 콘텐츠 */
.student-new .jumclass-cs-notice__item-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.student-new .jumclass-cs-notice__number {
  color: #ffffff;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.03em;
  min-width: 24px;
}

.student-new .jumclass-cs-notice__item-title {
  color: #ffffff;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.03em;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-new .jumclass-cs-notice__item:hover .jumclass-cs-notice__item-title {
  color: #cccccc;
}

.student-new .jumclass-cs-notice__date {
  color: #999999;
  font-family: Pretendard;
  font-size: 14px;
  font-weight: 400;
  line-height: 140%;
  text-align: right;
  letter-spacing: -0.03em;
  flex-shrink: 0;
}

/* 공지사항 뱃지 */
.student-new .jumclass-cs-notice__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: #802fff;
  border-radius: 4px;
}

.student-new .jumclass-cs-notice__badge--category {
  background: #333333;
  margin-right: 8px;
}

.student-new .jumclass-cs-notice__badge-text {
  color: #fff;
  font-family: Pretendard;
  font-size: 12px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.36px;
}

.student-new
  .jumclass-cs-notice__badge--category
  .jumclass-cs-notice__badge-text {
  color: #999999;
}

/* 모바일 공지사항 스타일 */
@media (max-width: 768px) {
  .student-new .jumclass-cs-notice__item {
    padding: 12px 0;
  }

  .student-new .jumclass-cs-notice__item-content {
    gap: 4px;
  }

  .student-new .jumclass-cs-notice__number {
    min-width: 20px;
    font-size: 12px;
  }

  .student-new .jumclass-cs-notice__item-title {
    font-size: 12px;
    padding-right: 8px;
  }

  .student-new .jumclass-cs-notice__date {
    font-size: 12px;
    min-width: 62px;
  }

  /* 공지사항 배지 모바일 */
  .student-new .jumclass-cs-notice__badge {
    padding: 2px 6px;
  }

  .student-new .jumclass-cs-notice__badge-text {
    font-size: 11px;
  }
}

/* ===========================================
   6. FAQ Page Specific Styles
   =========================================== */

/* FAQ 리스트 */
.student-new .jumclass-cs-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* FAQ 아이템 */
.student-new .jumclass-cs-faq__item {
  background: transparent;
  border-bottom: 1px solid #333;
  transition: all 0.3s ease;
  width: 100%;
}

.student-new .jumclass-cs-faq__item:last-child {
  border-bottom: none;
}

/* FAQ 질문 */
.student-new .jumclass-cs-faq__question {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20px 0;
  gap: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
}

.student-new .jumclass-cs-faq__question:hover {
  color: #cccccc;
}

.student-new .jumclass-cs-faq__question-text {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.student-new .jumclass-cs-faq__q-mark {
  color: var(--cs-white);
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 140%; /* 22px */
  letter-spacing: -0.03em;
  width: 20px;
}

.student-new .jumclass-cs-faq__q-text {
  color: var(--cs-white);
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 140%; /* 22px */
  letter-spacing: -0.03em;
  flex: 1;
}

/* FAQ 토글 아이콘 - SVG 사용 */
.student-new .jumclass-cs-faq__toggle {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  background: transparent; /* 배경 제거 */
  border: none; /* 보더 제거 */
}

.student-new .jumclass-cs-faq__toggle svg {
  transition: transform 0.3s ease;
  transform: rotate(0deg); /* 기본 상태: 아래쪽 화살표 */
}

.student-new .jumclass-cs-faq__item--active .jumclass-cs-faq__toggle svg {
  transform: rotate(180deg); /* 활성화: 위쪽 화살표 */
}

/* FAQ 답변 */
.student-new .jumclass-cs-faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.student-new .jumclass-cs-faq__item--active .jumclass-cs-faq__answer {
  max-height: 1000px;
}

.student-new .jumclass-cs-faq__answer-content {
  padding: 20px;
  margin: 0 0px 16px 0px;
  background: var(--cs-background-1);
  border-radius: 6px;
  position: relative;
}

/* FAQ 답변 스크롤바 */
.student-new .jumclass-cs-faq__answer-content::after {
  content: '';
  position: absolute;
  width: 2px;
  height: calc(100% - 40px);
  right: 4px;
  top: 20px;
  background: var(--cs-gray-60);
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.3s;
}

.student-new .jumclass-cs-faq__answer-content:hover::after {
  opacity: 1;
}

.student-new .jumclass-cs-faq__answer-text {
  color: var(--cs-gray-60);
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 140%; /* 20px */
  letter-spacing: -0.03em;
  white-space: pre-wrap;
}

/* ===========================================
   7. Policy Page Specific Styles
   =========================================== */

/* 정책 텍스트 박스 */
.student-new .jumclass-cs-policy__text-box {
  color: #999999;
  font-family: 'Pretendard';
  font-size: 14px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.03em;
  height: 460px;
  overflow-y: auto;
  position: relative;
  width: 100%;
  padding-right: 10px; /* 스크롤바 오른쪽 간격 */
  margin-right: 4px;
  box-sizing: border-box;
}

/* 정책 텍스트 박스 내부 요소 스타일 통일 */
.student-new .jumclass-cs-policy__text-box h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 140%;
  margin: 20px 0 12px 0;
  color: #ffffff;
}

.student-new .jumclass-cs-policy__text-box h3:first-child {
  margin-top: 0;
}

.student-new .jumclass-cs-policy__text-box h4 {
  font-size: 14px;
  font-weight: 600;
  line-height: 140%;
  margin: 16px 0 8px 0;
  color: #ffffff;
}

.student-new .jumclass-cs-policy__text-box p {
  font-size: 14px;
  font-weight: 400;
  line-height: 160%;
  margin: 0 0 16px 0;
  color: #ffffff;
}

.student-new .jumclass-cs-policy__text-box ul,
.student-new .jumclass-cs-policy__text-box ol {
  margin: 16px 0;
  padding-left: 20px;
}

.student-new .jumclass-cs-policy__text-box li {
  font-size: 14px;
  font-weight: 400;
  line-height: 160%;
  margin: 8px 0;
  color: #ffffff;
}

.student-new .jumclass-cs-policy__text-box table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.student-new .jumclass-cs-policy__text-box th,
.student-new .jumclass-cs-policy__text-box td {
  border: 1px solid #333;
  padding: 12px;
  font-size: 14px;
  line-height: 140%;
}

.student-new .jumclass-cs-policy__text-box th {
  background: #802fff;
  color: #ffffff;
  font-weight: 700;
}

.student-new .jumclass-cs-policy__text-box td {
  color: #ffffff;
  font-weight: 400;
}

/* 스크롤바 스타일 - 피그마 기준 (컨텐츠와 간격 있음) */
@media (max-width: 768px) {
  .student-new .jumclass-cs-policy__text-box::-webkit-scrollbar {
    width: 2px;
  }

  .student-new .jumclass-cs-policy__text-box::-webkit-scrollbar-track {
    background: transparent;
  }

  .student-new .jumclass-cs-policy__text-box::-webkit-scrollbar-thumb {
    background: #999999;
    border-radius: 20px;
  }

  .student-new .jumclass-cs-policy__text-box::-webkit-scrollbar-thumb:hover {
    background: #dadada;
  }
}

/* 데스크톱 스크롤바 유지 */
@media (min-width: 769px) {
  .student-new .jumclass-cs-policy__text-box::-webkit-scrollbar {
    width: 2px;
  }

  .student-new .jumclass-cs-policy__text-box::-webkit-scrollbar-track {
    background: transparent;
  }

  .student-new .jumclass-cs-policy__text-box::-webkit-scrollbar-thumb {
    background: #999999;
    border-radius: 20px;
  }

  .student-new .jumclass-cs-policy__text-box::-webkit-scrollbar-thumb:hover {
    background: #dadada;
  }
}

/* ===========================================
   8. Loading & Error States
   =========================================== */

/* 로딩 상태 */
.student-new .jumclass-cs-center__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.student-new .jumclass-cs-center__loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #333;
  border-top-color: #802fff;
  border-radius: 50%;
  animation: jumclass-cs-spin 0.8s linear infinite;
}

@keyframes jumclass-cs-spin {
  to {
    transform: rotate(360deg);
  }
}

/* 에러 상태 */
.student-new .jumclass-cs-center__error {
  text-align: center;
  padding: 80px 20px;
}

.student-new .jumclass-cs-center__error-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 24px;
  background: #ff4444;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.student-new .jumclass-cs-center__error-text {
  color: #fff;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.48px;
  margin-bottom: 16px;
}

/* ===========================================
   9. Responsive Design
   =========================================== */

@media (max-width: 1200px) {
  .student-new .jumclass-cs-center__content {
    max-width: 960px;
  }
}

@media (max-width: 768px) {
  /* 컨테이너 조정 - 피그마 기준 */
  .student-new .jumclass-cs-center {
    padding-top: 24px; /* 상단 네비(60px) + 헤더까지의 여백(24px) */
    padding-bottom: 60px;
    width: 100%;
    max-width: 100%;
  }

  /* 헤더 조정 - 피그마 기준 */
  .student-new .jumclass-cs-center__header {
    padding: 0 0 24px;
    margin-bottom: 0;
    gap: 6px;
  }

  .student-new .jumclass-cs-center__category {
    font-size: 13px;
    line-height: 140%; /* 18px */
    margin-bottom: 6px;
  }

  .student-new .jumclass-cs-center__title {
    font-size: 20px;
    line-height: 140%; /* 28px */
    letter-spacing: -0.03em;
  }

  /* 공지사항 모바일 - 한 줄에 표시 */
  .student-new .jumclass-cs-notice__item {
    padding: 14px 0;
    flex-direction: row; /* 한 줄로 변경 */
    align-items: center;
    gap: 8px;
    justify-content: space-between;
  }

  .student-new .jumclass-cs-notice__item-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0; /* 텍스트 오버플로우를 위해 */
  }

  .student-new .jumclass-cs-notice__number {
    font-size: 13px;
    font-weight: 500;
    color: #ffffff;
    min-width: 24px;
    flex-shrink: 0;
  }

  .student-new .jumclass-cs-notice__item-title {
    font-size: 13px;
    font-weight: 500;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .student-new .jumclass-cs-notice__date {
    font-size: 13px;
    color: #999999;
    flex-shrink: 0;
    min-width: 60px;
    text-align: right;
  }

  /* 탭 메뉴 모바일 */
  .student-new .jumclass-cs-center__tabs {
    margin-bottom: 24px;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: none;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
    /* 스크롤 가능하도록 */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .student-new .jumclass-cs-center__tabs::-webkit-scrollbar {
    display: none;
  }

  /* 탭 스크롤 영역 */
  .student-new .jumclass-cs-center__tabs-list {
    gap: 16px;
    min-width: max-content;
    height: 30px;
    margin: 0;
    padding: 0 20px; /* 좌우 20px 패딩 */
    position: relative;
    border-bottom: 2px solid var(--cs-gray-20-line);
  }

  .student-new .jumclass-cs-center__tab {
    gap: 10px;
    position: relative;
    padding-bottom: 10px;
  }

  .student-new .jumclass-cs-center__tab-link {
    font-size: 14px;
  }

  .student-new .jumclass-cs-center__tab-indicator {
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    width: auto;
    height: 2px;
    background: transparent;
    z-index: 1;
  }

  .student-new
    .jumclass-cs-center__tab--active
    .jumclass-cs-center__tab-indicator {
    background: var(--cs-white);
  }

  /* FAQ 모바일 */
  .student-new .jumclass-cs-faq__question {
    padding: 16px 0;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
  }

  .student-new .jumclass-cs-faq__question-text {
    gap: 4px;
  }

  .student-new .jumclass-cs-faq__q-mark {
    font-size: 13px;
    width: 24px;
  }

  .student-new .jumclass-cs-faq__q-text {
    font-size: 13px;
    line-height: 140%; /* 18px */
    word-break: break-word;
  }

  .student-new .jumclass-cs-faq__toggle {
    width: 16px;
    height: 16px;
    background: transparent; /* 모바일에서도 배경 제거 */
    border: none; /* 모바일에서도 보더 제거 */
  }

  .student-new .jumclass-cs-faq__toggle svg {
    width: 16px;
    height: 16px;
    transform: rotate(0deg); /* 모바일 기본: 아래쪽 화살표 */
  }

  .student-new .jumclass-cs-faq__item--active .jumclass-cs-faq__toggle svg {
    transform: rotate(180deg); /* 모바일 활성화: 위쪽 화살표 */
  }

  .student-new .jumclass-cs-faq__answer-content {
    padding: 16px;
    margin-bottom: 14px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: calc(100vw - 40px);
  }

  .student-new .jumclass-cs-faq__answer-text {
    font-size: 13px;
    line-height: 140%; /* 18px */
  }

  /* 정책 모바일 - 피그마 기준 정확한 치수 */
  .student-new .jumclass-cs-policy__text-box {
    /* padding: 16px;  */
    font-size: 12px;
    /* width: 320px; 피그마 기준 전체 너비 320px */
    height: 790px; /* 피그마 기준 전체 높이 790px */
    box-sizing: border-box; /* padding 포함한 크기 계산 */
    margin: 0 auto; /* 중앙 정렬 */
    border-radius: 6px; /* 피그마 기준 border-radius */
    scroll-behavior: smooth; /* 부드러운 스크롤 */
    overflow-y: auto; /* 세로 스크롤 활성화 */
  }

  /* 모바일 정책 내용의 타이틀 크기 조정 */
  .student-new .jumclass-cs-policy__text-box h3 {
    font-size: 14px; /* 개인정보처리방침과 동일하게 */
    margin: 16px 0 8px 0;
    font-weight: 700;
    line-height: 140%;
  }

  .student-new .jumclass-cs-policy__text-box h3:first-child {
    margin-top: 0;
  }

  .student-new .jumclass-cs-policy__text-box h4 {
    font-size: 13px; /* h3보다 조금 작게 */
    margin: 12px 0 6px 0;
    font-weight: 600;
    line-height: 140%;
  }

  .student-new .jumclass-cs-policy__text-box p {
    font-size: 12px; /* 본문은 더 작게 */
    line-height: 150%;
    margin: 0 0 12px 0;
  }

  .student-new .jumclass-cs-policy__text-box li {
    font-size: 12px;
    line-height: 150%;
    margin: 6px 0;
  }

  .student-new .jumclass-cs-policy__text-box ul,
  .student-new .jumclass-cs-policy__text-box ol {
    margin: 12px 0;
    padding-left: 16px;
  }

  .student-new .jumclass-cs-policy__text-box th,
  .student-new .jumclass-cs-policy__text-box td {
    padding: 8px;
    font-size: 11px;
    line-height: 140%;
  }

  /* 페이지네이션 모바일 - 피그마 기준 */
  .student-new .jumclass-cs-center__pagination {
    padding-top: 30px;
    gap: 12px;
    flex-wrap: nowrap !important;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .student-new .jumclass-cs-center__pagination::-webkit-scrollbar {
    display: none;
  }

  .student-new .jumclass-cs-center__pagination-group {
    gap: 4px;
  }

  .student-new .jumclass-cs-center__pagination-btn {
    width: 20px;
    height: 20px;
  }

  .student-new .jumclass-cs-center__pagination-icon {
    width: 9.67px;
    height: 4.83px;
    border-width: 1.27232px;
  }

  .student-new .jumclass-cs-center__pagination-numbers {
    gap: 16px;
  }

  .student-new .jumclass-cs-center__page-number {
    font-size: 13px;
    line-height: 140%; /* 18px */
    min-width: 20px;
    height: 24px;
  }

  /* 모바일에서 정책 페이지 스타일 */
  .student-new .jumclass-cs-center__content:has(.jumclass-cs-policy__text-box) {
    /* padding: 16px 20px; 좌우 여백 20px 유지 */
    margin: 16px 20px;
    border-radius: 0; /* 모바일에서는 둥근 모서리 없음 */
    max-width: initial;
    width: calc(100% - 40px);
  }

  .student-new .jumclass-cs-policy__text-box {
    padding-right: 12px; /* 모바일에서 스크롤바 여유 */
  }
}

/* ===========================================
   10. Print Styles
   =========================================== */

@media print {
  .student-new .jumclass-cs-center__search-box,
  .student-new .jumclass-cs-center__pagination,
  .student-new .cs-tab-menu {
    display: none;
  }

  .student-new .jumclass-cs-faq__item--active .jumclass-cs-faq__answer {
    max-height: none;
  }
}

/* ===========================================
   11. Legacy Support & Overrides
   =========================================== */

/* 기존 student-new 클래스와의 호환성 */
.student-new .jumclass-cs-center {
  /* 기존 스타일 오버라이드 필요시 여기에 추가 */
}

/* ===========================================
   12. FAQ Page Specific Overrides
   =========================================== */

/* FAQ 페이지네이션이 한 줄에 중앙 정렬되도록 */
.student-new .jumclass-cs-center--faq .jumclass-cs-center__pagination {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 40px auto 0 !important;
}

/* FAQ 페이지네이션 그룹과 숫자들이 한 줄에 */
.student-new .jumclass-cs-center--faq .jumclass-cs-center__pagination-group,
.student-new .jumclass-cs-center--faq .jumclass-cs-center__pagination-numbers {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

/* 모바일에서도 한 줄 유지 */
@media (max-width: 768px) {
  .student-new .jumclass-cs-center--faq .jumclass-cs-center__pagination {
    margin: 23px auto 0 !important; /* 피그마: 884.7px - 861px = 23.7px */
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* 모바일에서 정확한 위치 조정 */
  .student-new .jumclass-cs-center__content {
    padding-bottom: 40px;
  }
}