/* =====================================================================
   진짜쓰는 실무엑셀 강의 페이지 (post-real-excel.php) 리디자인
   애플/노션 톤 2단 레이아웃. 모든 셀렉터는 .re-lesson 루트에 스코프.
   디자인 토큰은 핸드오프(design_handoff_lesson_page) 값.
   페이지-스코프 토큰 패턴은 css/page-lecture-home.css(#lecture-home) 선례.
   ===================================================================== */

/* ── 페이지-스코프 토큰 ───────────────────────────────────────────── */
.re-lesson {
	/* surface / ink */
	--re-bg: #F5F5F7;
	--re-card: #FFFFFF;
	--re-ink: #1D1D1F;
	--re-ink2: #3A463E;
	--re-ink3: #2A332D;
	--re-text: #6E6E73;
	--re-muted: #86868B;
	--re-faint: #A6ADA7;
	--re-faint2: #B0B5AF;
	--re-faint3: #C2C7C1;
	--re-num: #C7C7CC;
	/* brand green (기능 액센트 전용) */
	--re-green: #1E875A;
	--re-green-bright: #2ED47A;
	--re-green-50: #F4FAF6;
	--re-green-100: #EDF4EF;
	--re-green-150: #EAF4EE;
	--re-green-border: #CDE6D6;
	/* accents */
	--re-gold: #F0A03C;
	--re-zip-bg: #F0F1EF;
	--re-zip-fg: #8A938C;
	--re-tan-fg: #9A7B3A;
	--re-tan-bg: #EFEADF;
	/* hairlines */
	--re-line-card: #E8E8E6;
	--re-line-tab: #E2E2E0;
	--re-line-row: #F0F0EE;
	--re-line-track: #ECECEA;
	--re-line-side: #EDEDEB;
	--re-line-quiz: #E6E6E4;
	--re-hover: #F7F7F5;
	--re-line-btn: #DADAD8;
	--re-goal-bg: #E6F4EC;
	--re-star: #F5A623;
	--re-star-empty: #D8DAD7;
	--re-q-correct-bg: #EAF6EE;
	--re-q-wrong-bd: #D98C72;
	--re-q-wrong-bg: #FBEEE9;
	--re-q-wrong-fg: #8A4B36;
	--re-warn-bg: #FFF6E0;
	--re-warn-border: #F2D98A;
	--re-warn-fg: #936A00;
	--re-rate-blue: #2E92D6;
	/* 교재 유형 배지 색 (실무 활용=파랑 / 엑셀 기초=초록 / 실무 상식=빨강) */
	--re-type-blue: #2E92D6;
	--re-type-blue-bd: #BFE0F2;
	--re-type-red: #D64545;
	--re-type-red-bd: #F1CBCB;
	/* 다운로드 확장자 배지 색 (엑셀=초록 --re-green/--re-green-100, zip=--re-zip-* 재사용) */
	--re-file-red-fg: #D64545;  --re-file-red-bg: #FBE9E9;   /* pdf */
	--re-file-ppt-fg: #D9722E;  --re-file-ppt-bg: #FBEEE3;   /* ppt */
	--re-file-blue-fg: #2B77CC; --re-file-blue-bg: #E7F0FB;  /* doc */
	/* radius scale */
	--re-r-6: 6px;
	--re-r-8: 8px;
	--re-r-10: 10px;
	--re-r-11: 11px;
	--re-r-13: 13px;
	--re-r-16: 16px;
	--re-r-99: 99px;
	/* type */
	--re-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
	--re-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

	max-width: 1300px;
	width: 100%;
	margin: 0 auto;
	padding: 40px 15px 88px;
	box-sizing: border-box;
	font-family: var(--re-font);
	color: var(--re-ink);
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
}
.re-lesson *,
.re-lesson *::before,
.re-lesson *::after { box-sizing: border-box; }
.re-lesson ::selection { background: rgba(30,135,90,.13); }

/* ── 페이지 레이아웃 오버라이드 (앱형 2-pane → 일반 문서흐름) ──────── */
html body[class*="post-template-post-real-excel"] { overflow-y: visible; }
/* GeneratePress 래퍼가 폭을 좁히거나 flex 로 줄이지 않도록 (배경은 사이트 기본값 유지) */
body[class*="post-template-post-real-excel"] #content,
body[class*="post-template-post-real-excel"] .site-content,
body[class*="post-template-post-real-excel"] #primary,
body[class*="post-template-post-real-excel"] .content-area {
	display: block;
	max-width: 100%;
	width: 100%;
	padding: 0;
}
body[class*="post-template-post-real-excel"] #main.lecture-main {
	display: block;
	margin-top: 0;
	height: auto;
	min-width: 0;
	overflow: visible;
	padding: 0;
	flex: 1 1 100%;
}

/* ── grid ──────────────────────────────────────────────────────────── */
.re-lesson .re-grid {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 30px;
	align-items: start;
}
.re-lesson .re-main { min-width: 0; }

/* ── 헤더 (제목 블록) ──────────────────────────────────────────────── */
.re-lesson .re-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 0 2px 30px;
}
.re-lesson .re-head-meta { min-width: 0; }
.re-lesson .re-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 13px;
	font-size: 11.5px;
}
.re-lesson .re-eyebrow .re-chapter {
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--re-green);
}
.re-lesson .re-eyebrow .re-dot {
	width: 3px; height: 3px;
	border-radius: 50%;
	background: var(--re-num);
}
.re-lesson .re-eyebrow .re-sub { font-size: 12.5px; color: var(--re-muted); }
.re-lesson .re-title {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.25;
	color: var(--re-ink);
}
.re-lesson .re-submeta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 16px;
	font-size: 13.5px;
	color: var(--re-text);
}
.re-lesson .re-submeta .re-by { display: flex; align-items: center; gap: 7px; }
.re-lesson .re-avatar {
	width: 23px; height: 23px;
	border-radius: 50%;
	background: var(--re-green);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 10px; font-weight: 700;
	flex-shrink: 0;
}
.re-lesson .re-submeta .re-reviewcount { color: var(--re-faint); }

/* ── 헤더 prev/next 세그먼트 컨트롤 (기존 .next-prev-button 클래스 재사용) ── */
.re-lesson .re-nav {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--re-line-tab);
	border-radius: var(--re-r-11);
	overflow: visible;
	background: var(--re-card);
	flex-shrink: 0;
}
.re-lesson .re-nav .next-prev-button {
	display: flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	padding: 10px 15px;
	margin: 0;
	font-size: 13px;
	line-height: 1.2;
	background: transparent;
	color: var(--re-text) !important;
	border: 0;
	border-radius: 0;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--transition-fast, .15s ease);
	position: relative;
}
.re-lesson .re-nav .next-prev-button:first-child { border-right: 1px solid var(--re-line-track); }
.re-lesson .re-nav .next-prev-button:last-child { font-weight: 600; color: var(--re-ink) !important; }
.re-lesson .re-nav .next-prev-button:not(.empty):hover { background: var(--re-hover); }
.re-lesson .re-nav .next-prev-button.empty { color: var(--re-faint) !important; cursor: default; }
.re-lesson .re-nav .next-prev-button svg { display: block; }
/* roadmap 드롭다운 팝오버 */
.re-lesson .re-nav .next-prev-button-child {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	min-width: 230px;
	background: var(--re-card);
	border: 1px solid var(--re-line-card);
	border-radius: var(--re-r-13);
	box-shadow: 0 12px 34px rgba(0,0,0,.12);
	padding: 6px;
	z-index: var(--z-dropdown, 100);
	white-space: normal;
}
.re-lesson .re-nav .next-prev-button:first-child .next-prev-button-child { left: 0; }
.re-lesson .re-nav .next-prev-button:last-child .next-prev-button-child { right: 0; }
.re-lesson .re-nav .next-prev-button-child > div {
	padding: 9px 11px;
	border-radius: var(--re-r-10);
	cursor: pointer;
	font-weight: 600;
	color: var(--re-ink);
}
.re-lesson .re-nav .next-prev-button-child > div:hover { background: var(--re-hover); }
.re-lesson .re-nav .next-prev-button-child .next-prev-title {
	font-size: 11.5px;
	font-weight: 400;
	color: var(--re-muted);
	margin-top: 2px;
}

/* ── 영상 ──────────────────────────────────────────────────────────── */
.re-lesson .re-video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--re-r-16);
	overflow: hidden;
	background: linear-gradient(155deg, #222d27, #11160f);
}
.re-lesson .re-video #player,
.re-lesson .re-video iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}
.re-lesson .re-video .realexcel-notice-image { position: absolute; inset: 0; }
.re-lesson .re-video .realexcel-notice-image img { width: 100%; height: 100%; object-fit: cover; }

