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

/* 페이지 기본 */
.voucher-page { padding: 0; }
.voucher-page .box-title-page { margin-bottom: 0; }


/* ========== 보유 수강권 섹션 ========== */
.voucher-info-section {
	background: #ffffff;
	padding: 20px 15px;
	margin: 15px;
	margin-bottom: 20px;
	border-radius: 12px;
	border: 1px solid #edf0f2;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.voucher-info-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	min-height: 32px;
}
.voucher-info-header h3 {
	color: #1a1f29;
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	letter-spacing: -0.3px;
	line-height: 1.2;
}

/* 세그먼트 컨트롤 */
.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-card-list {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 12px;
	padding-bottom: 10px;
	-webkit-overflow-scrolling: touch;
	min-height: 180px;
}
.voucher-card-list::-webkit-scrollbar { display: none; }

.voucher-card {
	flex: 0 0 auto;
	width: 160px;
	background: #fff;
	border-radius: 12px;
	padding: 15px;
	position: relative;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.voucher-card.voucher-GENERAL {
	border-top: 4px solid #4F46E5;
}
.voucher-card.voucher-CERTIFICATE {
	border-top: 4px solid #0891B2;
}
/* 패키지 수강권 - 황금색 테마 */
.voucher-card.voucher-PACKAGE {
	background: linear-gradient(135deg, #FFFEF0 0%, #FFF9D6 50%, #FFF3B8 100%);
	border-top: 4px solid #FBBF24;
	box-shadow: 0 4px 12px rgba(255, 215, 0, 0.25);
}
.voucher-card.voucher-PACKAGE .voucher-card-title {
	color: #92400e;
}
.voucher-card.voucher-PACKAGE .voucher-card-desc {
	color: #a16207;
}
.voucher-card.voucher-used {
	opacity: 0.6;
	border-top: 4px solid #9ca3af;
}
.voucher-card-title {
	font-size: 14px;
	font-weight: 700;
	color: #1e293b;
	margin: 0 0 4px 0;
}
.voucher-card-desc {
	font-size: 11px;
	color: #475569; /* 색상 대비 개선 */
	margin: 0 0 10px 0;
	line-height: 1.4;
}
.voucher-card-info {
	font-size: 10px;
	color: #64748b; /* 색상 대비 개선 */
}
.voucher-card-info span {
	display: block;
	margin-bottom: 3px;
}
.voucher-package-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	background: linear-gradient(135deg, #f59e0b, #d97706);
	color: #fff;
	font-size: 9px;
	padding: 2px 6px;
	border-radius: 8px;
	font-weight: 600;
}
.voucher-used-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	background: #9ca3af;
	color: #fff;
	font-size: 9px;
	padding: 2px 6px;
	border-radius: 8px;
}
.voucher-selected-badge {
	position: absolute;
	top: -8px;
	left: 50%;
	transform: translateX(-50%);
	background: #22c55e;
	color: #fff;
	font-size: 10px;
	padding: 3px 10px;
	border-radius: 10px;
	font-weight: 600;
	box-shadow: 0 2px 6px rgba(34,197,94,0.4);
}
/* 수강권 사용 예정 표시 */
.voucher-card.voucher-scheduled {
	position: relative;
	opacity: 0.6;
	border-top: 0;
}
.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-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-card.voucher-scheduled > * {
	position: relative;
	z-index: 1;
}
.voucher-card.selected {
	box-shadow: 0 4px 12px rgba(34,197,94,0.3);
	transform: scale(1.02);
}
.voucher-empty-msg {
	color: #94a3b8;
	text-align: center;
	padding: 40px 20px;
	font-size: 14px;
	font-weight: 500;
	background: #f8fafc;
	border-radius: 10px;
	border: 1px dashed #cbd5e1;
}

/* ========== 탭 영역 ========== */
.subject-tabs {
	background: #fff;
	border-bottom: 1px solid #e2e8f0;
}
.subject-tabs-nav {
	display: flex;
	padding: 0;
	margin: 0;
	list-style: none;
}
.subject-tabs-nav li {
	flex: 1;
}
.subject-tabs-nav li a {
	display: block;
	padding: 14px 10px;
	min-height: 44px; /* 터치 타겟 크기 확보 */
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	color: #475569; /* 색상 대비 개선 */
	text-decoration: none;
	border-bottom: 3px solid transparent;
	transition: all 0.2s;
}
/* 포커스 표시 */
.subject-tabs-nav li[data-tab="certificate"] a:focus {
	outline: 2px solid #0891b2;
	outline-offset: -2px;
}
.subject-tabs-nav li[data-tab="general"] a:focus {
	outline: 2px solid #4f46e5;
	outline-offset: -2px;
}

/* 자격 취득 탭 - Cyan 테마 */
.subject-tabs-nav li[data-tab="certificate"]:hover a {
	color: #0891b2; /* Cyan-600 */
	background: #ecfeff; /* Cyan-50 */
}
.subject-tabs-nav li[data-tab="certificate"].active a {
	color: #0891b2; /* Cyan-600 */
	border-bottom-color: #0891b2;
	font-weight: 600;
}

/* 실무 향상 탭 - Indigo 테마 */
.subject-tabs-nav li[data-tab="general"]:hover a {
	color: #4f46e5; /* Indigo-600 */
	background: #eef2ff; /* Indigo-50 */
}
.subject-tabs-nav li[data-tab="general"].active a {
	color: #4f46e5; /* Indigo-600 */
	border-bottom-color: #4f46e5;
	font-weight: 600;
}

/* ========== 과목 리스트 ========== */
.subject-list-section {
	padding: 15px;
	padding-bottom: 20px;
	display: flex;
	flex-direction: column;
	min-height: 650px;
}
.subject-panel {
	display: none;
	flex: 1;
}
.subject-panel.active {
	display: flex;
	flex-direction: column;
}
.subject-item {
	background: #fff;
	border-radius: 10px;
	margin-bottom: 10px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
	overflow: hidden;
	transition: all 0.2s ease;
	border: 2px solid transparent;
}
.subject-item.selected {
	background: #eff6ff;
	border-color: #4085FF;
}
.subject-item-header {
	display: flex;
	align-items: center;
	padding: 14px 12px;
	gap: 12px;
}
.subject-checkbox-wrap {
	flex: 0 0 auto;
}
.subject-checkbox-wrap input[type="checkbox"] {
	width: 22px; /* 터치 타겟 크기 증가 */
	height: 22px;
	accent-color: #4085FF; /* Primary Color */
	cursor: pointer;
}
/* 체크박스 포커스 표시 */
.subject-checkbox-wrap input[type="checkbox"]:focus {
	outline: 2px solid #4085FF; /* Primary Color */
	outline-offset: 2px;
}
.subject-info {
	flex: 1;
	min-width: 0;
}
.subject-name {
	font-size: 14px;
	font-weight: 600;
	color: #1e293b;
	margin: 0 0 4px 0;
	word-break: keep-all;
	cursor: pointer;
	display: block;
}
.subject-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}
.subject-teacher {
	font-size: 12px;
	color: #64748b;
}
.subject-badge {
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 6px;
	font-weight: 500;
}
.subject-badge.credit {
	background: #e0f2fe;
	color: #0369a1;
}
.subject-badge.package {
	background: #FFFBEB;
	color: #D97706;
	border: 1px solid #FDE68A;
}
.subject-detail-btn {
	flex: 0 0 auto;
	padding: 8px 12px;
	min-height: 36px;
	font-size: 12px;
	background: #FFFFFF;
	border: none;
	border-radius: 6px;
	color: #475569;
	font-weight: 500;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
}
.subject-detail-btn:hover {
	background: #FFFFFF;
}
.subject-detail-btn.active {
	background: #FFFFFF;
	color: #1e293b;
}
.subject-detail-btn.active .detail-arrow {
	transform: rotate(180deg);
}
.detail-arrow {
	font-size: 10px;
	transition: transform 0.2s ease;
	display: inline-block;
	line-height: 1;
}
/* 포커스 표시 */
.subject-detail-btn:focus {
	outline: 2px solid #4085FF; /* Primary Color */
	outline-offset: 2px;
}

