/**
 * 수강권 시스템 전용 스타일시트
 */

/* ========== Figma 디자인 시스템 적용 ========== */
/* 폰트 설정 - Pretendard */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* 전역 폰트 설정 - Figma 타이포그래피 시스템 */
.register-list-wrap,
.register-list-wrap * {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
}

/* Typography - Figma 디자인 시스템 */
.register-list-wrap h1 {
  font-size: 56px;
  font-weight: 700;
  color: #1a1f29;
  line-height: 1.19;
}

.register-list-wrap h2 {
  font-size: 40px;
  font-weight: 700;
  color: #1a1f29;
  line-height: 1.19;
}

.register-list-wrap h3 {
  font-size: 28px;
  font-weight: 700;
  color: #1a1f29;
  line-height: 1.19;
}

.register-list-wrap p,
.register-list-wrap .body-regular {
  font-size: 18px;
  font-weight: 400;
  color: #4f5969;
  line-height: 1.5;
}

.register-list-wrap .body-large {
  font-size: 20px;
  font-weight: 600;
  color: #1a1f29;
  line-height: 1.5;
}

.register-list-wrap .caption {
  font-size: 16px;
  font-weight: 400;
  color: #828c9c;
  line-height: 1.19;
}

/* 페이지 전체 컨테이너 너비 제한 */
/* [class*=list-] 선택자로 인한 margin-left 제거 */
.selfedu.register-list-wrap {
  width: 100%;
  max-width: 100%;
  overflow: visible;
  margin-left: 0 !important;
}

/* 과목 테이블 스타일 */
.subject-list-wrap {
  width: 100%;
}

.subject-list-wrap table {
  width: 100%;
  table-layout: fixed;
}

/* ========== 보유 수강권 섹션 ========== */
.voucher-section {
  width: 100%;
  max-width: 100%;
  margin-bottom: 40px;
  overflow: visible;
}

.voucher-section .voucher-info-box {
  background: #ffffff;
  border-radius: 12px;
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

/* 수강권 헤더 (제목 + 토글) */
.voucher-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  overflow: visible;
}

.register-list-wrap .voucher-section .voucher-info-box h3,
.voucher-section .voucher-info-box h3 {
  margin: 0;
  color: #1a1f29;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

/* 세그먼트 컨트롤 (모바일 UI와 동일) */
.voucher-segment-control {
  display: inline-flex;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 3px;
  gap: 4px;
}

.voucher-segment-btn {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  letter-spacing: -0.2px;
  line-height: 1.2;
}

.voucher-segment-btn:hover:not(.active) {
  color: #475569;
  background: rgba(255, 255, 255, 0.5);
}

.voucher-segment-btn.active {
  background: #ffffff;
  color: #1a1f29;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.voucher-segment-btn:focus {
  outline: 2px solid #4085ff; /* Primary Color */
  outline-offset: 2px;
}

.voucher-section .voucher-info-box .empty-message {
  padding: 60px 20px;
  text-align: center;
  color: #828c9c;
  font-size: 14px;
  font-weight: 400;
  background: #f8fafc;
  border: 1px solid #e0e3e8;
  border-radius: 8px;
  margin: 0;
}

/* 수강권 리스트 래퍼 - 챕터 탭 래퍼와 동일한 스타일 */
.voucher-list-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: auto;
  background: #e0e3e8;
  width: 100%;
  margin-left: 0;
  border-radius: 12px;
}

/* 수강권 리스트 컨테이너 */
.voucher-section .voucher-active,
.voucher-section .voucher-used-container,
.voucher-section #voucherList,
.voucher-section #usedVoucherList {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 16px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  flex: 1;
  background: #f8fafc;
  border: 1px solid #e0e3e8;
  border-radius: 8px;
}

/* 수강권 스크롤 버튼 - 챕터 스크롤 버튼과 동일한 스타일 */
.voucher-scroll-btn {
  width: 40px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e0e3e8;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
  z-index: 1;
}

.voucher-scroll-btn:hover {
  background: #f1f5f9;
}

.voucher-scroll-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.voucher-scroll-btn svg {
  width: 20px;
  height: 20px;
  color: #697586;
  pointer-events: none;
}

.voucher-scroll-left {
  border-radius: 12px 0 0 12px;
}

.voucher-scroll-right {
  border-radius: 0 12px 12px 0;
}

/* 스크롤바 스타일 */
.voucher-section #voucherList::-webkit-scrollbar,
.voucher-section #usedVoucherList::-webkit-scrollbar {
  height: 6px;
}

.voucher-section #voucherList::-webkit-scrollbar-track,
.voucher-section #usedVoucherList::-webkit-scrollbar-track {
  background: #f2f5f7;
  border-radius: 3px;
}

.voucher-section #voucherList::-webkit-scrollbar-thumb,
.voucher-section #usedVoucherList::-webkit-scrollbar-thumb {
  background: #e0e3e8;
  border-radius: 3px;
}

.voucher-section #voucherList::-webkit-scrollbar-thumb:hover,
.voucher-section #usedVoucherList::-webkit-scrollbar-thumb:hover {
  background: #828c9c;
}

/* ========== 수강권 카드 디자인 ========== */
.voucher-section .voucher-card {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #edf0f2;
  padding: 16px;
  transition: all 0.2s ease;
  overflow: hidden;
  width: 260px;
  min-width: 260px;
  max-width: 260px;
  height: 150px;
  flex-shrink: 0;
  flex-grow: 0;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.voucher-section .voucher-card:hover {
  border-color: #828c9c;
}

/* 수강권 사용 예정 표시 - 사용될 수강권에 dim 효과 */
.voucher-section .voucher-card.voucher-scheduled {
  position: relative;
  opacity: 0.6;
  border-top: 0;
  border-left: none;
}

.voucher-section .voucher-card.voucher-scheduled::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 12px;
  z-index: 10;
  pointer-events: none;
}