/* ── 탭 바 ─────────────────────────────────────────────────────────── */
.re-lesson .re-tabs {
	display: flex;
	gap: 30px;
	margin-top: 24px;
	border-bottom: 1px solid var(--re-line-tab);
	overflow-x: auto;
	scrollbar-width: none;
}
.re-lesson .re-tabs::-webkit-scrollbar { height: 0; width: 0; }
.re-lesson .re-tab {
	appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 1.5px solid transparent;
	padding: 0 1px 14px;
	margin-bottom: -1px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--re-muted);
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--transition-fast, .15s ease);
}
.re-lesson .re-tab:hover { color: var(--re-ink2); }
.re-lesson .re-tab.is-active { color: var(--re-ink); border-bottom-color: var(--re-ink); }

/* ── 패널 공통 ─────────────────────────────────────────────────────── */
.re-lesson .re-panel { padding-top: 30px; }
.re-lesson .re-panel.is-hidden { display: none; }
/* 레거시 콘텐츠 안전장치 — 패널 내 이미지/표가 넘치지 않게 */
.re-lesson .re-panel img { max-width: 100%; height: auto; }
.re-lesson .re-panel .cls-lecture img { display: block; margin: 12px auto; border-radius: var(--re-r-10); }
.re-lesson .re-panel table { max-width: 100%; }

.re-lesson .re-label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--re-muted);
	margin: 0 0 14px;
}
.re-lesson .re-label + .re-label,
.re-lesson .re-card + .re-label { margin-top: 30px; }
/* 시안 C — 에디토리얼 섹션 제목 + 헤어라인 (박스·이모지 없음) */
.re-lesson .re-sec-title {
	font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
	color: var(--re-ink); margin: 0 0 16px;
}
.re-lesson .re-rule { height: 1px; background: var(--re-line-track); border: 0; margin: 32px 0; }
.re-lesson .re-card {
	background: var(--re-card);
	border: 1px solid var(--re-line-card);
	border-radius: var(--re-r-13);
	overflow: hidden;
}
.re-lesson .re-empty {
	background: var(--re-card);
	border: 1px solid var(--re-line-card);
	border-radius: var(--re-r-13);
	padding: 28px 20px;
	text-align: center;
	font-size: 13.5px;
	color: var(--re-faint);
}

/* ── files 패널: 상태 버튼 (완료/스크랩/로그인) ───────────────────── */
.re-lesson .re-status-row {
	display: flex;
	gap: 10px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}
.re-lesson .re-status-row .this-lecture-status,
.re-lesson .re-status-row .this-lecture-login,
.re-lesson .re-status-row .this-lecture-apply,
.re-lesson .re-status-row .this-bookmark-status,
.re-lesson .re-status-row a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border-radius: var(--re-r-10);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}
.re-lesson .re-status-row .this-lecture-status {
	background: var(--re-green-100);
	color: var(--re-green);
	box-shadow: none;
}
.re-lesson .re-status-row .this-lecture-status.completed {
	background: var(--re-green-50);
	color: var(--re-green);
	box-shadow: none;
}
.re-lesson .re-status-row .this-bookmark-status {
	background: var(--re-ink);
	color: #fff;
}
.re-lesson .re-status-row .this-bookmark-status.bookmarked { background: var(--re-ink2); }
.re-lesson .re-status-row .this-lecture-apply { background: #FFF1F1; color: #ff4646; }
.re-lesson .re-status-row .this-lecture-login { background: var(--re-line-track); color: var(--re-text); }

/* ── files 패널: 다운로드 헤더 + 한번에 받기 ─────────────────────── */
.re-lesson .re-dl-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 14px;
}
.re-lesson .re-dl-head .re-label { margin: 0; }
.re-lesson .re-dl-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 13px;
	border: 1px solid var(--re-line-tab);
	border-radius: var(--re-r-10);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--re-ink);
	cursor: pointer;
	white-space: nowrap;
}
.re-lesson .re-dl-all:hover { background: var(--re-hover); }