/* ========== 상세 정보 ========== */
.subject-detail-content {
	display: none; /* jQuery slideDown/slideUp이 제어 */
	background: #f8fafc;
	padding: 15px;
	border-top: 1px solid #e2e8f0;
	overflow: hidden; /* 애니메이션 시 깔끔한 표시 */
}
.subject-detail-content.show {
	/* jQuery slideDown으로 표시됨 */
}

/* 상세 섹션 스타일 */
.detail-section {
	margin-bottom: 20px;
	padding: 16px;
	background: #ffffff;
	border-radius: 8px;
	border: 1px solid #edf0f2;
}
.detail-section:last-child {
	margin-bottom: 0;
}
.detail-section-title {
	font-size: 16px;
	font-weight: 600;
	color: #1a1f29;
	margin: 0 0 16px 0;
	padding-bottom: 0;
	border-bottom: none;
}

/* 기본 정보 리스트 */
.detail-info-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* 강의개요 */
.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;
}

/* 기본 정보 행 */
.detail-row {
	display: flex;
	padding: 12px 0;
	border-bottom: 1px solid #edf0f2;
	transition: all 0.2s ease;
}
.detail-row:last-child {
	border-bottom: none;
}
.detail-row:hover {
	background: #f9fafb;
	padding-left: 4px;
	padding-right: 4px;
	margin-left: -4px;
	margin-right: -4px;
	border-radius: 4px;
}
.detail-label {
	flex: 0 0 100px;
	min-width: 100px;
	font-size: 14px;
	color: #4f5969;
	font-weight: 600;
	padding-right: 16px;
}
.detail-value {
	flex: 1;
	font-size: 14px;
	color: #1a1f29;
	font-weight: 400;
}