.voucher-section .voucher-card.voucher-scheduled::after {
  content: "사용 예정";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  z-index: 11;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.voucher-section .voucher-card.voucher-scheduled > * {
  position: relative;
  z-index: 1;
}

/* 배경 원형 데코레이션 */
.voucher-card-bg-circle {
  position: absolute;
  right: -20px;
  top: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  z-index: 0;
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

/* 실무향상 수강권 (Indigo) */
.voucher-section .voucher-GENERAL {
  border-left: 3px solid #4f46e5;
}

.voucher-section .voucher-GENERAL .voucher-card-bg-circle {
  background: #eef2ff;
}

.voucher-section .voucher-GENERAL .voucher-card-title {
  color: #4f46e5;
}

.voucher-section .voucher-GENERAL .voucher-card-icon {
  background: #e0e7ff;
  color: #4f46e5;
}

.voucher-section .voucher-GENERAL .voucher-card-period-value {
  color: #4f46e5;
}

/* 자격취득 수강권 (Cyan) */
.voucher-section .voucher-CERTIFICATE {
  border-left: 3px solid #0891b2;
}

.voucher-section .voucher-CERTIFICATE .voucher-card-bg-circle {
  background: #ecfeff;
}

.voucher-section .voucher-CERTIFICATE .voucher-card-title {
  color: #0891b2;
}

.voucher-section .voucher-CERTIFICATE .voucher-card-icon {
  background: #cffafe;
  color: #0891b2;
}

.voucher-section .voucher-CERTIFICATE .voucher-card-period-value {
  color: #0891b2;
}

/* 패키지 수강권 - Amber 액센트 */
.voucher-section .voucher-exact-GENERAL_PACKAGE,
.voucher-section .voucher-exact-CERTIFICATE_PACKAGE {
  background: #fffbeb;
  border: 1px solid #fbbf24;
  border-left: 3px solid #fbbf24;
}

.voucher-section .voucher-exact-GENERAL_PACKAGE:hover,
.voucher-section .voucher-exact-CERTIFICATE_PACKAGE:hover {
  border-color: #f59e0b;
}

.voucher-section .voucher-exact-GENERAL_PACKAGE .voucher-card-bg-circle,
.voucher-section .voucher-exact-CERTIFICATE_PACKAGE .voucher-card-bg-circle {
  background: #fef3c7;
  opacity: 0.5;
}

.voucher-section .voucher-exact-GENERAL_PACKAGE .voucher-card-title,
.voucher-section .voucher-exact-CERTIFICATE_PACKAGE .voucher-card-title {
  color: #fbbf24;
  font-weight: 700;
}

.voucher-section .voucher-exact-GENERAL_PACKAGE .voucher-card-desc,
.voucher-section .voucher-exact-CERTIFICATE_PACKAGE .voucher-card-desc {
  color: #4f5969;
}

.voucher-section .voucher-exact-GENERAL_PACKAGE .voucher-card-expiry-value,
.voucher-section .voucher-exact-CERTIFICATE_PACKAGE .voucher-card-expiry-value {
  color: #1a1f29;
}

.voucher-section .voucher-exact-GENERAL_PACKAGE .voucher-card-period-value,
.voucher-section .voucher-exact-CERTIFICATE_PACKAGE .voucher-card-period-value {
  color: #fbbf24;
  font-weight: 700;
}

.voucher-section .voucher-exact-GENERAL_PACKAGE .voucher-card-expiry-label,
.voucher-section .voucher-exact-CERTIFICATE_PACKAGE .voucher-card-expiry-label,
.voucher-section .voucher-exact-GENERAL_PACKAGE .voucher-card-period-label,
.voucher-section .voucher-exact-CERTIFICATE_PACKAGE .voucher-card-period-label {
  color: #828c9c;
}

.voucher-section .voucher-exact-GENERAL_PACKAGE .voucher-card-footer,
.voucher-section .voucher-exact-CERTIFICATE_PACKAGE .voucher-card-footer {
  border-top-color: #ffe8b3;
}

/* 패키지 배지 (우측 상단) */
.voucher-package-badge-top {
  position: absolute;
  top: 0;
  right: 0;
  background: #fbbf24;
  color: #1a1f29;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  border-bottom-left-radius: 8px;
  z-index: 20;
}

/* 카드 상단 영역 */
.voucher-card-header {
  position: relative;
  z-index: 10;
  padding: 0;
  border: none;
  margin: 0;
  text-align: left;
}

.voucher-card-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}

.voucher-card-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

.voucher-card-icon {
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.voucher-card-icon svg {
  width: 16px;
  height: 16px;
}

.voucher-section .voucher-card-desc,
.voucher-card-desc {
  color: #4f5969;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 10px;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 카드 하단 정보 영역 */
.voucher-card-footer {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid #f3f4f6;
  padding-top: 10px;
}

.voucher-card-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.voucher-card-expiry-label,
.voucher-card-period-label {
  color: #828c9c;
  font-weight: 600;
  font-size: 14px;
}

.voucher-card-expiry-value {
  color: #1a1f29;
  font-weight: 700;
  font-size: 14px;
}

.voucher-card-period-value {
  font-weight: 700;
}

.voucher-card-period-value svg {
  width: 16px;
  height: 16px;
  margin-left: 4px;
  display: inline;
  vertical-align: middle;
}

/* 사용완료 수강권 스타일 */
.voucher-section .voucher-used {
  background: #f9fafb;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  border-left: 6px solid #e5e7eb;
  opacity: 0.7;
}

.voucher-section .voucher-used:hover {
  transform: none;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.voucher-section .voucher-used .voucher-card-bg-circle {
  display: none;
}

.voucher-section .voucher-used .voucher-card-title {
  color: #6b7280;
}

.voucher-section .voucher-used .voucher-card-desc,
.voucher-section .voucher-used .voucher-card-expiry-label,
.voucher-section .voucher-used .voucher-card-period-label,
.voucher-section .voucher-used .voucher-card-expiry-value,
.voucher-section .voucher-used .voucher-card-period-value {
  color: #9ca3af;
}

.voucher-section .voucher-used .voucher-card-icon {
  display: none;
}

.voucher-section .voucher-used .voucher-card-footer {
  border-top-color: #e5e7eb;
}

/* 사용완료 배지 */
.voucher-used-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: #828c9c;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-bottom-left-radius: 8px;
  z-index: 20;
}

/* 사용완료 오버레이 */
.voucher-used-overlay {
  display: none;
}

.voucher-used-stamp {
  display: none;
}

/* 선택됨 배지 */
.will-use-badge {
  position: absolute;
  top: 0;
  left: 0;
  background: #4f46e5;
  color: #ffffff;
  padding: 6px 12px;
  border-bottom-right-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  z-index: 20;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* 스크롤 힌트 */
.voucher-scroll-hint {
  display: none;
  color: #9ca3af;
  font-size: 14px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 8px;
  gap: 8px;
}

.voucher-scroll-hint svg {
  width: 16px;
  height: 16px;
}

@media (min-width: 768px) {
  .voucher-scroll-hint {
    display: flex;
  }
}

/* 기존 스타일 (하위 호환성) */
.voucher-punch-left,
.voucher-punch-right,
.voucher-corner-top-left,
.voucher-corner-top-right,
.voucher-number,
.voucher-main-title,
.voucher-period-box,
.voucher-expiry-box,
.voucher-period-info {
  display: none;
}

/* 과목 리스트 헤더 */
.subject-list-wrap h3.general-header {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.12), rgba(59, 130, 246, 0.08));
  color: #3b82f6;
  padding: 14px 20px;
  border-radius: 10px;
  margin-bottom: 15px;
  border-left: 4px solid #3b82f6;
  font-weight: 600;
}

.subject-list-wrap h3.certificate-header {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(22, 163, 74, 0.08));
  color: #16a34a;
  padding: 14px 20px;
  border-radius: 10px;
  margin-bottom: 15px;
  border-left: 4px solid #22c55e;
  font-weight: 600;
}

/* 학점 배지 - Figma Badge/Info 시스템 */
.subject-credit-badge {
  display: inline-block;
  padding: 6px 12px;
  background: #edf5ff;
  color: #3082f5;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  margin-left: 10px;
  border: none;
}

/* 패키지 배지 - Figma 디자인 시스템 적용 */
.subject-package-badge {
  display: inline-block;
  padding: 4px 10px;
  background: #fff5e0;
  color: #fbbf24;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  margin-left: 8px;
}

.subject-package-badge.package-only {
  padding: 5px 12px;
  background: #fff5e0;
  color: #fbbf24;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  margin-left: 10px;
}

/* ========== 수강 장바구니 섹션 ========== */
.basket-section {
  width: 100%;
  max-width: 100%;
  margin-bottom: 32px;
  clear: both !important;
  position: relative;
  float: none !important;
}

.basket-section .basket-wrap {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  float: none !important;
  clear: both !important;
}

/* 기존 스타일 오버라이드 - float 및 고정 높이 제거 */
.register-list-wrap .basket-section .basket-wrap,
.selfedu.register-list-wrap .basket-section .basket-wrap {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  clear: both !important;
  position: relative !important;
  height: auto !important;
}

/* basket-wrap 내부 body의 고정 높이도 제거 */
.register-list-wrap .basket-section .basket-wrap .body,
.selfedu.register-list-wrap .basket-section .basket-wrap .body {
  height: auto !important;
}

/* .selfedu.register-list-wrap .basket-wrap 직접 오버라이드 (고정 높이 385px 제거) */
.selfedu.register-list-wrap .basket-wrap {
  height: auto !important;
}

.selfedu.register-list-wrap .basket-wrap .body {
  height: auto !important;
}

.basket-section .basket-wrap h3 {
  color: #1a1f29;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  padding: 0;
  margin-bottom: 16px;
  width: 100%;
}

.basket-container {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: none;
  overflow: hidden;
  width: 100% !important;
  max-width: 100% !important;
  position: relative;
}

.basket-empty {
  padding: 60px 20px;
  text-align: center;
  color: #828c9c;
  font-size: 14px;
  font-weight: 400;
  background: #fafcfc;
  border: 1px solid #edf0f2;
  border-radius: 12px;
  width: 100%;
  margin-bottom: 10px;
}

#checkedList {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  margin: 0 0 10px 0 !important;
  display: table !important;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #edf0f2;
}