/* my_download_list 쇼트코드 출력 리스타일 → 핸드오프 파일 행 */
.re-lesson .my-download-list-box { margin: 0; }
.re-lesson ul.my-download-list { margin: 0; padding: 0; list-style: none; }
.re-lesson .my-download-item {
	display: flex;
	align-items: center;
	gap: 14px;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 10px 0;
	margin: 0;
	list-style: none;
}
.re-lesson .my-download-item + .my-download-item { border-top: 1px solid var(--re-line-row); }
/* 강의 자료 / 클래스 전체 자료 구분선 */
.re-lesson .my-download-divider { list-style: none; height: 0; border-top: 1px solid var(--re-line-card); margin: 8px 0; padding: 0; }
.re-lesson .my-download-item::before {
	content: attr(data-ext); /* 실제 파일 확장자(대문자) 또는 LINK */
	flex-shrink: 0;
	width: 40px; height: 40px;
	border-radius: var(--re-r-11);
	background: var(--re-green-100); /* 기본 = 엑셀(초록) */
	color: var(--re-green);
	display: flex; align-items: center; justify-content: center;
	font-size: 10.5px; font-weight: 800; letter-spacing: 0.03em;
}
/* 확장자별 배지 색 (엑셀 xlsx/xls/xlsm/csv = 기본 초록 유지) */
.re-lesson .my-download-item[data-ext="ZIP"]::before,
.re-lesson .my-download-item[data-ext="RAR"]::before { background: var(--re-zip-bg); color: var(--re-zip-fg); }
.re-lesson .my-download-item[data-ext="PDF"]::before { background: var(--re-file-red-bg); color: var(--re-file-red-fg); }
.re-lesson .my-download-item[data-ext="PPT"]::before,
.re-lesson .my-download-item[data-ext="PPTX"]::before { background: var(--re-file-ppt-bg); color: var(--re-file-ppt-fg); }
.re-lesson .my-download-item[data-ext="DOC"]::before,
.re-lesson .my-download-item[data-ext="DOCX"]::before { background: var(--re-file-blue-bg); color: var(--re-file-blue-fg); }
.re-lesson .my-download-item[data-ext="LINK"]::before { background: var(--re-line-track); color: var(--re-faint); }
.re-lesson .my-download-item-col-1 { flex: 1; min-width: 0; }
.re-lesson .my-download-item-title {
	font-size: 14px; font-weight: 600; color: var(--re-ink);
	line-height: 1.35;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.re-lesson .my-download-item-sub { font-size: 12px; color: var(--re-faint); margin-top: 2px; }
.re-lesson .my-download-item-col-2 { flex-shrink: 0; }
.re-lesson .my-download-item-type { font-size: 12px; color: var(--re-faint); }
.re-lesson .my-download-item-col-3 { flex-shrink: 0; width: auto; margin-left: auto; } /* 전역 width:20% 무시 + 우측 정렬 */
.re-lesson .my-download-item-col-3 a { text-decoration: none; }
/* 다운로드 = 심플 텍스트 링크 "↓ 다운로드" (버튼 박스 없음, 우측 정렬) */
.re-lesson .my-download-item-button {
	display: inline-flex; align-items: center; gap: 6px;
	background: none; border: 0; padding: 0;
	color: var(--re-ink2); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.re-lesson .my-download-item-button i { font-size: 12px; color: var(--re-faint); margin: 0; }
.re-lesson .my-download-item-button:hover { color: var(--re-green); background: none; }
.re-lesson .my-download-item-button:hover i { color: var(--re-green); }
.re-lesson .my-download-login-required {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--re-card); color: var(--re-ink); border: 1px solid #DEDEDE;
	font-size: 12.5px; font-weight: 600; border-radius: var(--re-r-10);
	padding: 8px 13px; white-space: nowrap;
}

/* ── files 패널: 페이지 안내 (세션 리스트) ───────────────────────── */
.re-lesson .session-row-container {
	background: none; border: 0; border-radius: 0; overflow: visible;
	margin: 0; font-size: 14.5px;
	display: flex; flex-direction: column; gap: 12px;
}
.re-lesson .session-row {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 0;
	border: 0;
}
.re-lesson .session-type {
	min-width: auto !important;
	margin: 0 !important;
	display: inline-flex; align-items: center;
	font-size: 11px; font-weight: 700;
	color: var(--re-green) !important;
	border: 0; border-radius: 0; padding: 0;
	flex-shrink: 0; white-space: nowrap;
}
.re-lesson .session-type i { display: none; }
.re-lesson .session-title {
	margin-left: 0 !important;
	flex: 1; min-width: 0;
	color: var(--re-ink2);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.re-lesson .session-page {
	margin-left: 0;
	width: auto;
	font-family: var(--re-font);
	font-size: 12.5px; font-weight: 600;
	color: var(--re-faint);
	white-space: nowrap;
}

/* 사용 버전·도구 (시안 C 에디토리얼) */
.re-lesson .re-tools { display: flex; flex-direction: column; gap: 11px; }
.re-lesson .re-tool-row { display: flex; align-items: center; gap: 13px; font-size: 14.5px; }
.re-lesson .re-tool-name { color: var(--re-ink2); }
.re-lesson .re-tool-req { margin-left: auto; font-family: var(--re-font); font-size: 12.5px; font-weight: 600; color: var(--re-faint); white-space: nowrap; }

/* ── files 패널: 알림 배너 + 책 광고 ─────────────────────────────── */
.re-lesson .re-notice {
	margin: 18px 0 0;
	padding: 14px 18px;
	background: var(--re-green-50);
	border: 1px solid var(--re-green-border);
	border-radius: var(--re-r-13);
	font-size: 13.5px;
	color: var(--re-ink2);
	line-height: 1.6;
}
.re-lesson .re-notice .highlight-yellow { background: transparent; font-weight: 700; color: var(--re-green); }
.re-lesson .desktop-ad-container {
	margin-top: 30px;
	background: var(--re-ink);
	color: #fff;
	border-radius: var(--re-r-13);
	padding: 20px 22px;
	font-size: 14px;
}
.re-lesson .desktop-ad-title { margin-bottom: 14px; line-height: 1.5; }
.re-lesson .desktop-ad-button-box { display: flex; gap: 10px; }
.re-lesson .desktop-ad-button-outer { flex: 1 1 auto; margin: 0; }
.re-lesson .desktop-ad-container a { text-decoration: none; }
.re-lesson .desktop-ad-button {
	background: #fff; color: var(--re-ink);
	border-radius: var(--re-r-10);
	padding: 6px 10px; display: block; text-align: center;
	transition: background var(--transition-fast, .15s ease);
}
.re-lesson .desktop-ad-button:hover { background: #e9e9ec; }
.re-lesson .desktop-ad-button .ad-button-img { display: block; max-height: 40px; margin: auto; }
.re-lesson .file-list {
	display: inline-block;
	margin-top: 12px;
	background: var(--re-green-100);
	color: var(--re-green);
	font-size: 12px;
	padding: 4px 11px;
	border-radius: var(--re-r-8);
}

/* ── note 패널 ─────────────────────────────────────────────────────── */
.re-lesson .cls-lecture { font-size: 15px; line-height: 1.7; color: var(--re-ink2); }
/* 시안 A 섹션 라벨 — 작은 라벨 + 라벨 아래 헤어라인 */
.re-lesson .re-sec-h {
	font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
	color: var(--re-muted);
	padding-bottom: 10px; border-bottom: 1px solid var(--re-line-card);
	margin: 0 0 15px;
}
.re-lesson .re-sec-h.gap { margin-top: 30px; }
/* 시안 A — 자료·교재 2열 구분선 (좌 자료 / 우 정보) */
.re-lesson .re-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.re-lesson .re-2col .re-col-right { border-left: 1px solid var(--re-line-card); padding-left: 34px; }
.re-lesson .re-2col .re-col-left > .re-sec-h:first-child,
.re-lesson .re-2col .re-col-right > .re-sec-h:first-child { margin-top: 0; }
@media (max-width: 840px) {
	.re-lesson .re-2col { grid-template-columns: 1fr; gap: 0; }
	.re-lesson .re-2col .re-col-right { border-left: 0; padding-left: 0; margin-top: 30px; }
}
/* 레거시 cls-subtitle(관련자료 등)·re-sec-title 도 동일 라벨로 */
.re-lesson .re-panel h5.cls-subtitle,
.re-lesson .re-panel .re-sec-title {
	font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .05em;
	color: var(--re-muted) !important;
	padding: 0 0 10px !important; border: 0 !important;
	border-bottom: 1px solid var(--re-line-card) !important;
	margin: 30px 0 15px !important; background: none !important;
}
.re-lesson .re-panel h5.cls-subtitle:first-child,
.re-lesson .re-panel .re-sec-title:first-child { margin-top: 0 !important; }
.re-lesson .re-panel h5.cls-subtitle i { display: none; }
.re-lesson .ulcheck-list,
.re-lesson .ulcheck-list ul {
	margin: 0; padding: 0; list-style: none;
	background: none; border: 0; border-radius: 0;
	display: flex; flex-direction: column; gap: 13px;
}
.re-lesson .ulcheck-list li {
	list-style: none;
	position: relative;
	padding: 0 0 0 26px;
	border: 0;
	font-size: 14px; line-height: 1.55; color: var(--re-ink2);
}
.re-lesson .ulcheck-list li::before {
	content: "✓";
	position: absolute; left: 0; top: 0;
	color: var(--re-green); font-weight: 800; font-size: 14px;
}
.re-lesson .ulcheck-list li b { font-weight: 700; color: var(--re-ink); }
.re-lesson .additional-material,
.re-lesson .replace-lecture-containter {
	margin: 0;
	border: 1px solid var(--re-line-card);
	border-radius: var(--re-r-13);
	padding: 16px 18px;
	background: var(--re-card);
	font-size: 14px;
	color: var(--re-ink2);
}

/* ── toc 패널 (시간대별 목차) — ACF 필드가 .real-excel-timeline>a 행 구조 ── */
.re-lesson .re-toc-card {
	background: var(--re-card);
	border: 1px solid var(--re-line-card);
	border-radius: var(--re-r-13);
	overflow: hidden;
}
.re-lesson .re-toc-card .real-excel-timeline { margin: 0; }
.re-lesson .re-toc-card a {
	display: block;
	padding: 14px 18px;
	border-top: 1px solid var(--re-line-row);
	color: var(--re-ink2);
	text-decoration: none;
	font-size: 14px; line-height: 1.45;
	transition: background var(--transition-fast, .15s ease);
}
.re-lesson .re-toc-card a:first-child,
.re-lesson .re-toc-card .real-excel-timeline > a:first-child { border-top: 0; }
.re-lesson .re-toc-card a:hover { background: var(--re-hover); }
.re-lesson .re-toc-card .lecture-time { display: block; }
.re-lesson .re-toc-card .lecture-time-content { width: auto !important; }
.re-lesson .re-toc-card .timetext {
	font-family: var(--re-font);
	font-size: 12.5px; font-weight: 600;
	color: var(--re-green);
	white-space: nowrap;
}
.re-lesson .re-toc-card .timetext i { color: var(--re-green); margin-right: 2px; }
/* 인-플레이어 목차 — 네이티브 컨트롤 유지 + 영상 위 '목차' 버튼/팝오버 오버레이 */
.re-lesson .re-video { position: relative; }
.re-lesson .re-ip-toc-btn {
	position: absolute; top: 12px; right: 12px; z-index: 5;
	display: inline-flex; align-items: center; gap: 5px;
	padding: 7px 13px; border-radius: 8px; cursor: pointer;
	background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.22);
	color: #fff; font-family: var(--re-font); font-size: 14px; font-weight: 600; line-height: 1;
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	transition: background var(--transition-fast);
}
.re-lesson .re-ip-toc-btn:hover { background: rgba(0, 0, 0, 0.72); }
.re-lesson .re-ip-toc-btn svg { flex-shrink: 0; }
.re-lesson .re-ip-pop {
	position: absolute; top: 48px; right: 12px; z-index: 6;
	width: 264px; max-width: calc(100% - 24px); max-height: 72%; overflow-y: auto;
	display: none; padding: 7px;
	background: rgba(22, 26, 23, 0.94); border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 13px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.46);
	-webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
}
.re-lesson .re-ip-pop.open { display: block; animation: re-ip-pop-in .18s ease; }
@keyframes re-ip-pop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.re-lesson .re-ip-pop-h { padding: 7px 9px 9px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.5); }
.re-lesson .re-ip-pop-list .real-excel-timeline { margin: 0; }
.re-lesson .re-ip-pop-list a { display: block; padding: 9px 10px; border-radius: 8px; color: rgba(255, 255, 255, 0.84); text-decoration: none; font-size: 12.5px; line-height: 1.4; }
.re-lesson .re-ip-pop-list a:hover { background: rgba(255, 255, 255, 0.08); }
.re-lesson .re-ip-pop-list .lecture-time { display: block; }
.re-lesson .re-ip-pop-list .lecture-time-content { width: auto !important; }
.re-lesson .re-ip-pop-list .timetext { font-family: var(--re-font); font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, 0.45); margin-right: 6px; }
.re-lesson .re-ip-pop-list .timetext i { display: none; }
.re-lesson .re-ip-pop::-webkit-scrollbar { width: 6px; }
.re-lesson .re-ip-pop::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 99px; }