/* 학점 인정 배지 */
.credit-recognition {
	display: inline-block;
	color: #db3845;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 12px;
	background: #ffeded;
	border-radius: 6px;
	border: none;
}
/* 차시 정보 리스트 */
.lesson-list {
	margin-top: 0;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid #edf0f2;
	border-radius: 6px;
	overflow: hidden;
}
.lesson-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: #ffffff;
	border-bottom: 1px solid #edf0f2;
	transition: all 0.2s ease;
}
.lesson-item:last-child {
	border-bottom: none;
}
.lesson-item:hover {
	background: #f9fafb;
}
.lesson-num {
	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;
}
.lesson-title {
	font-size: 14px;
	color: #1a1f29;
	font-weight: 600;
	line-height: 1.4;
}
.lesson-title {
	font-size: 13px;
	color: #1e293b;
	font-weight: 500;
	line-height: 1.4;
	flex: 1;
}

/* ========== 장바구니 ========== */
.basket-section {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #ffffff;
	border-top: 1px solid #edf0f2;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	padding: 20px 15px;
	padding-bottom: calc(20px + env(safe-area-inset-bottom)); /* 아이폰 노치 대응 */
	z-index: 100;
	transition: all 0.2s ease;
}
.basket-section.guide-above {
	position: static;
}
.basket-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid #f1f5f9;
	cursor: pointer;
	transition: background-color 0.2s ease;
	border-radius: 8px;
	padding: 12px;
	margin-left: -12px;
	margin-right: -12px;
	margin-top: -12px;
	background: #ffffff;
}
.basket-header:hover {
	background-color: #ffffff;
}
.basket-title {
	font-size: 16px;
	font-weight: 700;
	color: #1a1f29;
	margin: 0;
	letter-spacing: -0.2px;
}
.basket-header-right {
	display: flex;
	align-items: center;
	gap: 12px;
}
.basket-count {
	font-size: 13px;
	color: #4f5969;
	font-weight: 500;
}
.basket-count strong {
	color: #4085ff; /* Primary Color */
	font-size: 18px;
	font-weight: 700;
	margin-left: 4px;
}
.basket-toggle-btn {
	width: 32px;
	height: 32px;
	background: #ffffff;
	color: #64748b;
	border: 0;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	padding: 0;
	flex-shrink: 0;
}
.basket-toggle-btn:hover {
	background: #f1f5f9;
	border-color: #cbd5e1;
}
.basket-toggle-icon {
	font-size: 12px;
	transition: transform 0.2s ease;
	display: inline-block;
}

