/* 나의강의실 — 모던 UI (binglish.com) */
/* PC 컨테이너 1200px — 학습강좌·주문결제·강사매출·서포터즈 */

#sub-container > .section.sub-body.myclassroom-body {
	width: 100%;
	max-width: 1200px;
}

@media (min-width: 1101px) {
	#sub-container > .section.sub-body.myclassroom-body {
		width: 1200px;
		max-width: 1200px;
	}
}

.myclassroom-body {
	--mc-primary: #2c5698;
	--mc-primary-soft: #eef3fa;
	--mc-primary-dark: #1e3d6b;
	--mc-accent: #af0d23;
	--mc-surface: #ffffff;
	--mc-bg: #f0f3f8;
	--mc-border: #e2e8f0;
	--mc-text: #1a2233;
	--mc-muted: #64748b;
	--mc-radius: 14px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 36px 16px 64px;
	box-sizing: border-box;
}

/* 페이지 헤더 */
.myclassroom-hero {
	margin-bottom: 24px;
}
.myclassroom-hero__title {
	margin: 0 0 6px;
	font-size: 26px;
	font-weight: 700;
	color: var(--mc-text);
	letter-spacing: -0.03em;
	line-height: 1.3;
}
.myclassroom-hero__desc {
	margin: 0;
	font-size: 15px;
	color: var(--mc-muted);
	line-height: 1.5;
}