/* ── quiz 패널 (셀프 점검) — ol>li>strong+.boxed>.quiz-option 구조 ──────── */
.re-lesson .quiz-container { margin: 0; }
.re-lesson .quiz-inner-container,
.re-lesson .quiz-container .lity-imgs { display: block; }
.re-lesson .numbered-list.green { margin: 0; }
.re-lesson .numbered-list.green ol {
	margin: 0 !important; padding: 0; list-style: none;
	display: flex; flex-direction: column; gap: 30px;
}
.re-lesson .numbered-list.green ol li {
	position: relative;
	margin: 0 !important;
	background: none;
	border: 0 !important;
	border-radius: 0;
	padding: 0 0 0 31px;
	font-size: 14.5px; line-height: 1.45; color: var(--re-ink);
}
.re-lesson .numbered-list.green ol li:before {
	background: var(--re-ink) !important;
	color: #fff !important;
	width: 21px !important; height: 21px !important;
	line-height: 21px !important;
	font-size: 11px !important; font-weight: 700;
	margin: 0 !important;
	top: 0; left: 0;
}
.re-lesson .numbered-list.green ol li > strong { display: block; font-weight: 600; margin-bottom: 15px; }
/* .boxed: 전역 테두리·마진 제거 → 2열 보기 그리드 */
.re-lesson .quiz-container .boxed,
.re-lesson .numbered-list .boxed,
.re-lesson li .boxed {
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid; grid-template-columns: 1fr 1fr; gap: 9px;
}
.re-lesson .quiz-container .boxed img,
.re-lesson .numbered-list .boxed img { grid-column: 1 / -1; }
.re-lesson .quiz-option {
	background: var(--re-card);
	border: 1px solid var(--re-line-quiz);
	border-radius: var(--re-r-10);
	margin: 0;
	padding: 12px 14px;
	font-size: 13.5px; font-weight: 400;
	color: var(--re-ink2);
	cursor: pointer; transition: .12s; text-shadow: none;
}
.re-lesson .quiz-option.selected { background: var(--re-ink); color: #fff; font-weight: 600; border-color: var(--re-ink); }
.re-lesson .quiz-option.correct { background: var(--re-green-50); color: var(--re-green); font-weight: 700; border: 1px solid var(--re-green); text-decoration: none; }
.re-lesson .quiz-option.wrong { background: #fdecea; color: #d8412f; font-weight: 600; border: 1px solid #f0b6ae; text-decoration: line-through; }
/* 퀴즈 본문 이미지 */
.re-lesson .numbered-list.green img,
.re-lesson .quiz-container img {
	display: block; max-width: 100%; height: auto;
	margin: 4px auto 12px !important; border-radius: var(--re-r-10);
}
.re-lesson .quiz-answer-button-box { margin: 14px 0 4px; padding: 0; }
.re-lesson .quiz-answer-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	background: var(--re-green);
	color: #fff;
	padding: 11px 18px;
	border-radius: var(--re-r-10);
	font-size: 14px; font-weight: 600;
	max-width: none; margin: 0; cursor: pointer;
}
.re-lesson .quiz-answer-button:hover { background: #176f49; }

/* ── related 패널 ──────────────────────────────────────────────────── */
.re-lesson .related-items-body h5.cls-subtitle { margin-top: 30px !important; }
.re-lesson .related-items-body h5.cls-subtitle:first-child { margin-top: 0 !important; }
.re-lesson .related-items-body .slick-list { margin: 0 24px; }
.re-lesson .re-version { display: flex; gap: 18px; font-size: 13.5px; color: var(--re-ink2); }

/* ── 수강평 ────────────────────────────────────────────────────────── */
.re-lesson .re-reviews {
	margin-top: 44px;
	padding-top: 32px;
	border-top: 1px solid var(--re-line-card);
}
.re-lesson .re-reviews-head {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 16px;
}
.re-lesson .re-reviews-head .re-reviews-title { font-size: 16px; font-weight: 700; color: var(--re-ink); }
.re-lesson .re-reviews-head .re-reviews-count {
	font-size: 11px; font-weight: 600;
	color: var(--re-text);
	background: #EDEDEB;
	border-radius: var(--re-r-99);
	padding: 1px 9px;
}
.re-lesson .re-panel[data-panel="comments"] { padding-top: 24px; }
.re-lesson .lecture-comment-containter,
.re-lesson #comments,
.re-lesson #wpdcom { max-width: 100%; }

/* ── 사이드바: 전체 커리큘럼 ──────────────────────────────────────── */
.re-lesson .re-side { position: static; align-self: start; }
.re-lesson .re-curriculum {
	background: var(--re-card);
	border: 1px solid var(--re-line-card);
	border-radius: var(--re-r-16);
	overflow: hidden;
}
.re-lesson .re-curriculum-head { padding: 16px 18px; border-bottom: 1px solid var(--re-line-side); }
.re-lesson .re-curriculum-headrow { display: flex; align-items: center; justify-content: space-between; }
.re-lesson .re-curriculum-headrow .re-c-title { font-size: 13.5px; font-weight: 700; color: var(--re-ink); }
.re-lesson .re-curriculum-headrow .re-c-pct { font-size: 11.5px; font-weight: 600; color: var(--re-green); }
.re-lesson .re-c-progress { display: flex; align-items: center; gap: 9px; margin-top: 12px; }
.re-lesson .re-c-track { flex: 1; height: 5px; border-radius: var(--re-r-99); background: var(--re-line-track); overflow: hidden; }
.re-lesson .re-c-fill { height: 100%; background: var(--re-green); border-radius: var(--re-r-99); }
.re-lesson .re-c-count { font-size: 11px; color: var(--re-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 전체목차 / 8시간 로드맵 토글 */
.re-lesson .re-c-toggle { display: flex; gap: 6px; margin-top: 12px; }
.re-lesson .re-c-toggle .item {
	flex: 1;
	text-align: center;
	font-size: 12px; font-weight: 600;
	padding: 8px 6px;
	border-radius: var(--re-r-8);
	background: var(--re-bg);
	color: var(--re-text);
	cursor: pointer;
	transition: var(--transition-fast, .15s ease);
}
.re-lesson .re-c-toggle .item.active { background: var(--re-green); color: #fff; }
.re-lesson .re-c-toggle .item i { margin-right: 4px; }

.re-lesson .re-curriculum-list { max-height: 424px; overflow-y: auto; }
.re-lesson .re-curriculum-list.pl-scroll { scrollbar-width: none; }
.re-lesson .re-curriculum-list::-webkit-scrollbar { width: 0; height: 0; }

.re-lesson .re-curriculum-foot { padding: 15px 17px; border-top: 1px solid var(--re-line-side); }
.re-lesson .re-next-cta {
	display: block;
	background: var(--re-ink);
	color: #fff;
	border-radius: var(--re-r-11);
	padding: 13px;
	text-align: center;
	font-size: 13.5px; font-weight: 600;
	text-decoration: none;
}
.re-lesson .re-next-cta:hover { background: var(--re-ink2); }
.re-lesson .re-next-cta.empty { background: var(--re-line-track); color: var(--re-faint); pointer-events: none; }
/* 수강 완료 액션 CTA(<button>) — 링크형과 동일 룩(검정) + 아이콘 정렬 */
.re-lesson button.re-next-cta { width: 100%; border: 0; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; }
.re-lesson button.re-next-cta svg { flex-shrink: 0; }
/* AJAX 부분 이동 중 클릭만 차단(시각 효과 없음) */
.re-lesson .re-main.re-nav-loading { pointer-events: none; }

/* ── 사이드바: 서버사이드 AJAX 마크업(.real-*) 리스타일 (이름변경 X) ─ */
.re-lesson .real-curriculum-container { padding: 6px 0 4px; }
.re-lesson .real-curriculum-container a { color: var(--re-ink2); text-decoration: none; }
.re-lesson .real-chap-container {
	margin: 0; padding: 15px 19px 6px;
	font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
	color: var(--re-faint2);
	background: none; border-radius: 0;
}
.re-lesson .real-chap-container.main,
.re-lesson .real-chap-container.main.red,
.re-lesson .real-chap-container.main.green,
.re-lesson .real-chap-container.main.blue {
	background: none; color: var(--re-faint2);
	padding: 15px 19px 8px;
}
.re-lesson .real-chap-container.collapsible-box,
.re-lesson .collapsible-box { cursor: pointer; }
.re-lesson .real-chapno { font-size: 10.5px; line-height: 1.2; color: var(--re-faint2); }
.re-lesson .real-chaptitle { font-weight: 700; color: var(--re-ink2); font-size: 11.5px; letter-spacing: 0.02em; }
.re-lesson .real-chap-container.font-green { color: var(--re-faint2); }
/* 챕터 진행 상태바 */
.re-lesson .status-box { font-size: 11px; font-weight: 600; color: var(--re-faint); margin-top: 6px; }
.re-lesson .status-box .progressbar-background,
.re-lesson .progressbar-background { background: var(--re-line-track) !important; height: 4px !important; border-radius: var(--re-r-99); margin-top: 5px; overflow: hidden; }
.re-lesson .progressbar-background > div { background: var(--re-green) !important; border-radius: var(--re-r-99); }

.re-lesson .real-lesson-container { border: 0; border-bottom: 0; padding: 10px 19px; }
.re-lesson .real-lesson-container.current {
	background: var(--re-green-50);
	border-radius: var(--re-r-10);
	margin: 0 7px;
	padding: 11px 12px;
	font-weight: 700;
}
.re-lesson .real-lesson-container:hover { background: var(--re-hover); transition: var(--transition-fast, .15s ease); }
.re-lesson .real-lesson-container.current:hover { background: var(--re-green-50); }
.re-lesson .real-lesson-row { display: flex; line-height: 1.5; font-size: 13px; align-items: center; }
.re-lesson .real-lesson-row.top { margin-bottom: 2px; min-height: 0; }
.re-lesson .real-lesson-row.top:empty { display: none; }
.re-lesson .real-lesson-row.bold { font-weight: 700; color: var(--re-ink) !important; }
.re-lesson .real-lesson-container.current .real-lesson-row { color: var(--re-ink); }
.re-lesson .real-lesson-row.btm { font-size: 11px; color: var(--re-faint); margin-top: 3px; gap: 10px; }
.re-lesson .real-lesson-row.btm.current { color: var(--re-green); }
.re-lesson .real-lesson-row.btm .item { margin-right: 0; display: inline-flex; align-items: center; gap: 4px; font-family: var(--re-font); white-space: nowrap; }
.re-lesson .real-lesson-row .flex-float-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.re-lesson .real-lesson-current { font-size: 1.1rem; margin-right: 4px; color: var(--re-green); }
.re-lesson .complete-button { font-size: 1.15rem; color: var(--re-num); }
.re-lesson .complete-button.completed { color: var(--re-green); }
/* 상태 배지 */
.re-lesson .real-lesson-exists { font-size: 10px; color: #fff; padding: 1px 8px; border-radius: var(--re-r-6); line-height: 1.6; display: inline-block; }
.re-lesson .real-lesson-exists.ytube { background: #ff2020; }
.re-lesson .real-lesson-exists.quiz { background: #6e00ff; }
.re-lesson .real-lesson-exists.roadmap { background: var(--re-green); }
.re-lesson .real-lesson-exists.notready { background: var(--re-faint2); }

/* ── 사이드바 커리큘럼: 챕터(접기/펼치기) + 강의 목록 · 챕터별 진도율만 숨김 ── */
.re-lesson #realexcel-curricurum .status-box { display: none; }              /* 챕터별 진도율 숨김 */
.re-lesson #realexcel-curricurum .real-chap-container:not(.main) { display: none; } /* 레슨 그룹(Lesson N) 구분 제거 — 챕터 구분만 */
.re-lesson #realexcel-curricurum .real-lesson-exists.roadmap { display: none; }      /* 로드맵 뱃지 제거 */
.re-lesson #realexcel-curricurum .real-lesson-row.top:has(.real-lesson-exists.roadmap) { display: none; } /* 로드맵 뱃지 행 collapse */
.re-lesson #realexcel-curricurum .real-chap-container.main {
	background: none;
	padding: 13px 18px;
	border-top: 1px solid var(--re-line-row);
	border-left: 3px solid transparent;
}
.re-lesson #realexcel-curricurum .collapsible-box:first-child .real-chap-container.main { border-top: 0; }
.re-lesson #realexcel-curricurum .real-chapno {
	font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
	color: var(--re-faint2); line-height: 1.3; margin-bottom: 2px;
}
.re-lesson #realexcel-curricurum .real-chaptitle {
	font-size: 13px; font-weight: 700; letter-spacing: -0.01em; color: var(--re-ink2);
}
/* 현재 챕터 강조 */
.re-lesson #realexcel-curricurum .real-chap-container.main.re-current-chapter {
	background: var(--re-green-50);
	border-left-color: var(--re-green);
}
.re-lesson #realexcel-curricurum .real-chap-container.main.re-current-chapter .real-chapno,
.re-lesson #realexcel-curricurum .real-chap-container.main.re-current-chapter .real-chaptitle { color: var(--re-green); }

/* ── 사이드바 커리큘럼 (서버 렌더 · 핸드오프 레이아웃) ───────────────── */
.re-lesson .re-curriculum-list .re-cur-chap {
	padding: 16px 19px 6px;
	font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
	color: var(--re-faint2);
	line-height: 1.4;
}
.re-lesson .re-curriculum-list .re-cur-chap:first-child { padding-top: 4px; }
.re-lesson .re-curriculum-list .re-cur-lesson {
	display: flex; align-items: center; gap: 11px;
	padding: 9px 19px;
	text-decoration: none;
	color: var(--re-ink2);
	transition: background var(--transition-fast, .15s ease);
}
.re-lesson .re-curriculum-list .re-cur-lesson:hover { background: var(--re-hover); }
.re-lesson .re-curriculum-list .re-cur-ico {
	flex-shrink: 0;
	width: 23px; height: 23px;
	border-radius: 50%;
	border: 1.5px solid var(--re-line-track);
	display: flex; align-items: center; justify-content: center;
	font-size: 10px;
}
.re-lesson .re-curriculum-list .re-cur-ico.done { background: var(--re-green-100); border-color: transparent; color: var(--re-green); }
.re-lesson .re-curriculum-list .re-cur-ico.play { background: var(--re-green); border-color: transparent; color: #fff; font-size: 9px; }
.re-lesson .re-curriculum-list .re-cur-title {
	flex: 1; min-width: 0;
	font-size: 13px; line-height: 1.35;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 강의 번호는 제목과 완전히 동일한 스타일(폰트·색·굵기)을 상속 — 별도 스타일 없음 */
.re-lesson .re-curriculum-list .re-cur-time {
	flex-shrink: 0;
	font-family: var(--re-font); font-size: 11px;
	color: var(--re-faint3);
}
/* 완료한 강의: 흐린 글씨 */
.re-lesson .re-curriculum-list .re-cur-lesson.is-done .re-cur-title { color: var(--re-muted); }
/* 현재 강의: 강조 */
.re-lesson .re-curriculum-list .re-cur-lesson.is-current {
	background: var(--re-green-50);
	border-radius: var(--re-r-10);
	margin: 0 7px;
	padding: 11px 12px;
}
.re-lesson .re-curriculum-list .re-cur-lesson.is-current .re-cur-title { font-weight: 700; color: var(--re-ink); }
.re-lesson .re-curriculum-list .re-cur-lesson.is-current .re-cur-time { color: var(--re-green); }

/* ── 반응형 ────────────────────────────────────────────────────────── */
@media screen and (max-width: 960px) {
	.re-lesson { padding: 24px 16px 64px; }
	.re-lesson .re-grid { grid-template-columns: 1fr; gap: 24px; }
	.re-lesson .re-side { position: static; top: auto; }
	.re-lesson .re-curriculum-list { max-height: 60vh; }
	.re-lesson .re-head { flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: 20px; }
	.re-lesson .re-title { font-size: clamp(24px, 6vw, 32px); }
	.re-lesson .re-nav { align-self: stretch; }
	.re-lesson .re-nav .next-prev-button { flex: 1; justify-content: center; }
}
@media screen and (max-width: 600px) {
	.re-lesson .re-tabs { gap: 20px; }
	.re-lesson .my-download-item { flex-wrap: wrap; }
	.re-lesson .my-download-item-col-3 { width: 100%; }
	.re-lesson .my-download-login-required,
	.re-lesson .my-download-item-button { width: 100%; justify-content: center; }
	.re-lesson .desktop-ad-button-box { flex-wrap: wrap; }
}

/* ════════════════════ v3 시안A — 신규 컴포넌트 ════════════════════ */

/* 제목 행 (영상 아래) */
.re-lesson .re-title-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; }
.re-lesson .re-tt { min-width: 0; }
.re-lesson .re-crumb { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; flex-wrap: nowrap; }
.re-lesson .re-crumb-ch { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--re-green); white-space: nowrap; }
.re-lesson .re-crumb-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--re-num); flex-shrink: 0; }
.re-lesson .re-crumb-src { font-size: 12px; color: var(--re-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.re-lesson .re-crumb-ls { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--re-muted); white-space: nowrap; }
.re-lesson .re-crumb-ch + .re-crumb-ls::before { content: "›"; margin-right: 9px; color: var(--re-num); font-weight: 400; }
.re-lesson .re-title-row .re-title { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: -.03em; line-height: 1.3; }
.re-lesson .re-dl-file { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; background: var(--re-card); border: 1px solid var(--re-line-btn); color: var(--re-ink); font-size: 13px; font-weight: 600; border-radius: var(--re-r-10); padding: 10px 15px; cursor: pointer; font-family: inherit; }
.re-lesson .re-dl-file:hover { background: #FAFAF9; }

/* 그룹 라벨 (카드 위 · 헤어라인 없음) */
.re-lesson .re-grp-l { font-size: 13px; font-weight: 600; color: var(--re-muted); margin: 0 0 14px; }
.re-lesson .re-grp-l.gap { margin-top: 32px; }

/* 5-1. 이 강의를 보고 나면 (학습 목표 → 그린 체크 원) — .ulcheck-list 기반 오버라이드 */
.re-lesson .re-goals li { padding-left: 34px; min-height: 22px; }
.re-lesson .re-goals li::before {
	content: ""; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; font-size: 0;
	background-color: var(--re-goal-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%231E875A' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
	background-position: center; background-repeat: no-repeat;
}
/* 5-1b. 학습 목표 강조(strong) — 옅은 초록 밑줄형 하이라이트 (단순 배경 아님) */
.re-lesson .re-goals strong {
	font-weight: 700;
	background: linear-gradient(to top, rgba(30, 135, 90, .20) 0.36em, transparent 0.36em);
}

/* 5-2. 강의 정보 (카드) */
.re-lesson .re-info-card { background: var(--re-card); border: 1px solid var(--re-line-card); border-radius: var(--re-r-13); overflow: hidden; }
.re-lesson .re-irow { display: flex; align-items: center; gap: 16px; padding: 15px 18px; border-top: 1px solid var(--re-line-row); }
.re-lesson .re-info-card > .re-irow:first-child { border-top: 0; }
.re-lesson .re-ik { width: 84px; flex-shrink: 0; font-size: 13.5px; color: var(--re-muted); }
.re-lesson .re-iv { flex: 1; min-width: 0; font-size: 14px; color: var(--re-ink2); }
/* 교재 페이지: 레이블 1개 + 값 셀에 세션 여러 줄 */
.re-lesson .re-irow-pages { align-items: flex-start; }
.re-lesson .re-irow-pages .re-ik { padding-top: 1px; }
/* 사용 버전 — 항목마다 '안내문 · OS' 인라인, 항목 간 넉넉한 여백 */
.re-lesson .re-irow-ver { align-items: flex-start; }
.re-lesson .re-irow-ver .re-ik { padding-top: 1px; }
.re-lesson .re-irow-ver .re-iv { display: flex; flex-direction: column; gap: 9px; }
.re-lesson .re-ver-item { line-height: 1.5; }
.re-lesson .re-ver-item .re-iv-sub { font-family: var(--re-font); font-size: 12.5px; font-weight: 500; color: var(--re-faint); white-space: nowrap; }
.re-lesson .re-ver-item .re-iv-sub::before { content: "·"; margin: 0 7px; color: var(--re-num); font-weight: 400; }
.re-lesson .re-iv-pages .session-row-container { display: flex; flex-direction: column; gap: 11px; background: none; border: 0; margin: 0; font-size: inherit; }
.re-lesson .re-iv-pages .session-row { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; }
.re-lesson .re-iv-pages .session-type { border: 1px solid var(--re-green-border) !important; border-radius: var(--re-r-6) !important; padding: 2px 7px !important; font-size: 10.5px; }
/* 교재 유형별 색 — 클래스(basic/common/practical)로 관리. 기본(basic=엑셀 기초)은 초록 유지, 나머지만 오버라이드 */
.re-lesson .re-iv-pages .session-type.practical { color: var(--re-type-blue) !important; border-color: var(--re-type-blue-bd) !important; }
.re-lesson .re-iv-pages .session-type.common    { color: var(--re-type-red)  !important; border-color: var(--re-type-red-bd)  !important; }
.re-lesson .re-iv-pages .session-title { flex: 1; min-width: 0; }
.re-lesson .re-iv-pages .session-page { white-space: nowrap; }
.re-lesson .re-iv-sub { font-family: var(--re-font); font-size: 12px; color: var(--re-faint); }
.re-lesson .re-im { font-size: 12.5px; color: var(--re-faint); white-space: nowrap; }
/* 버전 제한 경고 — 사용 버전 값 오른쪽 인라인(노란 경고) */
.re-lesson .re-ver-warn { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; font-size: 11.5px; font-weight: 600; color: var(--re-warn-fg); background: var(--re-warn-bg); border: 1px solid var(--re-warn-border); border-radius: var(--re-r-6); padding: 2px 8px; white-space: nowrap; vertical-align: middle; }
.re-lesson .re-ver-warn i { font-size: 10px; }

/* 보충 강의 탭 (§6) — 3열 카드 그리드 (강의·함수 동일 카드) */
.re-lesson .re-sup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.re-lesson .re-sup-head .re-grp-l { margin: 0; }
.re-lesson .re-sup-count { color: var(--re-faint3); }
.re-lesson .re-sup-all { font-size: 12.5px; font-weight: 600; color: var(--re-muted); text-decoration: none; white-space: nowrap; }
.re-lesson .re-sup-all:hover { color: var(--re-green); }
.re-lesson .re-sup-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 18px; }
.re-lesson .re-sup-row { display: flex; flex-direction: column; text-decoration: none; }
.re-lesson .re-sup-row:hover .re-sup-title { color: var(--re-green); }
.re-lesson .re-sup-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16/9; border-radius: var(--re-r-13); overflow: hidden; background: linear-gradient(135deg, #21303A, #0F171C); background-size: cover; background-position: center; }
.re-lesson .re-sup-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: flex; align-items: center; justify-content: center; }
.re-lesson .re-sup-play::after { content: ""; width: 0; height: 0; border-left: 14px solid var(--re-ink); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 3px; }
.re-lesson .re-sup-dur { position: absolute; right: 8px; bottom: 8px; background: rgba(0, 0, 0, .74); color: #fff; font-size: 11px; font-weight: 600; border-radius: 4px; padding: 2px 6px; }
.re-lesson .re-sup-body { padding-top: 11px; }
.re-lesson .re-sup-title { font-size: 14.5px; font-weight: 600; color: var(--re-ink); line-height: 1.4; transition: color var(--transition-fast, .15s ease); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.re-lesson .re-sup-desc { display: none; }
.re-lesson .re-sup-meta { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; white-space: nowrap; color: var(--re-faint); }
.re-lesson .re-sup-rate { display: flex; align-items: center; gap: 3px; color: var(--re-rate-blue); font-weight: 700; }
.re-lesson .re-sup-dot { color: var(--re-faint3); }
/* 함수 카드 — 강의 카드와 동일 형식, 썸네일 자리에 함수명 타일 */
.re-lesson .re-sup-thumb-fn { display: flex; align-items: center; justify-content: center; padding: 10px; background: linear-gradient(135deg, #234E5C, #102A33); }
.re-lesson .re-sup-fn-name { color: #fff; font-size: 18px; font-weight: 700; letter-spacing: -.01em; text-align: center; line-height: 1.2; word-break: break-word; }
.re-lesson .re-sup-fn-tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; color: var(--re-green); background: var(--re-green-50); border: 1px solid var(--re-green-border); border-radius: var(--re-r-6); padding: 1px 7px; }
@media screen and (max-width: 700px) {
	.re-lesson .re-sup-list { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 460px) {
	.re-lesson .re-sup-list { grid-template-columns: 1fr; gap: 18px; }
}

/* 관련 함수(카드) */
.re-lesson .re-supplement { margin: 2px 0 0; }
.re-lesson .re-funcs .related-function-list-box { margin: 0; }
.re-lesson .re-funcs .function-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.re-lesson .re-funcs .function-item-box { background: var(--re-card); border: 1px solid var(--re-line-card); border-radius: var(--re-r-13); padding: 14px 16px; margin: 0; }
.re-lesson .re-funcs .function-item-title { font-size: 14px; font-weight: 600; color: var(--re-ink); display: flex; align-items: center; gap: 6px; }
.re-lesson .re-funcs .function-item-title a, .re-lesson .re-funcs .function-item-title .fa-external-link-square-alt { color: var(--re-green); }
.re-lesson .re-funcs .function-item-variant { font-size: 12px; color: var(--re-faint); margin-top: 3px; }
.re-lesson .re-funcs .function-item-summary { font-size: 13px; color: var(--re-ink2); line-height: 1.55; margin-top: 6px; }
@media screen and (max-width: 600px) { .re-lesson .re-funcs .function-list { grid-template-columns: 1fr; } }

/* 5-3. 강의 자료 (항상 펼침) */
.re-lesson .re-res { border: 1px solid var(--re-line-quiz); border-radius: var(--re-r-13); overflow: hidden; margin-top: 32px; }
.re-lesson .re-res-head { display: flex; align-items: center; gap: 10px; padding: 13px 15px; }
.re-lesson .re-res-ic { color: var(--re-green); display: flex; }
.re-lesson .re-res-lbl { font-size: 13.5px; font-weight: 600; color: var(--re-ink); }
.re-lesson .re-res-cnt { font-size: 12px; color: var(--re-faint); }
.re-lesson .re-res-list { border-top: 1px solid var(--re-line-row); padding: 4px 15px; }
.re-lesson .re-res-list .my-download-list, .re-lesson .re-res-list .my-download-list-box { margin: 0; padding: 0; list-style: none; }
.re-lesson .re-res-list .re-empty { padding: 14px 2px; }

/* 학습 기록 · 수강평 — 공통 피드 */
.re-lesson .re-feed { display: flex; flex-direction: column; margin-top: 8px; }
.re-lesson .re-entry { display: flex; gap: 12px; padding: 16px 2px; border-bottom: 1px solid var(--re-line-row); }
.re-lesson .re-entry:last-child { border-bottom: 0; }
.re-lesson .re-av { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
.re-lesson .re-entry-b { flex: 1; min-width: 0; }
.re-lesson .re-who { display: flex; align-items: center; gap: 8px; }
.re-lesson .re-who-nm { font-size: 13px; font-weight: 600; color: var(--re-ink); }
.re-lesson .re-who-tm { font-size: 11.5px; color: var(--re-faint); }
.re-lesson .re-entry-txt { font-size: 14px; color: var(--re-ink2); line-height: 1.6; margin-top: 5px; }
.re-lesson .re-react { margin-top: 10px; }
.re-lesson .re-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--re-line-tab); border-radius: var(--re-r-99); padding: 5px 11px; font-size: 12px; color: var(--re-muted); cursor: pointer; }

/* 학습 기록 — 입력 박스 */
.re-lesson .re-log-write { display: flex; align-items: center; gap: 10px; background: var(--re-card); border: 1px solid var(--re-line-card); border-radius: var(--re-r-13); padding: 10px 12px; }
.re-lesson .re-log-write input { flex: 1; border: 0; outline: 0; font-family: inherit; font-size: 14px; color: var(--re-ink); background: none; min-width: 0; }
.re-lesson .re-log-write input::placeholder { color: #AEB3AD; }
.re-lesson .re-log-photo { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--re-line-tab); background: var(--re-card); display: flex; align-items: center; justify-content: center; color: var(--re-muted); cursor: pointer; flex-shrink: 0; }
.re-lesson .re-log-photo svg { display: block; width: 18px; height: 18px; flex-shrink: 0; }
.re-lesson .re-post { background: var(--re-ink); color: #fff; border: 0; font-family: inherit; font-size: 13px; font-weight: 600; border-radius: 9px; padding: 10px 15px; cursor: pointer; flex-shrink: 0; white-space: nowrap; }
.re-lesson .re-log-login { background: var(--re-card); border: 1px solid var(--re-line-card); border-radius: var(--re-r-13); padding: 16px; font-size: 13.5px; color: var(--re-muted); text-align: center; }
.re-lesson .re-log-login a { color: var(--re-green); font-weight: 600; }

/* 수강평 */
.re-lesson .re-rev-gate { display: flex; align-items: flex-start; gap: 9px; background: var(--re-green-50); border: 1px solid var(--re-green-border); border-radius: var(--re-r-13); padding: 12px 14px; font-size: 13px; color: #2C6B4B; line-height: 1.55; }
.re-lesson .re-rev-gate b { font-weight: 700; }
.re-lesson .re-rev-gate svg { flex-shrink: 0; margin-top: 1px; }
.re-lesson .re-rev-summary { display: flex; align-items: center; gap: 18px; padding: 18px 2px; border-bottom: 1px solid var(--re-line-quiz); margin-top: 14px; }
.re-lesson .re-rev-big { font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--re-ink); line-height: 1; }
.re-lesson .re-rev-cnt { font-size: 12.5px; color: var(--re-faint); margin-top: 6px; }
.re-lesson .re-rev-write { margin-left: auto; background: var(--re-ink); color: #fff; border: 0; font-family: inherit; font-size: 13px; font-weight: 600; border-radius: var(--re-r-10); padding: 11px 16px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.re-lesson .re-rev-write:disabled { opacity: .4; cursor: default; }
.re-lesson .re-stars { display: flex; gap: 2px; }

/* 사이드바 — 카드 세로 배치 */
.re-lesson .re-side { display: flex; flex-direction: column; gap: 16px; }

/* 셀프 퀴즈 (사이드바 카드) */
.re-lesson .re-quiz { background: var(--re-card); border: 1px solid var(--re-line-card); border-radius: var(--re-r-13); overflow: hidden; }
.re-lesson .re-quiz.idle { cursor: pointer; }
.re-lesson .re-quiz.idle:hover { border-color: #D6DCD7; background: #FCFDFC; }
.re-lesson .re-q-head { display: flex; align-items: center; gap: 8px; padding: 15px 17px; border-bottom: 1px solid var(--re-line-side); }
.re-lesson .re-quiz.idle .re-q-head { border-bottom: 0; }
.re-lesson .re-q-head-l { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--re-ink); }
.re-lesson .re-q-meta { font-size: 11px; color: var(--re-faint); font-weight: 600; margin-left: auto; }
.re-lesson .re-q-chev { color: var(--re-green); display: none; flex-shrink: 0; }
.re-lesson .re-quiz.idle .re-q-chev { display: block; }
.re-lesson .re-q-body { padding: 17px; }
.re-lesson .re-quiz.idle .re-q-body { padding: 0 17px 16px; }
.re-lesson .re-q-prompt { font-size: 14px; font-weight: 700; color: var(--re-ink); line-height: 1.5; }
.re-lesson .re-q-sub { font-size: 12px; color: var(--re-muted); line-height: 1.55; margin-top: 6px; }
.re-lesson .re-q-prog { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.re-lesson .re-q-ptrack { flex: 1; height: 4px; border-radius: var(--re-r-99); background: var(--re-line-track); overflow: hidden; }
.re-lesson .re-q-pfill { height: 100%; background: var(--re-green); transition: width .25s ease; }
.re-lesson .re-q-pnum { font-size: 11px; color: var(--re-faint); font-family: var(--re-font); }
.re-lesson .re-q-question { font-size: 13.5px; font-weight: 600; color: var(--re-ink); line-height: 1.5; margin-bottom: 13px; }
.re-lesson .re-q-opts { display: flex; flex-direction: column; gap: 8px; }
.re-lesson .re-q-opt { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--re-line-tab); border-radius: var(--re-r-10); background: var(--re-card); cursor: pointer; font-family: inherit; text-align: left; font-size: 13px; color: var(--re-ink2); line-height: 1.4; width: 100%; }
.re-lesson .re-q-mark { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #CFD3CD; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.re-lesson .re-q-opt.sel { border-color: var(--re-green); background: var(--re-green-50); }
.re-lesson .re-q-opt.sel .re-q-mark { border-color: var(--re-green); background: var(--re-green); }
.re-lesson .re-q-opt.correct { border-color: var(--re-green); background: var(--re-q-correct-bg); color: var(--re-ink); }
.re-lesson .re-q-opt.correct .re-q-mark { border-color: var(--re-green); background: var(--re-green); }
.re-lesson .re-q-opt.wrong { border-color: var(--re-q-wrong-bd); background: var(--re-q-wrong-bg); color: var(--re-q-wrong-fg); }
.re-lesson .re-q-opt.wrong .re-q-mark { border-color: var(--re-q-wrong-bd); background: var(--re-q-wrong-bd); }
.re-lesson .re-q-opt.locked { cursor: default; }
.re-lesson .re-q-fb { display: flex; gap: 8px; margin-top: 13px; font-size: 12.5px; line-height: 1.55; }
.re-lesson .re-q-fb.ok { color: var(--re-green); }
.re-lesson .re-q-fb.no { color: #B5573A; }
.re-lesson .re-q-fb b { font-weight: 700; }
.re-lesson .re-q-ex { color: var(--re-muted); font-weight: 400; margin-top: 2px; }
.re-lesson .re-q-btn { margin-top: 14px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--re-ink); color: #fff; font-size: 13px; font-weight: 600; border: 0; border-radius: var(--re-r-10); padding: 11px; cursor: pointer; font-family: inherit; }
.re-lesson .re-q-btn.ghost { background: var(--re-card); border: 1px solid var(--re-line-btn); color: var(--re-ink); }
.re-lesson .re-q-btn:disabled { opacity: .38; cursor: default; }
/* 결과화면 버튼 2개 나란히 ([다시보기] [닫기]) */
.re-lesson .re-q-result-btns { display: flex; gap: 8px; }
.re-lesson .re-q-result-btns .re-q-btn { flex: 1; width: auto; }
.re-lesson .re-q-result { text-align: center; padding: 6px 0 2px; }
.re-lesson .re-q-score { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--re-ink); }
.re-lesson .re-q-score em { color: var(--re-green); font-style: normal; }
.re-lesson .re-q-result-msg { font-size: 12.5px; color: var(--re-muted); line-height: 1.55; margin-top: 6px; }

/* v3 반응형 — 제목 행 */
@media screen and (max-width: 600px) {
	.re-lesson .re-title-row { flex-direction: column; align-items: flex-start; gap: 14px; }
	.re-lesson .re-dl-file { align-self: stretch; justify-content: center; }
}

/* ════════ 댓글 탭 — oppadu-comments(.oc-*) v3 톤 리스타일 (플러그인 기능 유지, CSS만) ════════ */
.re-lesson #oppadu-comments { margin: 0; }
/* 요약 바: 댓글 수는 탭에, 평점요약은 수강평 탭에 → 숨김 */
.re-lesson #oppadu-comments .oc-summary { display: none; }

/* 작성 폼 — 카드/배경 완전 제거, 보더 1겹, 미니멀 */
.re-lesson #oppadu-comments .oc-form-wrap { background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 4px; }
.re-lesson #oppadu-comments .oc-form { background: none; border: 0; border-radius: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 11px 0; margin-bottom: 20px;}
/* 평점 = 입력란 아래 왼쪽 (order 2 + margin-right:auto 로 액션을 오른쪽으로) */
.re-lesson #oppadu-comments .oc-form-rating { order: 2; display: flex; align-items: center; gap: 8px; margin: 0 auto 0 0; font-size: 12px; color: var(--re-muted); }
.re-lesson #oppadu-comments .oc-form-rating label { font-size: 12px; font-weight: 500; color: var(--re-muted); }
.re-lesson #oppadu-comments .oc-form-rating .required { color: var(--re-green); }
/* 입력란 보더는 래퍼(.oc-editor) 한 곳만 — 내부 .oc-editor-area 보더 제거(이중 보더 해결) */
.re-lesson #oppadu-comments .oc-editor { order: 1; flex: 1 0 100%; border: 1px solid var(--re-line-tab); border-radius: var(--re-r-13); overflow: hidden; background: var(--re-card); transition: border-color .15s ease, box-shadow .15s ease; }
.re-lesson #oppadu-comments .oc-editor:focus-within { border-color: var(--re-green); box-shadow: 0 0 0 3px rgba(30, 135, 90, .08); }
.re-lesson #oppadu-comments .oc-editor-area { border: 0; border-radius: 0; box-shadow: none; outline: 0; padding: 13px 15px; min-height: 50px; font-size: 14px; color: var(--re-ink); line-height: 1.6; background: none; }
.re-lesson #oppadu-comments .oc-editor-area:focus { outline: 0; border: 0; box-shadow: none; }
.re-lesson #oppadu-comments .oc-editor-area:empty::before { content: attr(data-placeholder); color: #AEB3AD; }
.re-lesson #oppadu-comments .oc-form-actions { order: 3; display: flex; align-items: center; gap: 8px; margin: 0; }
.re-lesson #oppadu-comments .oc-file-upload { display: inline-flex; align-items: center; gap: 6px; }
/* 파일 첨부 = 카메라 아이콘 + '파일 첨부' 라벨 버튼 */
.re-lesson #oppadu-comments .oc-btn-file { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--re-line-tab); background: var(--re-card); font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--re-muted); cursor: pointer; white-space: nowrap; }
.re-lesson #oppadu-comments .oc-btn-file svg { display: block; width: 16px; height: 16px; flex-shrink: 0; }
.re-lesson #oppadu-comments .oc-btn-file:hover { background: var(--re-hover); }
.re-lesson #oppadu-comments .oc-file-name { font-size: 12px; color: var(--re-ink2); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.re-lesson #oppadu-comments .oc-file-remove { background: none; border: 0; color: var(--re-color-danger, #E0484D); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; }
.re-lesson #oppadu-comments .oc-btn-submit { background: var(--re-ink); color: #fff; border: 0; font-family: inherit; font-size: 13px; font-weight: 600; border-radius: var(--re-r-10); padding: 10px 18px; cursor: pointer; white-space: nowrap; }
.re-lesson #oppadu-comments .oc-btn-submit:hover { background: var(--re-ink3); }
.re-lesson #oppadu-comments .oc-login-notice { background: var(--re-card); border: 1px solid var(--re-line-card); border-radius: var(--re-r-13); padding: 16px; font-size: 13.5px; color: var(--re-muted); text-align: center; }
.re-lesson #oppadu-comments .oc-login-notice a { color: var(--re-green); font-weight: 600; }

/* 댓글 목록 — 피드 (학습기록·수강평과 동일 톤) */
.re-lesson #oppadu-comments .oc-list { margin-top: 8px; }
.re-lesson #oppadu-comments .oc-comment { padding: 16px 2px; border-bottom: 1px solid var(--re-line-row); margin: 0; background: none; }
.re-lesson #oppadu-comments .oc-comment:last-child { border-bottom: 0; }
.re-lesson #oppadu-comments .oc-comment-inner { display: flex; gap: 12px; }
.re-lesson #oppadu-comments .oc-avatar { flex-shrink: 0; }
.re-lesson #oppadu-comments .oc-avatar img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: block; }
.re-lesson #oppadu-comments .oc-comment-body { flex: 1; min-width: 0; }
.re-lesson #oppadu-comments .oc-comment-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.re-lesson #oppadu-comments .oc-author { font-size: 13px; font-weight: 600; color: var(--re-ink); }
.re-lesson #oppadu-comments .oc-badge-author { font-size: 10.5px; font-weight: 700; color: var(--re-green); background: var(--re-green-50); border: 1px solid var(--re-green-border); border-radius: var(--re-r-6); padding: 1px 6px; }
.re-lesson #oppadu-comments .oc-date { font-size: 11.5px; color: var(--re-faint); }
.re-lesson #oppadu-comments .oc-badge-pending { font-size: 10.5px; font-weight: 700; color: var(--re-gold); background: #FBF3E6; border-radius: var(--re-r-6); padding: 1px 6px; }
.re-lesson #oppadu-comments .oc-comment-content { font-size: 14px; color: var(--re-ink2); line-height: 1.6; margin-top: 5px; }
.re-lesson #oppadu-comments .oc-attachment-image img { max-width: 220px; border-radius: var(--re-r-10); border: 1px solid var(--re-line-card); margin-top: 9px; }
.re-lesson #oppadu-comments .oc-attachment-file a { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 12.5px; color: var(--re-ink2); text-decoration: none; border: 1px solid var(--re-line-tab); border-radius: 9px; padding: 7px 11px; }
.re-lesson #oppadu-comments .oc-comment-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.re-lesson #oppadu-comments .oc-comment-actions button { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--re-line-tab); border-radius: var(--re-r-99); padding: 5px 11px; font-size: 12px; color: var(--re-muted); cursor: pointer; background: var(--re-card); font-family: inherit; }
.re-lesson #oppadu-comments .oc-comment-actions button:hover { background: var(--re-hover); }
.re-lesson #oppadu-comments .oc-btn-like.liked { color: #ef4444; border-color: #F2C9C9; }
.re-lesson #oppadu-comments .oc-depth-1, .re-lesson #oppadu-comments .oc-depth-2, .re-lesson #oppadu-comments .oc-depth-3 { margin-left: 32px; }
.re-lesson #oppadu-comments .oc-btn-load-more { display: block; width: 100%; margin-top: 14px; background: var(--re-card); border: 1px solid var(--re-line-btn); border-radius: var(--re-r-10); padding: 11px; font-size: 13px; font-weight: 600; color: var(--re-ink); cursor: pointer; font-family: inherit; }
.re-lesson #oppadu-comments .oc-btn-load-more:hover { background: var(--re-hover); }
.re-lesson #oppadu-comments .oc-no-comments { padding: 24px 2px; font-size: 13.5px; color: var(--re-muted); text-align: center; }

/* 셀프퀴즈 — 이미지 보기 + 복수정답 (class-video) */
.re-q-opt-body { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.re-q-opt-img { max-width:160px; max-height:110px; border-radius:var(--radius-md); display:block; }
.re-q-opt-tx { line-height:1.4; }
.re-q-multi { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:var(--radius-full); background:var(--primary-light,#d1fae5); color:var(--primary-dark,#047857); font-size:11px; font-weight:700; vertical-align:middle; }
.re-q-q-img { display:block; max-width:100%; max-height:220px; border-radius:var(--radius-md); margin:0 0 10px; }