/* 장바구니 아이템 리스트 */
.basket-item-list {
	margin-bottom: 16px;
	max-height: 200px;
	overflow-y: auto;
	padding-right: 4px;
}
.basket-item-list::-webkit-scrollbar {
	width: 4px;
}
.basket-item-list::-webkit-scrollbar-track {
	background: #f8fafc;
	border-radius: 2px;
}
.basket-item-list::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 2px;
}
.basket-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 14px 12px;
	background: #f8fafc;
	border-radius: 10px;
	margin-bottom: 8px;
	border: 1px solid #edf0f2;
	transition: all 0.2s ease;
}
.basket-item:last-child {
	margin-bottom: 0;
}
.basket-item:hover {
	background: #ffffff;
	border-color: #4085FF; /* Primary Color */
	box-shadow: 0 2px 8px rgba(64, 133, 255, 0.12);
	transform: translateX(2px);
}
.basket-item-info {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}
.basket-item-name {
	flex: 1;
	min-width: 0;
	font-size: 14px;
	color: #1a1f29;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.basket-item-type {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 8px;
	letter-spacing: -0.1px;
	white-space: nowrap;
}
.basket-item-type.certificate {
	background: #ecfeff;
	color: #0891B2;
	border: 1px solid #cffafe;
}
.basket-item-type.general {
	background: #eef2ff;
	color: #4F46E5; /* Indigo-600, 실무 향상 과정 */
	border: 1px solid #e0e7ff;
}
.basket-remove-btn {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	background: #ffffff00;
	color: #64748b;
	border: 0;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
}
.basket-remove-btn:hover {
	background: #fef2f2;
	color: #dc2626;
	border-color: #fecaca;
	transform: scale(1.08);
}
.basket-remove-btn:active {
	transform: scale(0.95);
}
/* 포커스 표시 */
.basket-remove-btn:focus {
	outline: 2px solid #4085FF; /* Primary Color */
	outline-offset: 2px;
}
.basket-submit-btn {
	width: 100%;
	padding: 16px;
	min-height: 52px; /* 터치 타겟 크기 확보 */
	background: #4085ff; /* Primary Color */
	color: #ffffff;
	border: none;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.3px;
	cursor: pointer;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 12px rgba(64, 133, 255, 0.25);
}
.basket-submit-btn:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(64, 133, 255, 0.35);
	background: #5b9aff;
}
.basket-submit-btn:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(64, 133, 255, 0.3);
}
.basket-submit-btn:disabled {
	background: #e2e8f0;
	color: #94a3b8;
	transform: none;
	box-shadow: none;
	cursor: not-allowed;
}
/* 포커스 표시 */
.basket-submit-btn:focus {
	outline: 3px solid rgba(64, 133, 255, 0.3);
	outline-offset: 2px;
}
.basket-empty-msg {
	text-align: center;
	padding: 40px 20px;
	color: #94a3b8;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
}

/* ========== 빈 상태 ========== */
.empty-view {
	text-align: center;
	padding: 40px 20px;
	color: #64748b;
}