#checkedList thead,
#checkedList tbody,
#checkedList tr {
  width: 100% !important;
}

#checkedList thead th {
  font-size: 14px;
  font-weight: 600;
  color: #5a6b82;
  background-color: #f8fafc;
  padding: 14px 20px;
  text-align: center;
  border-right: 0 !important;
  border-top: 0 !important;
}

#checkedList tbody td {
  padding: 16px 20px;
  border-top: 0;
  border-bottom: 1px solid #edf0f2;
  color: #1a1f29;
  font-size: 15px;
  vertical-align: middle;
}

#checkedList tbody tr:last-child td {
  border-bottom: none;
}

#checkedList tbody tr:hover {
  background-color: #fafcfc;
}

/* 삭제 버튼 - 정사각형 X 버튼 */
.basket-remove-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #dc3845;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.basket-remove-btn:hover {
  background: #fef2f2;
  border-color: #dc3845;
  transform: scale(1.05);
}

.basket-remove-btn:active {
  transform: scale(0.95);
}

.basket-remove-btn svg {
  width: 16px;
  height: 16px;
  color: #dc3845;
  pointer-events: none;
}

.basket-type-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}

.basket-type-badge.badge-general {
  background: #eef2ff;
  color: #4f46e5; /* Indigo-600, 실무 향상 과정 */
  border: 1px solid #e0e7ff;
}

.basket-type-badge.badge-certificate {
  background: #e8faeb;
  color: #0891b2;
  border: none;
}

.basket-footer {
  padding: 24px;
  background: #fafcfc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  border-radius: 0 0 12px 12px;
}

.basket-count-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: #5a6b82;
}

#countView {
  font-size: 20px;
  font-weight: 700;
  color: #4085ff; /* Primary Color */
}

.basket-submit-btn {
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  background: #4085ff; /* Primary Color */
  border: none;
  color: #ffffff;
  box-shadow: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.basket-submit-btn:hover {
  background: #5b9aff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 133, 255, 0.25);
}

/* voucher_courses.jsp */
.voucher-courses-empty {
  text-align: center;
  padding: 60px 20px;
  background: #ffffff;
  border: 1px solid #edf0f2;
  border-radius: 12px;
}

.voucher-courses-empty h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1a1f29;
  margin-bottom: 12px;
}

.voucher-courses-empty p {
  font-size: 13px;
  color: #828c9c;
}

.voucher-courses-section-header {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 600;
  color: #1a1f29;
}

/* 과목 테이블 - Figma Table/Basic 디자인 */
.bulletin-general table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #edf0f2;
  border-radius: 12px;
  overflow: hidden;
}

.bulletin-general table thead th {
  text-align: center;
  background: #fafafc;
  color: #4f5969;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 20px;
  border-bottom: 1px solid #edf0f2;
}

.bulletin-general table tbody tr {
  background: #ffffff;
  transition: background-color 0.2s ease;
}

.bulletin-general table tbody tr:nth-child(even) {
  background: #fcfcfc;
}

.bulletin-general table tbody tr:hover {
  background: #f8fafc;
}

.bulletin-general table tbody td {
  text-align: center !important;
  vertical-align: middle;
  color: #1a1f29;
  font-size: 15px;
  font-weight: 500;
  padding: 16px 20px;
  border-bottom: 1px solid #edf0f2;
}

.bulletin-general table tbody tr:last-child td {
  border-bottom: none;
}

