/* ─────────────────────────────────────────────
 * Lesson 슬라이드 카드 v2 (drafter 가 본문에 inline 삽입)
 *
 * frontend(post-lecture-template) + 어드민 편집 화면 양쪽 동일 적용.
 * `.lec-body` prefix 사용 금지 — 어드민 편집 영역엔 wrapper 없음.
 *
 * 9가지 패턴:
 *   기본:
 *   1) 단순 카드          .lesson-slide                 (제목 + 본문)
 *   2) 그리드 (2~4 cell)   .lesson-slide-grid 안에 .lesson-slide-cell
 *   3) 단계 시퀀스         .lesson-slide-steps 안에 .lesson-slide-step
 *   4) 비교                .lesson-slide-compare 안에 .lesson-slide-compare-item
 *
 *   고급 (v2 신규):
 *   5) 통계/수치           .lesson-slide-stats 안에 .lesson-slide-stat (큰 숫자 + 라벨)
 *   6) 체크리스트          .lesson-slide-check 안에 li (✓ 아이콘)
 *   7) 콜아웃              .lesson-slide-callout (변형: .is-info/.is-success/.is-warn/.is-danger)
 *   8) 타임라인            .lesson-slide-timeline 안에 .lesson-slide-tl-item
 *   9) 인용                .lesson-slide-quote (대형 따옴표 + 출처)
 * ───────────────────────────────────────────── */