/* ========== 하단 여백 ========== */
.bottom-spacer {
	display: none;
}

/* ========== 수강 과목 페이지 ========== */
.voucher-courses-page { padding: 0; }

/* 빈 상태 */
.courses-empty {
	text-align: center;
	padding: 40px 20px;
	color: #64748b;
}
.courses-empty .btn {
	margin-top: 15px;
	min-height: 44px; /* 터치 타겟 크기 확보 */
	background: linear-gradient(135deg, #4085FF, #5b9aff); /* Primary Color */
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 12px 24px;
	text-decoration: none;
	display: inline-block;
	transition: all 0.2s ease;
}
.courses-empty .btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(64, 133, 255, 0.3); /* Primary Color */
	color: #fff;
}
/* 포커스 표시 */
.courses-empty .btn:focus {
	outline: 2px solid #93c5fd;
	outline-offset: 2px;
}

/* 과목 리스트 섹션 */
.courses-list-section {
	padding: 15px;
	background: #f8fafc;
	min-height: 500px;
}
.courses-panel {
	display: none;
}
.courses-panel.active {
	display: block;
}

/* 과목 아이템 */
.course-item {
	background: #fff;
	padding: 15px;
	border-radius: 10px;
	margin-bottom: 10px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
	transition: all 0.2s ease;
	border: 2px solid transparent;
}
.course-item:last-child {
	margin-bottom: 0;
}
.course-item-name {
	font-size: 14px;
	font-weight: 600;
	color: #1e293b;
	margin: 0 0 8px 0;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.package-badge {
	display: inline-block;
	padding: 4px 10px;
	background: #FFFBEB; /* Amber-50, 피그마 디자인 시스템 */
	color: #FBBF24; /* Amber-400, 피그마 디자인 시스템 */
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	margin-left: 8px;
}
.course-item-period {
	font-size: 12px;
	color: #64748b;
	margin-bottom: 10px;
}
.course-item-action {
	text-align: right;
}
.course-item-btn {
	display: inline-block;
	padding: 8px 16px;
	min-height: 36px; /* 터치 타겟 크기 확보 */
	background: #4085FF;
	color: #fff;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s ease;
}
.course-item-btn:hover {
	background: #2563eb;
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(64, 133, 255, 0.3);
}
/* 포커스 표시 */
.course-item-btn:focus {
	outline: 2px solid #16a34a;
	outline-offset: 2px;
}
.course-empty-msg {
	padding: 40px 20px;
	text-align: center;
	color: #64748b;
	font-size: 14px;
}

/* ========== 과목 상세 페이지 ========== */
.course-layout-container {
	width: 100%;
	margin-bottom: 20px;
}

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

/* 간단한 헤더 */
.course-header-simple {
	background: #FFFFFF;
	border-radius: 12px;
	padding: 16px;
	margin: 15px;
	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;
	min-height: 36px; /* 터치 타겟 크기 */
	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: 18px !important;
	font-weight: 700 !important;
	color: #1A1F29 !important;
	margin: 0;
	line-height: 1.4 !important;
	width: 100%;
	word-break: keep-all;
}

.course-meta-info {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	width: 100%;
	margin-top: 8px;
}

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

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

/* ========== 챕터 탭 스타일 ========== */
.chapter-tabs-container {
	background: #FFFFFF;
	border-radius: 12px;
	border: 1px solid #EDF0F2;
	overflow: hidden;
	margin: 0 15px 20px;
}

/* 탭 헤더 래퍼 */
.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;
	-webkit-overflow-scrolling: touch;
}

.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%;
	min-height: 50px;
	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: 140px;
	max-width: 140px;
	width: 140px;
	flex: 0 0 140px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 12px 16px;
	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;
}

.chapter-tab-label {
	font-size: 10px !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;
}

.chapter-tab-title {
	font-size: 13px !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;
}

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