/* 1차 메뉴 (학습 강좌 / 주문결제 내역) */
.myclassroom-body .n5 {
	margin-bottom: 16px;
	text-align: left;
}
.myclassroom-body .n5 .submenu_list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 5px;
	background: var(--mc-bg);
	border: 0;
	border-radius: 12px;
	box-sizing: border-box;
}
.myclassroom-body .n5 .submenu_list a {
	float: none;
	flex: 1 1 160px;
	width: auto;
	height: auto;
	padding: 13px 20px;
	border: 0;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 500;
	color: var(--mc-muted);
	background: transparent;
	line-height: 1.3;
	transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.myclassroom-body .n5 .submenu_list a:hover {
	color: var(--mc-primary);
	font-weight: 600;
}
.myclassroom-body .n5 .submenu_list a.focus {
	background: var(--mc-surface);
	color: var(--mc-primary);
	font-weight: 600;
	box-shadow: 0 2px 10px rgba(44, 86, 152, 0.12);
}

/* 2·3차 세그먼트 탭 */
.myclassroom-body .myClassTab,
.myclassroom-body .myorder-tab {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	width: 100%;
	margin: 0 0 20px;
	padding: 4px;
	background: var(--mc-bg);
	border: 0;
	border-radius: 10px;
	box-sizing: border-box;
	clear: both;
}
.myclassroom-body .myClassTab a,
.myclassroom-body .myorder-tab li,
.myclassroom-body .ord-view li {
	float: none;
	flex: 1 1 0;
	min-width: 0;
	width: auto !important;
	margin: 0 !important;
	padding: 11px 14px;
	border: 0;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 500;
	color: var(--mc-muted);
	background: transparent;
	text-align: center;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.myclassroom-body .myClassTab a:hover,
.myclassroom-body .myorder-tab li:hover {
	color: var(--mc-primary);
	background: rgba(255, 255, 255, 0.6);
}
.myclassroom-body .myClassTab a.active,
.myclassroom-body .myorder-tab li.active,
.myclassroom-body .ord-view li.active {
	background: var(--mc-primary);
	color: #fff;
	box-shadow: 0 2px 8px rgba(44, 86, 152, 0.28);
}
.myclassroom-body .myorder-tab li a,
.myclassroom-body .ord-view li a {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

/* 콘텐츠 패널 */
.myclassroom-panel {
	background: var(--mc-surface);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius);
	padding: 24px;
	overflow: hidden;
}
.myclassroom-panel--flush {
	padding: 0;
}
.myclassroom-panel--flush .table_board_for.myOrder {
	margin-bottom: 0;
}

/* ── 학습 강좌 카드 ── */
.myclassroom-body .my-class {
	margin: 0;
}
.myclassroom-body .lecturestudy {
	list-style: none;
	padding: 0;
	margin: 0;
}
.myclassroom-body .lecturestudy > li {
	padding: 0;
	margin-bottom: 16px;
	border: 1px solid var(--mc-border);
	border-radius: 12px;
	background: var(--mc-surface);
	overflow: hidden;
	transition: border-color 0.22s ease;
}
.myclassroom-body .lecturestudy > li:last-child {
	margin-bottom: 0;
}
.myclassroom-body .lecturestudy > li:hover {
	border-color: #b8c9e0;
}
.myclassroom-body .lecturestudy > li.finishstudy {
	background: #f8f9fb;
	opacity: 0.92;
}
.myclassroom-body .mylecBox {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	padding: 20px;
	align-items: flex-start;
}
.myclassroom-body .lectureImg {
	width: 148px;
	flex-shrink: 0;
	display: block;
}
.myclassroom-body .lectureImg img {
	width: 100%;
	border-radius: 10px;
	aspect-ratio: 4/3;
	object-fit: cover;
}
/* 학습 강좌 썸네일 텍스트 오버레이 - 목록/상세와 동일하되 가장 작은 썸네일이라 컨테이너 너비(cqw) 기준으로 비례 축소 */
.myclassroom-body .lectureImg .course-thumb-html-host {
	display: block;
	width: 100%;
	border-radius: 10px;
}
.myclassroom-body .lectureImg .course-thumb-html-host > img {
	border-radius: 10px;
}
.myclassroom-body .lectureImg .course-thumb-html-line1 {
	font-size: clamp(13px, 13cqw, 30px);
}
.myclassroom-body .lectureImg .course-thumb-html-line2 {
	font-size: clamp(11px, 11cqw, 26px);
}
.myclassroom-body .lectureImg .course-thumb-html-badge {
	top: 5cqw;
	right: 5cqw;
	min-height: 0;
	padding: 2cqw 4cqw;
	border-radius: 4cqw;
	font-size: clamp(8px, 7cqw, 13px);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
}
.myclassroom-body .lectureTxt {
	flex: 1 1 240px;
	min-width: 0;
	padding: 0;
	display: block;
}
.myclassroom-body .lectureTxt h2 {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--mc-text);
}
.myclassroom-body .lectureTxt h2.course_list:hover {
	color: var(--mc-accent);
}
.myclassroom-body .lectureTxt .subSubject {
	font-size: 14px;
	color: var(--mc-muted);
	margin-bottom: 10px;
	line-height: 1.5;
}
.myclassroom-body .lectureTxt p,
.myclassroom-body .lectureTxt > div {
	font-size: 14px;
	line-height: 1.65;
	color: #475569;
}
.myclassroom-body span.list_tit {
	font-size: 13px;
	font-weight: 600;
	color: var(--mc-muted);
	margin-right: 4px;
}
.myclassroom-body span.list_tit::before {
	background-color: var(--mc-primary);
	width: 3px;
	height: 3px;
	margin-right: 6px;
}
.myclassroom-body p.term {
	color: var(--mc-primary);
	font-weight: 600;
}
.myclassroom-body button.round-btn {
	font-size: 11px;
	height: 22px;
	border-radius: 4px;
	font-weight: 600;
}
.myclassroom-body button.listOpen {
	margin-top: 10px;
	padding: 10px;
	border: 0;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	background: var(--mc-primary);
	transition: background 0.2s ease;
}
.myclassroom-body button.listOpen:hover {
	background: var(--mc-primary-dark);
}
.myclassroom-body .WrapBtn {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}
.myclassroom-body .WrapBtn button {
	width: auto;
	max-width: none;
	flex: 0 1 auto;
	padding: 0 14px;
	height: 36px;
	border-radius: 8px;
	font-size: 13px;
	border: 1px solid var(--mc-border);
}
.myclassroom-body .WrapBtn button:hover {
	background: var(--mc-primary);
	border-color: var(--mc-primary);
}
.myclassroom-body .btn-area.pause {
	width: auto;
	flex: 0 0 150px;
	padding: 20px 20px 20px 0;
	display: block;
}
.myclassroom-body .my-class h1 {
	border-top: 1px solid var(--mc-border);
	margin: 0;
	padding: 14px 20px 14px 48px;
	background-position: 20px 16px;
	font-size: 14px;
}
.myclassroom-body .my-class h1.course_list:hover {
	color: var(--mc-accent);
}

/* 강의목록 탭 */
.myclassroom-body .mystudytap {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 16px 0 12px;
	padding: 4px;
	background: var(--mc-bg);
	border-radius: 8px;
	border: 0;
}
.myclassroom-body .mystudytap li,
.myclassroom-body .mystudytap a li {
	float: none;
	width: auto;
	flex: 1 1 auto;
	padding: 8px 14px;
	border-radius: 6px;
	font-size: 14px;
	margin: 0;
}
.myclassroom-body .mystudytap li.active {
	background: var(--mc-primary);
	color: #fff;
}

/* ── 주문내역 · 기간연장 · 추가결제 테이블 공통 ── */
.myclassroom-body .myclassroom-panel .table_board_for {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
}
.myclassroom-body .myclassroom-panel .table_board_for th {
	height: auto;
	padding: 14px 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--mc-muted);
	background: #f8fafc;
	border-top: 0;
	border-bottom: 1px solid var(--mc-border);
}
.myclassroom-body .myclassroom-panel .table_board_for td {
	padding: 14px 12px;
	font-size: 14px;
	color: var(--mc-text);
	border-bottom: 1px solid var(--mc-border);
	vertical-align: middle;
	line-height: 1.5;
}
.myclassroom-body .myclassroom-panel .table_board_for tr:last-child td {
	border-bottom: 0;
}
.myclassroom-body .myclassroom-panel .table_board_for tbody tr:hover td {
	background: #fafbfd;
}