/* 강의열람 버튼 - Figma Button/Primary 디자인 */
.voucher-courses-watch-btn {
  background: #4085ff; /* Primary Color */
  color: white !important;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.voucher-courses-watch-btn:hover {
  background: #5b9aff; /* Primary Color Hover */
  color: white !important;
}

.voucher-courses-no-data {
  color: #828c9c;
  font-size: 14px;
  padding: 30px 20px;
}

/* 수강권 사용 안내 */
.voucher-guide-container {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 32px 36px;
  margin-top: 40px;
  margin-bottom: 24px;
}

.voucher-courses-info-box {
  font-size: 18px;
  font-weight: 700;
  color: #0c4a6e;
  margin: 0 0 16px 0;
  padding: 0;
  border: none;
}

.voucher-guide-section {
  margin-bottom: 24px;
}

.voucher-guide-section:last-child {
  margin-bottom: 0;
}

.voucher-guide-section-title {
  display: inline;
  background-color: #495057;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  padding: 2px;
  margin: 0 0 12px 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  line-height: 2.2;
}

.voucher-guide-section .list-1 {
  margin: 0 0 0 12px !important;
  padding: 0 !important;
  list-style: none !important;
}

.voucher-guide-section .list-1 > li {
  margin: 0 0 12px 0 !important;
  padding-left: 32px !important;
  line-height: 1.5 !important;
  color: #212529 !important;
  font-size: 18px !important;
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

.voucher-guide-section .list-1 > li:last-child {
  margin-bottom: 0 !important;
}

.voucher-guide-section .list-1 > li::before {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: #495057 !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  height: auto !important;
  width: auto !important;
  background: none !important;
}

.voucher-guide-section .list-1 > li:nth-child(1)::before {
  content: "①" !important;
}

.voucher-guide-section .list-1 > li:nth-child(2)::before {
  content: "②" !important;
}

.voucher-guide-section .list-1 > li:nth-child(3)::before {
  content: "③" !important;
}

.voucher-guide-section .list-1 > li:nth-child(4)::before {
  content: "④" !important;
}

.voucher-guide-section .list-1 > li:nth-child(5)::before {
  content: "⑤" !important;
}

.voucher-guide-section .list-1 > li:nth-child(6)::before {
  content: "⑥" !important;
}

.voucher-guide-section .list-1 > li:nth-child(7)::before {
  content: "⑦" !important;
}

.voucher-guide-section .list-1 > li:nth-child(8)::before {
  content: "⑧" !important;
}

.voucher-guide-section .list-1 > li:nth-child(9)::before {
  content: "⑨" !important;
}

.voucher-guide-section .list-1 > li:nth-child(10)::before {
  content: "⑩" !important;
}

/* 리스트 내 문단 스타일 */
.voucher-guide-section .list-1 > li p {
  margin: 10px 0 0 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1.19 !important;
  color: #6c757d !important;
}

/* 중첩 리스트 (하위 항목) */
.voucher-guide-nested-list {
  margin: 10px 0 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.voucher-guide-nested-list li {
  margin: 8px 0 !important;
  padding-left: 20px !important;
  line-height: 1.19 !important;
  color: #212529 !important;
  font-size: 16px !important;
  display: list-item !important;
}

.voucher-guide-nested-list li::marker {
  content: "- " !important;
  color: #6c757d !important;
}

.voucher-guide-sub {
  display: inline-block;
  color: #0c4a6e;
  font-size: 16px;
  padding-left: 12px;
  margin-top: 2px;
  font-weight: 400;
  opacity: 0.8;
}

/* 수강권 안내 표 스타일 */
.voucher-guide-table-wrapper {
  margin-top: 12px;
  margin-bottom: 8px;
  border-top: 0;
  border-bottom: 0;
}

.voucher-guide-table-desc {
  display: block;
  font-size: 16px;
  color: #6c757d;
  margin-bottom: 10px;
  font-weight: 400;
  border-top: 0;
  border-bottom: 0;
}

.voucher-guide-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.voucher-guide-table thead {
  background: transparent !important;
  border: none !important;
}

.voucher-guide-table th {
  padding: 12px 16px !important;
  text-align: center !important;
  vertical-align: middle !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  border: 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  background: transparent !important;
}

.voucher-guide-table td {
  padding: 12px 16px !important;
  text-align: center !important;
  font-size: 16px !important;
  color: #334155 !important;
  border: 0 !important;
  border-bottom: 1px solid #E0E3E8 !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  background: #FFFFFF !important;
  vertical-align: middle !important;
}

.voucher-guide-table tbody tr:last-child td {
  border-bottom: none;
}

.voucher-guide-table tbody tr:hover {
  background: none;
}

.voucher-courses-section-badge-general {
  background: #edf5ff;
  color: #3082f5;
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
}

.voucher-courses-section-badge-certificate {
  background: #e8faeb;
  color: #0891b2;
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
}

.voucher-courses-detail-badge-general {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #3082f5;
  background: #edf5ff;
}

.voucher-courses-detail-badge-certificate {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #0891b2;
  background: #e8faeb;
}

.voucher-courses-detail-badge-general-package {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #3082f5;
  background: #edf5ff;
  border: 1.5px solid #fbbf24;
}

.voucher-courses-detail-badge-certificate-package {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #0891b2;
  background: #e8faeb;
  border: 1.5px solid #fbbf24;
}

/* voucher_history.jsp */
.voucher-history-empty {
  text-align: center;
  padding: 60px 20px;
}

.voucher-history-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 15px;
  margin-top: 30px;
  padding: 20px 0;
}

.voucher-history-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.voucher-history-btn i {
  font-size: 16px;
}

.voucher-history-btn-primary {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
  border: none;
}

.voucher-history-btn-primary:hover {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
  color: white;
  text-decoration: none;
}

.voucher-history-btn-secondary {
  background: white;
  color: #64748b;
  border: 2px solid #e2e8f0;
}

.voucher-history-btn-secondary:hover {
  background: linear-gradient(135deg, #94a3b8, #64748b);
  color: white;
  border-color: #64748b;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(100, 116, 139, 0.3);
  text-decoration: none;
}

.voucher-history-type-general,
.voucher-history-type-certificate,
.voucher-history-type-general-package,
.voucher-history-type-certificate-package {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}

.voucher-history-type-general {
  background: #eef2ff; /* Indigo-50 */
  color: #4f46e5; /* Indigo-600 */
}

.voucher-history-type-certificate {
  background: #e8faeb;
  color: #0891b2;
}

.voucher-history-type-general-package {
  background: #fff5e0;
  color: #fbbf24;
}

.voucher-history-type-certificate-package {
  background: #fff5e0;
  color: #fbbf24;
}

.voucher-history-status-active {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background: #edf5ff; /* Primary Color Light */
  color: #4085ff; /* Primary Color */
  font-weight: 600;
  font-size: 13px;
}

.voucher-history-status-waiting {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background: #fff5e0;
  color: #fbbf24;
  font-weight: 600;
  font-size: 13px;
}

.voucher-history-status-cancelled {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background: #f2f5f7;
  color: #828c9c;
  font-weight: 600;
  font-size: 13px;
}

.voucher-history-status-ended {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background: #f2f5f7;
  color: #828c9c;
  font-weight: 600;
  font-size: 13px;
}

.voucher-history-payment-type {
  display: inline-block;
  padding: 4px 10px;
  background: linear-gradient(135deg, #94a3b8, #64748b);
  color: white;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

.voucher-history-period-empty {
  color: #9ca3af;
}

/* 신청 내역 드롭다운 섹션 */
.voucher-history-dropdown-section {
  margin-top: 40px;
  border-radius: 12px;
  border: 1px solid #edf0f2;
  overflow: hidden;
  background: #ffffff;
}

.voucher-history-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px 18px 0;
  background: #ffffff;
  color: #1a1f29;
  cursor: pointer;
  transition: all 0.2s ease;
}

.voucher-history-dropdown-header:hover {
  background: #f8fafc;
}

.voucher-history-dropdown-header.active {
  background: #ffffff;
}

.voucher-history-dropdown-title {
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1a1f29;
}

.voucher-history-dropdown-title i {
  font-size: 16px;
  color: #828c9c;
}

.voucher-history-dropdown-arrow {
  font-size: 12px;
  color: #828c9c;
  transition: transform 0.2s ease;
}

.voucher-history-dropdown-content {
  background: #f8fafc;
  border-top: 1px solid #edf0f2;
  padding: 20px;
}

.voucher-history-dropdown-empty {
  padding: 50px 20px;
  text-align: center;
  color: #828c9c;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #edf0f2;
}

.voucher-history-dropdown-empty p {
  margin-bottom: 15px;
  font-size: 14px;
  color: #828c9c;
}

.voucher-history-dropdown-table {
  margin-bottom: 0;
  background: #ffffff;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #edf0f2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.voucher-history-dropdown-table thead th {
  background: #fafafc;
  color: #4f5969;
  font-weight: 600;
  font-size: 13px;
  padding: 14px 18px;
  border-bottom: 1px solid #edf0f2;
  text-align: center;
  border-right: 0;
  border-top: 0;
}

.voucher-history-dropdown-table tbody td {
  padding: 16px 18px;
  font-size: 14px;
  color: #1a1f29;
  border-top: 0;
  border-bottom: 1px solid #f2f5f7;
  vertical-align: middle;
  text-align: center;
  background: #ffffff;
}

.voucher-history-dropdown-table tbody tr:nth-child(even) td {
  background: #fcfcfc;
}

.voucher-history-dropdown-table tbody tr:last-child td {
  border-bottom: none;
}

.voucher-history-dropdown-table tbody tr:hover td {
  background-color: #f8fafc;
}

/* 취소된 항목 스타일 - 모바일과 동일 */
.voucher-history-dropdown-table tbody tr.voucher-history-row-cancelled {
  opacity: 0.55;
}

.voucher-history-dropdown-table tbody tr.voucher-history-row-cancelled td {
  background: #f8f9fa !important;
  color: #64748b;
}

.voucher-history-dropdown-table tbody tr.voucher-history-row-cancelled:hover td {
  background: #f8f9fa !important;
  opacity: 0.65;
}

.voucher-history-dropdown-table tbody tr.voucher-history-row-cancelled td.txt-l {
  text-decoration: line-through;
  color: #64748b;
}

/* 관리자 페이지 */
.voucher-admin-edit-dates-btn {
  margin-left: 10px;
}

/* 과목 탭 스타일 */
.subject-tabs-wrap {
  width: 100%;
  margin-bottom: 30px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: none;
  overflow: hidden;
}

.subject-tabs-header {
  display: flex;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid #edf0f2;
}

.subject-tab {
  flex: 0 0 auto;
  max-width: 180px;
  position: relative;
  display: block;
  padding: 14px 20px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #828c9c;
  background: transparent;
  text-decoration: none;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.subject-tab:hover {
  color: #4f46e5;
  background: #f8fafc;
}

.subject-tab.active {
  color: #4085ff; /* Primary Color */
  position: relative;
}

.subject-tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #4085ff; /* Primary Color */
}

.subject-tab[aria-selected="true"] {
  color: #4085ff; /* Primary Color */
}

/* 자격 취득 탭 - 녹색 테마 */
.subject-tab[data-tab="certificate"]:hover {
  color: #0891b2;
  background: #f0fdf4;
}

.subject-tab[data-tab="certificate"].active {
  color: #0891b2;
}

.subject-tab[data-tab="certificate"].active::after {
  background: #0891b2;
}

.subject-tab[data-tab="certificate"][aria-selected="true"] {
  color: #0891b2;
}

/* 실무 향상 탭 - 블루 테마 */
.subject-tab[data-tab="general"]:hover {
  color: #4f46e5;
  background: #f8fafc;
}

.subject-tab[data-tab="general"].active {
  color: #4f46e5;
}

.subject-tab[data-tab="general"].active::after {
  background: #4f46e5;
}

.subject-tab[data-tab="general"][aria-selected="true"] {
  color: #4f46e5;
}

.subject-tabs-content {
  background: white;
  padding: 0;
}

.subject-tab-panel {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  will-change: opacity;
}

.subject-tab-panel[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.subject-tab-panel[style*="display: none"] {
  opacity: 0;
  visibility: hidden;
}

/* 과목 테이블 스타일 - Figma 디자인 시스템 */
.subject-tabs-content .table {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  border: 1px solid #edf0f2;
  transition: opacity 0.3s ease;
}

.subject-tabs-content .table thead th {
  background: #fafafc;
  color: #4f5969;
  font-weight: 600;
  font-size: 14px;
  padding: 16px 20px;
  border: none;
  white-space: nowrap;
  height: 49px;
  vertical-align: middle;
}

.subject-tabs-content .table tbody {
  background: transparent;
}

.subject-tabs-content .table tbody .subject-row {
  transition: all 0.15s ease;
  background: white;
  height: 50px;
}

.subject-tabs-content .table tbody .subject-row:nth-child(even) {
  background: #fcfcfc;
}

.subject-tabs-content .table tbody .subject-row:hover {
  background: #f8fafc;
}

.subject-tabs-content .table tbody .subject-row td {
  padding: 16px 20px;
  vertical-align: middle;
  border: none;
  border-bottom: 1px solid #f2f5f7;
}

.subject-tabs-content .table tbody .subject-row:last-child td {
  border-bottom: none;
}

.subject-tabs-content .table tbody .subject-row td:first-child {
  padding-left: 20px;
}

.subject-tabs-content .table tbody .subject-row td:last-child {
  padding-right: 20px;
}

.subject-tabs-content .subject-name {
  font-size: 15px;
  color: #1a1f29;
  font-weight: 500;
}

.subject-teacher-section .subject-teacher-name {
  color: #5a6b82;
  font-size: 13px;
  font-weight: 400;
}

.subject-tabs-content .subject-empty-message {
  padding: 60px 24px;
  color: #828c9c;
  font-size: 13px;
  font-weight: 400;
  background: transparent;
  border: none;
  text-align: center;
}

/* 체크박스 스타일 */
.subject-tabs-content .subject-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #4085FF;
}

/* 상세보기 버튼 스타일 */
.subject-detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #5a6b82;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.subject-detail-btn:hover {
  background-color: #475569;
  border-color: #475569;
  color: #ffffff;
}

.subject-detail-btn.active {
  background-color: #475569;
  border-color: #475569;
  color: #ffffff;
}

.detail-arrow {
  display: inline-block;
  font-size: 10px;
  transition: transform 0.2s ease;
}

.subject-detail-btn.active .detail-arrow {
  transform: rotate(180deg);
}

.subject-detail-row {
  background-color: #fafcfc;
}

.subject-detail-row td {
  padding: 0 !important;
  border: none !important;
}

.subject-detail-content {
  display: none;
  padding: 24px;
  background: #fafcfc;
}

/* 상세정보 래퍼 */
.subject-detail-wrapper {
  max-width: 100%;
}

/* 섹션 공통 스타일 - Figma Accordion 디자인 */
.subject-detail-wrapper .detail-section {
  margin-bottom: 20px;
  padding: 20px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #edf0f2;
}

.subject-detail-wrapper .detail-section:last-child {
  margin-bottom: 0;
}

.subject-detail-wrapper .detail-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1f29;
  margin: 0 0 16px 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* 기본 정보 리스트 */
.subject-detail-wrapper .detail-info-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #edf0f2;
}

.subject-detail-wrapper .detail-info-row,
.subject-detail-wrapper div.detail-info-row {
  display: flex;
  padding: 16px 20px;
  border-bottom: 1px solid #edf0f2;
  border-right: 1px solid #edf0f2;
  transition: all 0.2s ease;
  background: #ffffff;
  color: inherit !important;
}

.subject-detail-wrapper .detail-info-row:hover,
.subject-detail-wrapper div.detail-info-row:hover {
  background: #f9fafb;
}

.subject-detail-wrapper .detail-info-row:nth-child(2n),
.subject-detail-wrapper div.detail-info-row:nth-child(2n) {
  border-right: none;
}

.subject-detail-wrapper .detail-info-row:nth-last-child(-n + 2),
.subject-detail-wrapper div.detail-info-row:nth-last-child(-n + 2) {
  border-bottom: none;
}

.subject-detail-wrapper .detail-info-row .detail-label,
.subject-detail-wrapper .detail-info-row span.detail-label {
  min-width: 100px;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #4f5969 !important;
  padding-right: 16px;
}

.subject-detail-wrapper .detail-value {
  flex: 1;
  font-size: 16px !important;
  color: #1a1f29 !important;
  font-weight: 400 !important;
}

/* 학점 인정 - Figma Badge/Error 스타일 */
.subject-detail-wrapper .credit-recognition {
  display: inline-block;
  color: #db3845;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  background: #ffeded;
  border-radius: 6px;
  border: none;
}

/* 강의개요 */
.subject-detail-wrapper .detail-outline-content {
  font-size: 14px;
  line-height: 1.8;
  color: #828c9c;
  white-space: pre-line;
  padding: 16px;
  background: #fafcfc;
  border-radius: 6px;
  border: 1px solid #edf0f2;
}

/* 차시 정보 리스트 - Figma Lesson Item 스타일 */
.subject-detail-wrapper .detail-lessons-grid {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #edf0f2;
  border-radius: 6px;
  overflow: hidden;
}

.subject-detail-wrapper .detail-lesson-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #ffffff;
  border-bottom: 1px solid #edf0f2;
  transition: all 0.2s ease;
}

.subject-detail-wrapper .detail-lesson-item:last-child {
  border-bottom: none;
}

.subject-detail-wrapper .detail-lesson-item:hover {
  background: #f9fafb;
}

.subject-detail-wrapper .lesson-number {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: #3082f5;
  background: #edf5ff;
  padding: 5px 12px;
  border-radius: 6px;
  min-width: auto;
  width: auto;
  height: auto;
  display: inline-block;
  border: none;
}

.subject-detail-wrapper .lesson-title {
  font-size: 16px;
  color: #1a1f29;
  font-weight: 600;
  line-height: 1.4;
}

/* 반응형 */
@media (max-width: 768px) {
  .subject-detail-wrapper .detail-info-grid {
    grid-template-columns: 1fr;
  }

  .subject-detail-wrapper .subject-detail-content {
    padding: 20px;
  }
}

/* ========== 과목 상세 페이지 ========== */

/* 과목 헤더 카드 */
.course-detail-header {
  background: #ffffff;
  border: 1px solid #edf0f2;
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 24px;
  position: relative;
}

.course-detail-header.compact {
  padding: 16px 20px;
}

.course-detail-header.horizontal {
  padding: 20px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  background: #ffffff;
  border: 1px solid #edf0f2;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.course-detail-header.horizontal:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}

.course-detail-header.horizontal .course-back-btn {
  margin-bottom: 0;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: #f8fafc;
  border: 1px solid #edf0f2;
  border-radius: 10px;
  color: #4f5969;
  transition: all 0.2s ease;
}

.course-detail-header.horizontal .course-back-btn:hover {
  background: #edf0f2;
  color: #1a1f29;
  transform: translateX(-2px);
  border-color: #cbd5e1;
}

.course-detail-header.horizontal .course-title {
  flex: 1;
  font-size: 24px !important;
  font-weight: 700 !important;
  margin: 0;
  line-height: 1.3 !important;
  color: #1a1f29 !important;
  min-width: 0;
}

.course-detail-header.horizontal .course-type-badge {
  margin-bottom: 0;
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

.course-detail-header.horizontal .course-type-badge.general {
  background: #edf5ff !important;
  color: #4f46e5 !important;
}

.course-detail-header.horizontal .course-type-badge.certificate {
  background: #f3f0ff !important;
  color: #7c3aed !important;
}

.course-detail-header.horizontal .course-progress-inline {
  flex-shrink: 0;
  background: #f8fafc;
  border: 1px solid #edf0f2;
  border-radius: 10px;
  padding: 10px 18px;
  min-width: 90px;
}

/* 뒤로가기 버튼 */
.course-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #f8fafc;
  border-radius: 50%;
  color: #4f5969;
  font-size: 16px;
  text-decoration: none;
  margin-bottom: 16px;
  transition: all 0.2s ease;
  border: 1px solid #edf0f2;
}

.course-detail-header.compact .course-back-btn {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  margin-bottom: 0;
  width: 36px;
  height: 36px;
}

.course-detail-header.compact .course-back-btn:hover {
  transform: translateY(-50%) translateX(-4px);
}

.course-back-btn:hover {
  background: #edf0f2;
  color: #1a1f29;
  text-decoration: none;
  transform: translateX(-4px);
}

.course-back-btn svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.course-back-btn:hover svg {
  transform: translateX(-2px);
}

.course-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 0;
  transition: all 0.2s ease;
}

.course-back-link:hover {
  color: white;
  text-decoration: none;
  transform: translateX(-3px);
}

.course-header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

.course-header-content.centered {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.course-header-info {
  flex: 1;
  min-width: 200px;
}

.course-type-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-bottom: 10px;
  line-height: 1.5 !important;
}

.course-header-content.centered .course-type-badge {
  margin-bottom: 4px;
}

.course-type-general {
  background: #edf5ff !important;
  color: #4f46e5 !important;
  border: none;
}

.course-type-certificate {
  background: #f3f0ff !important;
  color: #7c3aed !important;
  border: none;
}

.course-title {
  color: #1a1f29;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}

.course-header-content.centered .course-title {
  font-size: 20px;
  margin-bottom: 6px;
}

/* 인라인 진행 상태 */
.course-progress-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f8fafc;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid #edf0f2;
  transition: all 0.2s ease;
}

.course-progress-inline:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.course-progress-inline {
  margin: 0;
}

.course-progress-inline .progress-label {
  font-size: 11px !important;
  color: #828c9c !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

.course-progress-inline .progress-value {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #4f46e5 !important;
  line-height: 1.2;
  margin: 0;
}

.course-progress-inline .progress-total {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #828c9c !important;
  margin-left: 2px;
}

/* 스크린 리더 전용 텍스트 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.course-header-stats {
  display: flex;
  gap: 20px;
  flex-shrink: 0;
}

.course-stat {
  text-align: center;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  min-width: 80px;
}

.course-stat.course-stat-progress {
  padding: 14px 24px;
  min-width: 120px;
}

.course-stat .stat-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: white;
  line-height: 1;
}

.course-stat.course-stat-progress .stat-value {
  font-size: 26px;
}

.course-stat .stat-total {
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

.course-stat .stat-label {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 4px;
  font-weight: 500;
}

.course-stat.course-stat-progress .stat-label {
  font-size: 12px;
  margin-bottom: 6px;
  margin-top: 0;
}

/* 파트 선택 카드 - Figma Card 디자인 */
.course-part-selector-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: none;
  border: 1px solid #edf0f2;
}

.part-selector-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.part-selector-icon {
  font-size: 18px;
  color: #22c55e;
}

.part-selector-title {
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
}

.part-selector-dropdown-wrap {
  position: relative;
}

.part-selector-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 2px solid #86efac;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}

.part-selector-btn:hover {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  border-color: #4ade80;
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.25);
  transform: translateY(-2px);
}