/* ── 공통 카드 컨테이너 ── */
.lesson-slide {
	position: relative;
	background: linear-gradient(135deg, var(--surface-100, #F7F6F1) 0%, var(--bg-subtle, #FDFDFB) 100%);
	border: 1px solid var(--surface-200, #EFEDE6);
	border-radius: var(--radius-lg, 16px);
	padding: var(--space-xl, 32px);
	margin: var(--space-xl, 32px) 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.04);
}

/* 좌측 brand 액센트 라인 — 모든 슬라이드 공통 시각 표식 */
.lesson-slide::before {
	content: '';
	position: absolute;
	left: 0;
	top: var(--space-md, 16px);
	bottom: var(--space-md, 16px);
	width: 4px;
	border-radius: 0 4px 4px 0;
	background: linear-gradient(180deg, var(--primary, #217346) 0%, var(--primary-300, #6FA17F) 100%);
}

.lesson-slide-title {
	font-size: 1.25em;
	font-weight: 800;
	color: var(--t-main, #1A1916);
	margin: 0 0 var(--space-lg, 24px);
	letter-spacing: -0.01em;
	display: flex;
	align-items: center;
	gap: var(--space-sm, 8px);
}

/* 제목 앞 작은 사각 점 — 시각 시그니처 */
.lesson-slide-title::before {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	background: var(--primary, #217346);
	flex-shrink: 0;
}

.lesson-slide-body {
	color: var(--t-body, #3A3933);
	line-height: 1.75;
}

.lesson-slide-body > *:last-child {
	margin-bottom: 0;
}

/* ── 2. 그리드 ── */
.lesson-slide-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-md, 16px);
}

.lesson-slide-cell {
	background: #fff;
	border-radius: var(--radius-md, 8px);
	padding: var(--space-lg, 24px) var(--space-md, 16px);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs, 4px);
	border-top: 3px solid var(--primary-300, #6FA17F);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lesson-slide-cell:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 12px 28px rgba(0, 0, 0, 0.08);
}

.lesson-slide-cell > strong:first-child {
	color: var(--primary-dark, #134026);
	font-size: 1em;
	font-weight: 700;
}

.lesson-slide-cell > span,
.lesson-slide-cell > p {
	color: var(--t-body, #3A3933);
	font-size: 0.92em;
	margin: 0;
	line-height: 1.6;
}

/* ── 3. 단계 시퀀스 ── */
.lesson-slide-steps {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md, 16px);
	align-items: stretch;
	counter-reset: slide-step;
}

.lesson-slide-step {
	flex: 1 1 200px;
	background: #fff;
	border-radius: var(--radius-md, 8px);
	padding: var(--space-lg, 24px) var(--space-md, 16px) var(--space-md, 16px);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
	position: relative;
	border-top: 3px solid var(--primary, #217346);
}

.lesson-slide-step::before {
	content: counter(slide-step);
	counter-increment: slide-step;
	position: absolute;
	top: -16px;
	left: var(--space-md, 16px);
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--primary, #217346) 0%, var(--primary-dark, #134026) 100%);
	color: #fff;
	font-weight: 800;
	font-size: 0.9em;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 8px rgba(33, 115, 70, 0.3);
}

.lesson-slide-step strong {
	display: block;
	color: var(--t-main, #1A1916);
	margin-bottom: var(--space-xs, 4px);
	font-weight: 700;
}

.lesson-slide-step span,
.lesson-slide-step p {
	color: var(--t-body, #3A3933);
	font-size: 0.92em;
	margin: 0;
	line-height: 1.6;
}

/* ── 4. 비교 ── */
.lesson-slide-compare {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-md, 16px);
	position: relative;
}

.lesson-slide-compare-item {
	background: #fff;
	border-radius: var(--radius-md, 8px);
	padding: var(--space-lg, 24px);
	border-top: 4px solid var(--primary, #217346);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
}

.lesson-slide-compare-item.is-warn {
	border-top-color: var(--color-warning, #f59e0b);
}

.lesson-slide-compare-item.is-danger {
	border-top-color: var(--color-danger, #ef4444);
}

.lesson-slide-compare-item.is-info {
	border-top-color: var(--color-info, #009DD1);
}

.lesson-slide-compare-item > strong:first-child {
	display: block;
	font-size: 1.1em;
	margin-bottom: var(--space-sm, 8px);
	color: var(--t-main, #1A1916);
	font-weight: 800;
}

.lesson-slide-compare-item > p {
	margin: 0;
	color: var(--t-body, #3A3933);
	line-height: 1.7;
}

/* ── 5. 통계/수치 (v2 신규) ── */
.lesson-slide-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--space-md, 16px);
}

.lesson-slide-stat {
	background: #fff;
	border-radius: var(--radius-md, 8px);
	padding: var(--space-lg, 24px) var(--space-md, 16px);
	text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
	border-bottom: 3px solid var(--primary, #217346);
}

.lesson-slide-stat-value {
	display: block;
	font-size: 2.4em;
	font-weight: 900;
	line-height: 1.1;
	color: var(--primary, #217346);
	letter-spacing: -0.02em;
	margin-bottom: var(--space-xs, 4px);
	background: linear-gradient(135deg, var(--primary, #217346) 0%, var(--primary-dark, #134026) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.lesson-slide-stat-label {
	display: block;
	color: var(--t-muted, #807E73);
	font-size: 0.88em;
	font-weight: 500;
}

/* ── 6. 체크리스트 (v2 신규) ── */
.lesson-slide-check {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--space-sm, 8px);
}

.lesson-slide-check li {
	background: #fff;
	border-radius: var(--radius-md, 8px);
	padding: var(--space-md, 16px) var(--space-md, 16px) var(--space-md, 16px) 48px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	position: relative;
	color: var(--t-body, #3A3933);
	line-height: 1.6;
}

.lesson-slide-check li::before {
	content: '✓';
	position: absolute;
	left: var(--space-md, 16px);
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--primary, #217346);
	color: #fff;
	font-weight: 900;
	font-size: 0.85em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lesson-slide-check li strong {
	color: var(--t-main, #1A1916);
}

/* ── 7. 콜아웃 (v2 신규) ── */
.lesson-slide-callout {
	background: linear-gradient(135deg, var(--primary-50, #ECF2EE) 0%, #fff 100%);
	border-left: 5px solid var(--primary, #217346);
	border-radius: var(--radius-md, 8px);
	padding: var(--space-lg, 24px);
	display: flex;
	gap: var(--space-md, 16px);
	align-items: flex-start;
}

.lesson-slide-callout::before {
	content: 'i';
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--primary, #217346);
	color: #fff;
	font-weight: 900;
	font-style: italic;
	font-family: Georgia, serif;
	font-size: 1.2em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lesson-slide-callout-body {
	flex: 1;
	color: var(--t-body, #3A3933);
	line-height: 1.7;
}

.lesson-slide-callout-body > strong:first-child {
	display: block;
	color: var(--t-main, #1A1916);
	margin-bottom: var(--space-xs, 4px);
	font-size: 1.05em;
}

.lesson-slide-callout.is-info {
	background: linear-gradient(135deg, rgba(0, 157, 209, 0.08) 0%, #fff 100%);
	border-left-color: var(--color-info, #009DD1);
}
.lesson-slide-callout.is-info::before {
	background: var(--color-info, #009DD1);
}

.lesson-slide-callout.is-success {
	background: linear-gradient(135deg, rgba(38, 177, 112, 0.08) 0%, #fff 100%);
	border-left-color: var(--color-success, #26B170);
}
.lesson-slide-callout.is-success::before {
	background: var(--color-success, #26B170);
	content: '✓';
	font-family: inherit;
	font-style: normal;
}

.lesson-slide-callout.is-warn {
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, #fff 100%);
	border-left-color: var(--color-warning, #f59e0b);
}
.lesson-slide-callout.is-warn::before {
	background: var(--color-warning, #f59e0b);
	content: '!';
	font-family: inherit;
	font-style: normal;
}

.lesson-slide-callout.is-danger {
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, #fff 100%);
	border-left-color: var(--color-danger, #ef4444);
}
.lesson-slide-callout.is-danger::before {
	background: var(--color-danger, #ef4444);
	content: '×';
	font-family: inherit;
	font-style: normal;
	font-weight: 700;
}

/* ── 8. 타임라인 (v2 신규) ── */
.lesson-slide-timeline {
	position: relative;
	padding-left: var(--space-xl, 32px);
}

.lesson-slide-timeline::before {
	content: '';
	position: absolute;
	left: 11px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: linear-gradient(180deg, var(--primary, #217346) 0%, var(--primary-300, #6FA17F) 100%);
}

.lesson-slide-tl-item {
	position: relative;
	padding: var(--space-md, 16px) 0 var(--space-md, 16px) var(--space-md, 16px);
}

.lesson-slide-tl-item::before {
	content: '';
	position: absolute;
	left: -27px;
	top: 22px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--primary, #217346);
	border: 3px solid #fff;
	box-shadow: 0 0 0 2px var(--primary, #217346);
}

.lesson-slide-tl-marker {
	display: inline-block;
	font-size: 0.85em;
	color: var(--primary-dark, #134026);
	font-weight: 700;
	background: var(--primary-50, #ECF2EE);
	padding: 2px 10px;
	border-radius: 999px;
	margin-bottom: var(--space-xs, 4px);
}

.lesson-slide-tl-item strong {
	display: block;
	color: var(--t-main, #1A1916);
	margin: var(--space-xs, 4px) 0;
	font-size: 1.05em;
}

.lesson-slide-tl-item p {
	color: var(--t-body, #3A3933);
	line-height: 1.6;
	margin: 0;
}

/* ── 9. 인용 (v2 신규) ── */
.lesson-slide-quote {
	background: linear-gradient(135deg, var(--canvas-warm, #F1EEE5) 0%, var(--surface-100, #F7F6F1) 100%);
	border-radius: var(--radius-lg, 16px);
	padding: var(--space-2xl, 48px) var(--space-xl, 32px);
	position: relative;
	text-align: center;
}

.lesson-slide-quote::before {
	content: '"';
	position: absolute;
	top: -10px;
	left: var(--space-lg, 24px);
	font-family: Georgia, serif;
	font-size: 6em;
	color: var(--primary, #217346);
	line-height: 1;
	opacity: 0.4;
}

.lesson-slide-quote-text {
	font-size: 1.2em;
	font-weight: 500;
	line-height: 1.6;
	color: var(--t-main, #1A1916);
	margin: 0 0 var(--space-md, 16px);
	font-style: italic;
}

.lesson-slide-quote-cite {
	display: block;
	color: var(--t-muted, #807E73);
	font-size: 0.92em;
	font-weight: 600;
}

.lesson-slide-quote-cite::before {
	content: '— ';
}

/* ─────────────────────────────────────────────
 * 모바일 (≤480px)
 * ───────────────────────────────────────────── */
@media (max-width: 480px) {
	.lesson-slide {
		padding: var(--space-lg, 24px) var(--space-md, 16px);
		margin: var(--space-lg, 24px) 0;
	}
	.lesson-slide-title {
		font-size: 1.1em;
	}
	.lesson-slide-step {
		padding-top: var(--space-xl, 32px);
	}
	.lesson-slide-step::before {
		top: -14px;
		width: 28px;
		height: 28px;
	}
	.lesson-slide-stat-value {
		font-size: 2em;
	}
	.lesson-slide-quote {
		padding: var(--space-xl, 32px) var(--space-md, 16px);
	}
	.lesson-slide-quote::before {
		font-size: 4em;
	}
	.lesson-slide-callout {
		padding: var(--space-md, 16px);
	}
}