/* ── 주문내역 링크 스타일 ── */
.myclassroom-body table.myOrder .order-title {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--mc-text);
	line-height: 1.4;
}
.myclassroom-body table.myOrder .order-buy-msg {
	display: block;
	margin-top: 5px;
	font-size: 13px;
	font-weight: 500;
	color: var(--mc-primary);
	line-height: 1.4;
}
.myclassroom-body table.myOrder td.order-name a {
	text-decoration: none;
	display: block;
}
.myclassroom-body table.myOrder td.order-name a:hover .order-title {
	color: var(--mc-primary);
}

/* 빈 목록 · 페이지네이션 */
.myclassroom-body .empty {
	padding: 48px 20px;
	font-size: 15px;
	color: var(--mc-muted);
	text-align: center;
}
.myclassroom-body .myclassroom-panel--flush .table_board_for th:first-child {
	border-radius: 0;
}
.myclassroom-body .page {
	margin-top: 28px;
	padding-top: 8px;
}
.myclassroom-body .myclassroom-panel--flush .page {
	margin-top: 0;
	padding: 20px 16px 8px;
}
.myclassroom-body .cd-pagination li .current,
.myclassroom-body .cd-pagination li.on a {
	background: var(--mc-primary) !important;
	border-color: var(--mc-primary) !important;
	color: #fff !important;
	border-radius: 8px;
}

/* ── 서포터즈 Q&A 게시판 (상태 열 여백) ── */
.myclassroom-body .myclassroom-panel--flush .contable.boardQna {
	padding: 0 20px;
	box-sizing: border-box;
}
.myclassroom-body .myclassroom-panel--flush .contable.boardQna li:nth-child(6) {
	width: 100px;
}
.myclassroom-body .myclassroom-panel--flush .table-title .section-box .ul-1 li:nth-child(6),
.myclassroom-body .myclassroom-panel--flush .table-textlist .section-box .ul-1 > li:nth-child(6) {
	padding-right: 4px;
	text-align: center;
}
.myclassroom-body .myclassroom-panel--flush .repl-1,
.myclassroom-body .myclassroom-panel--flush .repl-2,
.myclassroom-body .myclassroom-panel--flush .repl-3,
.myclassroom-body .myclassroom-panel--flush .icon_qna_notice {
	display: inline-block;
	width: auto;
	min-width: 68px;
	height: auto;
	padding: 5px 10px;
	border: 0;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
	box-sizing: border-box;
}
.myclassroom-body .myclassroom-panel--flush .icon_qna_notice {
	background: #1a2233;
}
.myclassroom-body .myclassroom-panel--flush .repl-1 {
	background: #c2410c;
}
.myclassroom-body .myclassroom-panel--flush .repl-2 {
	background: #15803d;
}
.myclassroom-body .myclassroom-panel--flush .repl-3 {
	background: var(--mc-primary);
}