.part-selector-btn.active {
  background: linear-gradient(135deg, #0891b2 0%, #16a34a 100%);
  border-color: #16a34a;
  box-shadow: 0 6px 20px rgba(33, 166, 74, 0.35);
}

.part-selector-btn.active .part-selector-current {
  color: white;
}

.part-selector-btn.active .part-selector-arrow {
  color: white;
  transform: rotate(180deg);
}

.part-selector-current {
  font-size: 16px;
  font-weight: 700;
  color: #166534;
  line-height: 1.4;
  text-align: left;
  flex: 1;
}

.part-selector-arrow {
  font-size: 14px;
  color: #22c55e;
  transition: transform 0.25s ease, color 0.25s ease;
  flex-shrink: 0;
  margin-left: 12px;
}

/* 드롭다운 메뉴 */
.part-selector-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  border: 1px solid #e2e8f0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.25s ease;
  z-index: 100;
  overflow: hidden;
  max-height: 300px;
  overflow-y: auto;
}

.part-selector-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.part-selector-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid #f1f5f9;
}

.part-selector-item:last-child {
  border-bottom: none;
}

.part-selector-item:hover {
  background: #f0fdf4;
}

.part-selector-item.active {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
}

.part-selector-item.active .part-item-name {
  color: #166534;
  font-weight: 700;
}