.chapter-tab.active .chapter-tab-progress {
	color: #4085FF !important;
}

/* 탭 컨텐츠 */
.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 16px;
	background: #FFFFFF;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: inherit;
	text-align: left;
	min-height: 60px; /* 터치 타겟 크기 */
}

.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: 12px;
	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;
	border-color: #4085FF;
}

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

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

.chapter-lesson-title {
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #1A1F29 !important;
	margin: 0 0 4px 0;
	line-height: 1.4 !important;
	word-break: keep-all;
}

.chapter-lesson-meta {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px !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;
}

/* 기존 차시 카드 스타일 (하위 호환성 유지) */
.lesson-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 12px;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.lesson-card.started {
	border-color: #0891B2;
	background: #ecfeff;
}
.lesson-number {
	width: 32px;
	height: 32px;
	background: #f1f5f9;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
}
.lesson-card.started .lesson-number {
	background: #0891B2;
	color: #fff;
}
.lesson-info {
	flex: 1;
	min-width: 0;
}
.lesson-info .lesson-title {
	font-size: 13px;
	font-weight: 500;
	color: #1e293b;
	margin: 0 0 4px 0;
	word-break: keep-all;
}
.lesson-status {
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 6px;
}
.lesson-status.new {
	background: #e0f2fe;
	color: #0369a1;
}
.lesson-status.started {
	background: #d1fae5;
	color: #059669;
}
.lesson-play-btn {
	flex: 0 0 auto;
	padding: 8px 14px;
	min-height: 36px; /* 터치 타겟 크기 확보 */
	background: linear-gradient(135deg, #4085FF, #5b9aff); /* Primary Color */
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	transition: all 0.2s ease;
}
.lesson-play-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(64, 133, 255, 0.3); /* Primary Color */
}
/* 포커스 표시 */
.lesson-play-btn:focus {
	outline: 2px solid #93c5fd;
	outline-offset: 2px;
}
.lesson-play-btn svg {
	width: 14px;
	height: 14px;
}