/* ── 강사매출통계 탭 (단과/패키지 등) ── */
.myclassroom-body .category-tap {
	margin-bottom: 4px;
}
.myclassroom-body .cate-tap.salesMain {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	width: 100%;
	margin: 0 0 20px;
	padding: 4px;
	background: var(--mc-bg);
	border: 0 !important;
	border-radius: 10px;
	box-sizing: border-box;
}
.myclassroom-body .cate-tap.salesMain li {
	float: none;
	flex: 1 1 0;
	min-width: 0;
	width: auto !important;
	height: auto;
	margin: 0 !important;
	padding: 0;
	border: 0 !important;
	background: transparent;
	text-align: center;
	line-height: 1.3;
}
.myclassroom-body .cate-tap.salesMain li + li {
	margin-left: 0 !important;
}
.myclassroom-body .cate-tap.salesMain li a {
	display: block;
	padding: 11px 10px;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 500;
	color: var(--mc-muted);
	transition: color 0.2s ease, background 0.2s ease;
}
.myclassroom-body .cate-tap.salesMain li:hover {
	background: rgba(255, 255, 255, 0.6);
}
.myclassroom-body .cate-tap.salesMain li:hover a {
	color: var(--mc-primary);
}
.myclassroom-body .cate-tap.salesMain li.active {
	background: var(--mc-primary);
}
.myclassroom-body .cate-tap.salesMain li.active a {
	color: #fff;
	font-weight: 600;
}
.myclassroom-body .btn_center.salesMain {
	margin-bottom: 16px;
	padding: 0 4px;
}

/* web/201 주문결제내역 — PC: 나의강의실 메뉴 / 모바일·태블릿: web/30 브레드크럼 카테고리 */
.myorder-mobile-cate {
	display: none;
}

@media (max-width: 1100px) {
	.myorder-mobile-cate {
		display: block;
	}
	.myorder-pc-cate {
		display: none !important;
	}
	.myclassroom-body--order-page {
		padding-top: 16px;
	}
	#sub-container > .sub-title.myorder-mobile-cate > .section {
		margin-bottom: 16px;
	}
}

/* 모바일 */
@media (max-width: 768px) {
	.myclassroom-body {
		padding: 20px 12px 48px;
	}
	.myclassroom-hero__title {
		font-size: 22px;
	}
	.myclassroom-panel {
		padding: 16px 12px;
		border-radius: 12px;
	}
	.myclassroom-panel--flush {
		padding: 0;
	}
	.myclassroom-body .n5 .submenu_list {
		flex-direction: column;
	}
	.myclassroom-body .n5 .submenu_list a {
		flex: 1 1 100%;
		text-align: center;
	}
	.myclassroom-body .myClassTab a,
	.myclassroom-body .myorder-tab li {
		flex: 1 1 100%;
		font-size: 13px;
		padding: 10px 12px;
	}
	.myclassroom-body .mylecBox {
		flex-direction: column;
		padding: 16px;
	}
	.myclassroom-body .lectureImg {
		width: 100%;
		max-width: 200px;
	}
	.myclassroom-body .btn-area.pause {
		flex: 1 1 100%;
		padding: 0 16px 16px;
	}
	.myclassroom-body .table_board_for.myOrder th,
	.myclassroom-body .table_board_for.myOrder td {
		padding: 12px 8px;
		font-size: 13px;
	}
	.myclassroom-body .myclassroom-panel--flush .contable.boardQna {
		padding: 0 12px;
	}
	.myclassroom-body .cate-tap.salesMain li {
		flex: 1 1 calc(50% - 4px);
	}
	.myclassroom-body .cate-tap.salesMain li a {
		padding: 10px 8px;
		font-size: 13px;
	}
}

@media (max-width: 480px) {
	.myclassroom-body .myClassTab,
	.myclassroom-body .myorder-tab {
		flex-direction: column;
	}
}