.part-selector-item.active .part-item-count {
  background: #22c55e;
  color: white;
}

.part-item-name {
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  flex: 1;
  line-height: 1.4;
}

.part-item-count {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 20px;
  flex-shrink: 0;
  margin-left: 12px;
}

/* 파트 패널 헤더 */
.part-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
  margin: -20px -20px 20px -20px;
  border-radius: 16px 16px 0 0;
}

.part-panel-title {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
}

.part-panel-count {
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  background: white;
  padding: 4px 12px;
  border-radius: 20px;
}

/* 차시 목록 컨테이너 - Figma Card 디자인 */
.course-lessons-container {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #edf0f2;
  box-shadow: none;
  overflow: hidden;
}

.part-lessons-panel {
  display: none;
  padding: 20px;
}

.part-lessons-panel.active {
  display: block;
  animation: fadeInPanel 0.3s ease;
}

@keyframes fadeInPanel {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lessons-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 차시 카드 - Figma Lesson Item 디자인 */
.lesson-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #edf0f2;
  transition: all 0.2s ease;
}

.lesson-card:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.lesson-card.started {
  background: #edf5ff;
  border-color: #b8d4fe;
}

.lesson-card.started:hover {
  background: #dbe9ff;
  border-color: #9dc5fe;
  box-shadow: 0 2px 8px rgba(64, 133, 255, 0.12);
}

.lesson-card .lesson-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  color: #64748b;
  flex-shrink: 0;
}

.lesson-card.started .lesson-number {
  background: #4f46e5;
  border-color: #4f46e5;
  color: white;
}

.lesson-info {
  flex: 1;
  min-width: 0;
}

.lesson-title {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #1a1f29 !important;
  margin: 0 0 4px 0;
  line-height: 1.5 !important;
}

.lesson-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

.lesson-status i {
  font-size: 11px;
}

.lesson-status-started {
  color: #4f46e5 !important;
}

.lesson-status-new {
  color: #94a3b8 !important;
}

.lesson-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: #4f46e5 !important;
  color: white !important;
  border: none;
  border-radius: 10px;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  line-height: 1.5 !important;
}

.lesson-play-btn:hover {
  background: #3570e0 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 133, 255, 0.25);
}

.lesson-play-btn i {
  font-size: 11px;
}

/* ========== Chapter 탭 스타일 - Figma Card 디자인 ========== */
.chapter-tabs-container {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #edf0f2;
  box-shadow: none;
  overflow: hidden;
}

.chapter-tabs-header {
  display: flex;
  background: #ffffff;
  border-bottom: 1px solid #edf0f2;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.chapter-tabs-header::-webkit-scrollbar {
  height: 0;
  display: none;
}

.chapter-tab {
  flex: 1;
  min-width: 100px;
  padding: 16px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  background: #ffffff;
  border: none;
  border-bottom: 4px solid transparent;
  font-family: inherit;
  font-size: inherit;
}

.chapter-tab:hover {
  background: #f8fafc;
}

.chapter-tab.active {
  background: #ffffff;
  border-bottom-color: #4085ff !important; /* Primary Color */
}