/* 안내사항 */
.voucher-guide {
	margin: 15px;
	background: #fff;
	border-radius: 10px;
	padding: 15px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.voucher-guide h4 {
	font-size: 15px;
	font-weight: 600;
	color: #1e293b;
	margin: 0 0 15px 0;
}
.guide-section {
	margin-bottom: 12px;
}
.guide-section:last-child {
	margin-bottom: 0;
}
.guide-title {
	font-size: 13px;
	font-weight: 600;
	color: #4F46E5;
	margin: 0 0 6px 0;
	padding-left: 8px;
	border-left: 3px solid #4F46E5;
}
.guide-list {
	padding: 0;
	margin: 0;
	list-style: none;
}
.guide-list li {
	font-size: 12px;
	color: #475569;
	line-height: 1.6;
	padding-left: 12px;
	position: relative;
}
.guide-list li:before {
	content: "•";
	position: absolute;
	left: 0;
	color: #94a3b8;
}
.guide-sub {
	display: block;
	font-size: 11px;
	color: #64748b;
	padding-left: 8px;
}

/* 신청 내역 */
.history-section {
	margin: 15px;
	background: #ffffff;
	border: 1px solid #edf0f2;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.history-header {
	width: 100%;
	padding: 16px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #ffffff;
	border: none;
	border-bottom: 1px solid #edf0f2;
	cursor: pointer;
	text-align: left;
	transition: background 0.2s ease;
}
.history-header:hover {
	background: #fafcfc;
}
.history-header.open {
	border-bottom: none;
}
/* 포커스 표시 */
.history-header:focus {
	outline: 2px solid #4085ff;
	outline-offset: -2px;
}
.history-header h4 {
	font-size: 16px;
	font-weight: 600;
	color: #1a1f29;
	margin: 0;
	letter-spacing: -0.2px;
}
.history-arrow {
	color: #828c9c;
	font-size: 12px;
	transition: transform 0.3s ease;
	display: inline-block;
}
.history-header.open .history-arrow {
	transform: rotate(180deg);
}
.history-content {
	display: none;
	padding: 12px 15px;
	background: #fafcfc;
}
.history-content[aria-hidden="false"] {
	display: block;
}

/* 컴팩트한 신청 내역 아이템 */
.history-item-compact {
	padding: 10px 12px;
	background: #ffffff;
	border: 1px solid #e8ecef;
	border-radius: 8px;
	margin-bottom: 8px;
	transition: all 0.2s ease;
}
.history-item-compact:last-child {
	margin-bottom: 0;
}
.history-item-compact:hover {
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	border-color: #d5dce3;
}
/* 취소된 항목 스타일 */
.history-item-compact.cancelled {
	opacity: 0.55;
	background: #f8f9fa;
	border-color: #e5e7eb;
}
.history-item-compact.cancelled:hover {
	opacity: 0.65;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	border-color: #e5e7eb;
}
.history-item-compact.cancelled .history-compact-subject {
	color: #64748b;
	text-decoration: line-through;
}
.history-compact-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 6px;
}
.history-compact-subject {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	color: #1a1f29;
	line-height: 1.4;
	letter-spacing: -0.2px;
	word-break: keep-all;
}
.history-compact-badges {
	flex: 0 0 auto;
	display: flex;
	gap: 4px;
	align-items: center;
}
.history-type-compact {
	padding: 3px 8px;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: -0.1px;
	white-space: nowrap;
}
.history-type-compact.general {
	background: #EDF5FF;
	color: #3082F5;
}
.history-type-compact.certificate {
	background: #E8FAEB;
	color: #0891B2;
}
.history-status-compact {
	padding: 3px 8px;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: -0.1px;
	white-space: nowrap;
}
.history-status-compact.active {
	background: #F3F0FF;
	color: #8B5CF6;
}
.history-status-compact.cancelled {
	background: #F2F5F7;
	color: #828C9C;
}
.history-status-compact.waiting {
	background: #FFF5E0;
	color: #D97706;
}
.history-status-compact.ended {
	background: #F2F5F7;
	color: #828C9C;
}
.history-compact-date {
	font-size: 11px;
	color: #64748b;
	padding-left: 2px;
}

.history-empty {
	text-align: center;
	padding: 40px 20px;
	color: #94a3b8;
	font-size: 14px;
	font-weight: 500;
	background: #f8fafc;
	border-radius: 10px;
	border: 1px dashed #cbd5e1;
}

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

.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: 14px;
	font-weight: 600;
	padding: 2px 4px;
	margin: 0 0 16px 0;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	line-height: 2.2;
}

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

.voucher-guide-section .list-1 > li {
	margin: 0 0 10px 0 !important;
	padding-left: 20px !important;
	line-height: 1.7 !important;
	color: #212529 !important;
	font-size: 13px !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: 13px !important;
	line-height: 1.7 !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-table-wrapper {
	margin-top: 12px;
	margin-bottom: 10px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.voucher-guide-table-desc {
	display: block;
	font-size: 12px;
	color: #6c757d;
	margin-bottom: 10px;
	font-weight: 500;
}

.voucher-guide-table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	background: transparent;
	border: none;
	font-size: 12px;
}

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

.voucher-guide-table th {
	padding: 8px 6px !important;
	text-align: center !important;
	vertical-align: middle !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	color: #475569 !important;
	border: 0 !important;
	border-bottom: 1px solid #e2e8f0 !important;
	background: transparent !important;
	white-space: nowrap;
}

.voucher-guide-table td {
	padding: 8px 6px !important;
	text-align: center !important;
	font-size: 11px !important;
	color: #334155 !important;
	border: 0 !important;
	border-bottom: 1px solid #f1f5f9 !important;
	background: transparent !important;
	vertical-align: middle !important;
}

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

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