.chapter-tab-number {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #828c9c !important;
  transition: color 0.2s ease;
  line-height: 1.5 !important;
}

.chapter-tab.active .chapter-tab-number {
  color: #4085ff !important; /* Primary Color */
  font-weight: 600 !important;
}

.chapter-tab:hover .chapter-tab-number {
  color: #4085ff !important; /* Primary Color */
}

/* Chapter 컨텐츠 영역 */
.chapter-contents {
  padding: 0;
}

.chapter-content {
  display: none;
  padding: 24px;
  animation: chapterFadeIn 0.3s ease;
}

.chapter-content.active {
  display: block;
}

@keyframes chapterFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Chapter 타이틀 박스 */
.chapter-title-box {
  background: #f8fafc;
  border: 1px solid #edf0f2;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 20px;
}

.chapter-label {
  display: inline-block;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #4085ff !important; /* Primary Color */
  background: #edf5ff !important;
  padding: 5px 12px;
  border-radius: 6px;
  margin-bottom: 8px;
  line-height: 1.5 !important;
}

.chapter-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #1a1f29 !important;
  margin: 0 0 8px 0;
  line-height: 1.4 !important;
}

.chapter-lesson-count {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #828c9c !important;
  line-height: 1.5 !important;
}

/* Chapter 탭 반응형 */
@media (max-width: 768px) {
  .chapter-tabs-header {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .chapter-tab {
    min-width: 90px;
    padding: 14px 16px;
    flex: 0 0 auto;
  }

  .chapter-tab-number {
    font-size: 13px;
  }

  .chapter-content {
    padding: 16px;
  }

  .chapter-title-box {
    padding: 16px;
  }

  .chapter-title {
    font-size: 16px;
  }
}

/* 과목 상세 반응형 */
@media (max-width: 768px) {
  .course-detail-header {
    padding: 20px;
  }

  .course-detail-header.horizontal {
    padding: 16px 20px;
    flex-wrap: wrap;
    gap: 12px;
  }

  .course-detail-header.horizontal .course-back-btn {
    width: 36px;
    height: 36px;
  }

  .course-detail-header.horizontal .course-title {
    font-size: 20px !important;
    flex: 1 1 100%;
    order: 2;
  }

  .course-detail-header.horizontal .course-type-badge {
    order: 3;
  }

  .course-detail-header.horizontal .course-progress-inline {
    order: 4;
    min-width: 80px;
    padding: 8px 14px;
  }

  .course-header-content {
    flex-direction: column;
  }

  .course-header-stats {
    width: 100%;
    justify-content: center;
    gap: 12px;
  }

  .course-stat {
    flex: 1;
    min-width: auto;
    padding: 10px 12px;
  }

  .course-stat .stat-value {
    font-size: 20px;
  }

  .course-title {
    font-size: 18px;
  }

  .course-part-selector-card {
    padding: 16px;
    margin-bottom: 16px;
  }

  .part-selector-btn {
    padding: 14px 16px;
  }

  .part-selector-current {
    font-size: 14px;
  }

  .part-selector-menu {
    max-height: 250px;
  }

  .part-selector-item {
    padding: 12px 16px;
  }

  .part-item-name {
    font-size: 14px;
  }

  .part-panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 16px;
    margin: -20px -20px 16px -20px;
  }

  .lesson-card {
    flex-wrap: wrap;
    padding: 14px 16px;
  }

  .lesson-info {
    flex: 1 1 calc(100% - 70px);
  }

  .lesson-play-btn {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }
}

/* ========== 수강권 배너 섹션 ========== */
.voucher-banner-section {
  width: 100%;
  margin-bottom: 40px;
}

.voucher-banner-container {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.voucher-banner-image {
  width: 100%;
  height: auto;
  display: block;
}

/* ========== 1컬럼 레이아웃 ========== */
.course-layout-container {
  width: 100%;
  margin-bottom: 40px;
}

/* ========== 강의 목록 ========== */
.course-lessons-column {
  width: 100%;
}

/* 간단한 헤더 */
.course-header-simple {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 16px;
  border: 1px solid #edf0f2;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.course-header-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.course-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  background: transparent;
  border: 1px solid #e5e8eb;
  border-radius: 6px;
  color: #697586;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s ease;
  width: auto;
  align-self: flex-start;
}

.course-back-link:hover {
  background: #f8fafc;
  border-color: #d1d6db;
  color: #4f5969;
  text-decoration: none;
  transform: translateX(-2px);
}

.course-back-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.course-main-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1a1f29 !important;
  margin: 0;
  line-height: 1.4 !important;
  width: 100%;
}

.course-meta-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.course-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #697586;
}

.course-meta-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ========== 아코디언 스타일 ========== */
.accordion-chapters-container {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #edf0f2;
  overflow: hidden;
}

.accordion-section {
  border-bottom: 1px solid #edf0f2;
}

.accordion-section:last-child {
  border-bottom: none;
}

.accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: #fafafc;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
  font-family: inherit;
}

.accordion-header:hover {
  background: #f1f5f9;
}

.accordion-section.active .accordion-header {
  background: #ffffff;
  border-bottom: 1px solid #edf0f2;
}

.accordion-header-left {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.accordion-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.accordion-meta-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.accordion-duration-text {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #828c9c !important;
  line-height: 1 !important;
}

.accordion-arrow {
  width: 20px;
  height: 20px;
  color: #828c9c;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.accordion-section.active .accordion-arrow {
  transform: rotate(180deg);
}

.accordion-title-group {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.accordion-section-label {
  display: block;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #828c9c !important;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1 !important;
}

.accordion-section-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1a1f29 !important;
  margin: 0;
  line-height: 1.4 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.accordion-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.accordion-progress-text {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #4f5969 !important;
  line-height: 1 !important;
}

/* 챕터 컨텐츠 */
.accordion-content {
  display: none;
  background: #ffffff;
  padding: 0;
}

.accordion-lessons-list {
  padding: 0;
}

.accordion-lesson-item {
  border-bottom: 1px solid #f2f5f7;
}

.accordion-lesson-item:last-child {
  border-bottom: none;
}

.accordion-lesson-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #ffffff;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  text-align: left;
}

.accordion-lesson-trigger:hover {
  background: #f8fafc;
}

.accordion-lesson-item.completed .accordion-lesson-trigger {
  background: #f7faff;
}

.accordion-lesson-item.completed .accordion-lesson-trigger:hover {
  background: #edf5ff;
}

.accordion-lesson-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.accordion-lesson-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #e0e3e8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #ffffff;
  transition: all 0.2s ease;
}

.accordion-lesson-check svg {
  width: 14px;
  height: 14px;
  color: #828c9c;
  transition: color 0.2s ease;
}

.accordion-lesson-check.completed {
  background: #4085ff; /* Primary Color */
  border-color: #4085ff; /* Primary Color */
}

.accordion-lesson-check.completed svg {
  color: #ffffff;
}

.accordion-lesson-info {
  flex: 1;
  min-width: 0;
}

.accordion-lesson-title {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #1a1f29 !important;
  margin: 0 0 4px 0;
  line-height: 1.4 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.accordion-lesson-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #828c9c !important;
  line-height: 1 !important;
}

.accordion-lesson-meta svg {
  flex-shrink: 0;
}

.accordion-lesson-item.completed .accordion-lesson-meta {
  color: #4f46e5 !important;
}

.accordion-lesson-play {
  width: 20px;
  height: 20px;
  color: #828c9c;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.accordion-lesson-trigger:hover .accordion-lesson-play {
  color: #4f46e5;
  transform: scale(1.1);
}

/* ========== 챕터 탭 스타일 ========== */
.chapter-tabs-container {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #edf0f2;
  overflow: hidden;
}

/* 탭 헤더 래퍼 */
.chapter-tabs-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #edf0f2;
  background: #fafafc;
}

/* 탭 헤더 */
.chapter-tabs-header {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  scroll-behavior: smooth;
}

.chapter-tabs-header::-webkit-scrollbar {
  height: 4px;
}

.chapter-tabs-header::-webkit-scrollbar-track {
  background: #f2f5f7;
}

.chapter-tabs-header::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 2px;
}

/* 스크롤 버튼 */
.chapter-scroll-btn {
  width: 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafc;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
  z-index: 1;
}

.chapter-scroll-btn:hover {
  background: #f1f5f9;
}

.chapter-scroll-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.chapter-scroll-btn svg {
  width: 20px;
  height: 20px;
  color: #697586;
  pointer-events: none;
}

.chapter-scroll-left {
  border-right: 1px solid #edf0f2;
}

.chapter-scroll-right {
  border-left: 1px solid #edf0f2;
}

.chapter-tab {
  min-width: 180px;
  max-width: 180px;
  width: 180px;
  flex: 0 0 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 20px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  text-align: center;
}

.chapter-tab:hover {
  background: #f1f5f9;
}

.chapter-tab.active {
  background: #ffffff;
  border-bottom-color: #4085ff; /* Primary Color */
}

.chapter-tab-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #828c9c !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1 !important;
}

.chapter-tab.active .chapter-tab-label {
  color: #4085ff !important; /* Primary Color */
}

.chapter-tab-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1a1f29 !important;
  line-height: 1.3 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.chapter-tab.active .chapter-tab-title {
  color: #4085ff !important; /* Primary Color */
}

.chapter-tab-progress {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #697586 !important;
  line-height: 1 !important;
}

.chapter-tab.active .chapter-tab-progress {
  color: #4085ff !important; /* Primary Color */
}

/* 탭 컨텐츠 */
.chapter-tabs-content {
  background: #ffffff;
}

.chapter-tab-panel {
  display: none;
}

.chapter-tab-panel.active {
  display: block;
}

/* 강의 리스트 */
.chapter-lessons-list {
  padding: 0;
}

.chapter-lesson-item {
  border-bottom: 1px solid #f2f5f7;
}

.chapter-lesson-item:last-child {
  border-bottom: none;
}

.chapter-lesson-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #ffffff;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  text-align: left;
}

.chapter-lesson-trigger:hover {
  background: #f8fafc;
}

.chapter-lesson-item.completed .chapter-lesson-trigger {
  background: #f7faff;
}

.chapter-lesson-item.completed .chapter-lesson-trigger:hover {
  background: #edf5ff;
}

.chapter-lesson-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.chapter-lesson-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #e0e3e8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #ffffff;
  transition: all 0.2s ease;
}

.chapter-lesson-check svg {
  width: 14px;
  height: 14px;
  color: #828c9c;
  transition: color 0.2s ease;
}

.chapter-lesson-check.completed {
  background: #4085ff; /* Primary Color */
  border-color: #4085ff; /* Primary Color */
}

.chapter-lesson-check.completed svg {
  color: #ffffff;
}

.chapter-lesson-info {
  flex: 1;
  min-width: 0;
}

.chapter-lesson-title {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #1a1f29 !important;
  margin: 0 0 4px 0;
  line-height: 1.4 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chapter-lesson-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #828c9c !important;
  line-height: 1 !important;
}

.chapter-lesson-meta svg {
  flex-shrink: 0;
}

.chapter-lesson-item.completed .chapter-lesson-meta {
  color: #4085ff !important; /* Primary Color */
}

.chapter-lesson-play {
  width: 20px;
  height: 20px;
  color: #828c9c;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.chapter-lesson-trigger:hover .chapter-lesson-play {
  color: #4085ff; /* Primary Color */
  transform: scale(1.1);
}
/* ========== 오른쪽 영역: 강의 정보 사이드바 ========== */
.course-info-sidebar {
  position: sticky;
  top: 20px;
  height: fit-content;
}

/* 강의 썸네일 카드 */
.sidebar-course-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e8eb;
  overflow: visible;
  margin-bottom: 16px;
  padding: 28px 26px;
}

.sidebar-course-thumbnail {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 비율 */
  background: #f8fafc;
  overflow: hidden;
}

.sidebar-course-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-course-thumbnail-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8fafc 0%, #edf0f2 100%);
}

.sidebar-course-thumbnail-placeholder svg {
  width: 60px;
  height: 60px;
  color: #cbd5e1;
}

.sidebar-course-title {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #1a1f29 !important;
  margin: 0 0 20px 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #f1f3f5;
  line-height: 1.35 !important;
  letter-spacing: -0.02em;
}

.sidebar-course-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-meta-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sidebar-meta-item svg {
  width: 18px;
  height: 18px;
  color: #828c9c;
  flex-shrink: 0;
}

.sidebar-meta-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #697586 !important;
  line-height: 1.3 !important;
  flex: 1;
}

.sidebar-meta-value {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #2d3648 !important;
  line-height: 1.3 !important;
  white-space: nowrap;
}

/* 평점 남기기 버튼 */
.sidebar-rating-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: #ffffff;
  border: 1px solid #edf0f2;
  border-top: 1px solid #edf0f2;
  color: #4f5969;
  font-size: 15px;
  font-weight: 600;
  cursor: not-allowed;
  transition: all 0.2s ease;
  font-family: inherit;
}

.sidebar-rating-btn:not(:disabled) {
  cursor: pointer;
}

.sidebar-rating-btn:not(:disabled):hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #1a1f29;
}

.sidebar-rating-btn svg {
  width: 18px;
  height: 18px;
}

/* 진행 상황 카드 */
.sidebar-progress-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e8eb;
  padding: 28px 26px 32px 26px;
}

.sidebar-progress-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #1a1f29 !important;
  letter-spacing: -0.02em;
  margin: 0 0 20px 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #f1f3f5;
  line-height: 1.4 !important;
}

/* 원형 진행률 차트 */
.sidebar-progress-circle-container {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto 24px auto;
}

.sidebar-progress-circle {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.sidebar-progress-bg {
  fill: none;
  stroke: #edf0f2;
  stroke-width: 10;
}

.sidebar-progress-bar {
  fill: none;
  stroke: #4f46e5;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 439.82;
  transition: stroke-dashoffset 0.5s ease;
}

.sidebar-progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.sidebar-progress-number {
  display: block;
  font-size: 36px !important;
  font-weight: 700 !important;
  color: #4f46e5 !important;
  line-height: 1 !important;
  margin-bottom: 4px;
}

.sidebar-progress-total {
  display: block;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #828c9c !important;
  line-height: 1 !important;
}

/* 진행 통계 */
.sidebar-progress-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid #e5e8eb;
}

.sidebar-stat-item {
  flex: 1;
  text-align: center;
}

.sidebar-stat-label {
  display: block;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #828c9c !important;
  margin-bottom: 8px;
  line-height: 1.2 !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sidebar-stat-value {
  display: block;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #2d3648 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em;
}

.sidebar-stat-divider {
  width: 1px;
  height: 44px;
  background: #e5e8eb;
  margin: 0 20px;
}

/* 반응형 */
@media (max-width: 768px) {
  .course-header-simple {
    padding: 16px;
    flex-wrap: wrap;
  }

  .course-main-title {
    font-size: 18px !important;
    flex: 1 1 100%;
  }

  .accordion-header {
    padding: 16px;
  }

  .accordion-section-title {
    font-size: 15px !important;
  }

  .accordion-lesson-trigger {
    padding: 12px 16px;
  }

  .accordion-lesson-title {
    font-size: 14px !important;
  }

  .sidebar-course-title {
    font-size: 16px !important;
  }

  .sidebar-progress-card {
    padding: 24px 20px 28px 20px;
  }

  .sidebar-course-card {
    padding: 24px 20px;
  }

  .sidebar-progress-circle-container {
    width: 140px;
    height: 140px;
  }

  .sidebar-progress-number {
    font-size: 32px !important;
  }
}