@charset "utf-8";
/* ------------------------------------------------------------------
   AEO/GEO 과정 상세 블록 (HP-ET-261015-008)
   교육과정 페이지(.edu-cont, 다크 테마) 안에 들어가는 구조화 콘텐츠.
   디자인 언어는 사이트의 최신 다크 섹션(.indie / .maya)을 그대로 따른다.
     배경 #1d1f22 · 카드 #26282b · 포인트 #08cee8 / #33deff
     유리 카드 rgba(255,255,255,.04) + 흰 테두리 .14 · 시안 글로우
     큰 숫자는 Manrope, 영문 디스플레이는 Codec-Cold
   선택자는 모두 .aeo-course 안으로 한정해 기존 페이지에 영향을 주지 않는다.
   아이콘은 인라인 SVG(stroke=currentColor)라 외부 요청이 없다.
------------------------------------------------------------------ */

/* ── 히어로의 정식 과정명 H1 ─────────────────────────────
   기존 영문 디스플레이 타이틀(.edu-tit h2) 위에 놓인다.
   과정 페이지에 텍스트 h1 이 없어 검색·AI 가 주제를 못 잡던 문제를 고치는 부분이다. */
.edu-tit .aeo-course-h1,
.indie-hero__inner .aeo-course-h1 {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'NEXON Lv2 Gothic Bold', sans-serif;
	font-weight: 800;
	font-size: 24px;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0 0 14px;
	padding: 0;
	word-break: keep-all;
}
.edu-tit .aeo-course-h1::before,
.indie-hero__inner .aeo-course-h1::before {
	content: "";
	width: 28px;
	height: 2px;
	background: linear-gradient(90deg, #08cee8, rgba(8, 206, 232, 0));
	flex: 0 0 auto;
}
@media (max-width: 1024px) {
	.edu-tit .aeo-course-h1, .indie-hero__inner .aeo-course-h1 { font-size: 18px; margin-bottom: 10px; gap: 8px; }
	.edu-tit .aeo-course-h1::before, .indie-hero__inner .aeo-course-h1::before { width: 20px; }
}

/* 히어로 영문 타이틀을 h3 -> h2 로 내리면서(제목 단계 건너뜀 제거)
   edu.css / responsive.css 의 .edu-tit h3 규칙을 그대로 h2 에 옮겨 적는다. 모양은 동일하다. */
.edu-tit h2 {font-size: 100px; font-family: 'Codec-Cold';  padding-top: 0px;letter-spacing:-0.025em; font-weight:900; color:#08cee8; line-height:0.9;text-transform: uppercase; margin:0;}
.edu-tit h2 em{font-family:'Manrope'; font-weight:900; font-size:90px}
@media (max-width:1280px) {
	.edu-tit h2 {font-size: 46px; font-family: 'Codec-Cold';  padding-top: 0px;letter-spacing:-0.025em; font-weight:900; color:#08cee8; line-height:0.9;text-transform: uppercase;}
	.edu-tit h2 em{font-family:'Manrope'; font-weight:900; font-size:46px}
}

/* ── 블록 공통 ─────────────────────────────────────── */
.aeo-course {
	--aeo-bg: var(--indie-bg, #1d1f22);
	--aeo-card: var(--indie-card, #26282b);
	--aeo-point: var(--indie-point, #08cee8);
	--aeo-point2: var(--indie-point2, #33deff);
	--aeo-line: rgba(255, 255, 255, .10);
	--aeo-glass: rgba(255, 255, 255, .04);
	--aeo-gray: var(--indie-gray, #dddddd);
	--aeo-gray2: var(--indie-gray2, #b1b1b1);
	position: relative;
	/* 부모가 밝은 배경이어도 다크 캔버스 유지(edu-cont 없을 때 폴백) — HP-ER-261028-064 */
	background: var(--aeo-bg);
	color: var(--aeo-gray);
	font-family: 'NEXON Lv2 Gothic', sans-serif;
	font-size: 17px;
	line-height: 1.78;
	letter-spacing: -0.01em;
	padding-top: 24px;
}

/* 끊을 곳이 없는 긴 문자열(홈페이지 주소 등)이 칼럼을 밀어 가로로 넘치는 것을 막는다 */
.aeo-course,
.aeo-course * { min-width: 0; }
.aeo-course .aeo-p,
.aeo-course .aeo-list li,
.aeo-course .aeo-facts td,
.aeo-course .aeo-dl dd,
.aeo-course .aeo-faq__body { overflow-wrap: anywhere; }

/* 상단 시안 글로우 — 블록이 시작된다는 신호 */
.aeo-course__glow {
	position: absolute;
	top: -40px;
	left: 50%;
	transform: translateX(-50%);
	width: min(820px, 100%);
	height: 320px;
	pointer-events: none;
	background: radial-gradient(ellipse at 50% 0%, rgba(8, 206, 232, .16) 0%, rgba(8, 206, 232, .05) 38%, rgba(8, 206, 232, 0) 70%);
	z-index: 0;
}
.aeo-course > * { position: relative; z-index: 1; }

/* ── 섹션 리듬 ─────────────────────────────────────── */
.aeo-course .aeo-sec {
	padding: 0;
	margin: 0 0 86px;
}
.aeo-course .aeo-sec:last-of-type { margin-bottom: 0; }

/* 이야기 묶음이 바뀌는 자리(결과 → 증거 → 방법 → 현실 확인 → 마무리)에
   가는 그라데이션 선과 여백을 줘서 "장면이 바뀐다"는 신호를 준다. */
.aeo-course .aeo-sec--facts,
.aeo-course .aeo-sec--turn,
.aeo-course .aeo-sec--faq {
	padding-top: 86px;
	border-top: 1px solid transparent;
	border-image: linear-gradient(90deg, rgba(8, 206, 232, 0), rgba(8, 206, 232, .45), rgba(8, 206, 232, 0)) 1;
}
.aeo-course .aeo-sec--intro { margin-bottom: 0; }

/* 마지막 상담 안내 뒤의 마감 버튼 */
.aeo-course .aeo-cta-wrap--end { margin-top: 26px; }

/* ── 섹션 헤더 ───────────────────────────────────────
   이 페이지의 기존 섹션(.edu-sub-tit)과 같은 리듬으로 맞춘다:
     가운데 정렬 · 시안 강조줄 → 흰 제목 → 회색 설명
   아이콘 배지는 그 위에 얹어 그래픽 요소를 남긴다. */
.aeo-course .aeo-sec__head {
	display: block;
	text-align: center;
	margin-bottom: 30px;
	position: relative;
}
.aeo-course .aeo-sec__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: linear-gradient(145deg, rgba(8, 206, 232, .18), rgba(8, 206, 232, .04));
	border: 1px solid rgba(8, 206, 232, .32);
	box-shadow: 0 0 20px rgba(8, 206, 232, .12);
	color: var(--aeo-point2);
}
.aeo-course .aeo-sec__ico svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* 기존 .edu-sub-tit span 자리(제목 위 시안 한 줄)에 들어가는 번호 */
.aeo-course .aeo-sec__num {
	display: block;
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0.14em;
	color: var(--aeo-point);
	margin-bottom: 10px;
	user-select: none;
}
.aeo-course .aeo-h2 {
	display: block;
	margin: 0;
	padding: 0;
	font-family: 'NEXON Lv2 Gothic Bold', sans-serif;
	font-weight: 800;
	/* 기존 .edu-sub-tit h3 의 실제 렌더값에 맞춘다.
	   그쪽은 28px 를 상속한 h3 에 브라우저 기본 1.17em 이 곱해져 32.76px 가 되고,
	   1280px 이하에서는 17px x 1.17 = 19.89px 가 된다. 분기점도 1280px 로 맞춘다. */
	font-size: 32.76px;
	line-height: 1.4;
	letter-spacing: 0;
	color: #fff;
	text-align: center;
	word-break: keep-all;
}
.aeo-course .aeo-h2--main { font-size: 32.76px; }

@media (max-width: 1280px) {
	.aeo-course .aeo-h2,
	.aeo-course .aeo-h2--main { font-size: 19.89px; }
	.aeo-course .aeo-lead { font-size: 15px; }
}

/* ── 본문 ─────────────────────────────────────────── */
.aeo-course .aeo-p { margin: 0 0 13px; }
.aeo-course .aeo-p:last-child { margin-bottom: 0; }
.aeo-course .aeo-intro { margin: 0 auto 30px; max-width: 880px; }
.aeo-course .aeo-intro .aeo-p { font-size: 18px; color: #fff; line-height: 1.85; }
/* 기존 .edu-sub-tit p 와 같은 성격: 제목 아래 회색 설명 한 덩어리 */
.aeo-course .aeo-lead {
	margin: -14px auto 28px;
	max-width: 860px;
	color: var(--aeo-gray2);
	font-family: 'NEXON Lv2 Gothic Light', 'NEXON Lv2 Gothic', sans-serif;
	font-weight: 300;
	text-align: center;
}
.aeo-course .aeo-lead .aeo-list { display: inline-block; text-align: left; }
.aeo-course .aeo-intro { text-align: center; }
.aeo-course .aeo-cta-wrap { text-align: center; }
.aeo-course .aeo-chips { justify-content: center; }
.aeo-course .aeo-facts .aeo-chips,
.aeo-course .aeo-dl .aeo-chips { justify-content: flex-start; }
.aeo-course .aeo-body { margin-bottom: 22px; }
.aeo-course .aeo-body:last-child,
.aeo-course .aeo-lead:last-child { margin-bottom: 0; }

.aeo-course .aeo-list {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}
.aeo-course .aeo-list li {
	position: relative;
	padding-left: 17px;
	margin-bottom: 8px;
}
.aeo-course .aeo-list li:last-child { margin-bottom: 0; }
.aeo-course .aeo-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.74em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--aeo-point);
	box-shadow: 0 0 8px rgba(8, 206, 232, .6);
}
.aeo-course .aeo-list--sub { margin-top: 18px; font-size: 15px; color: var(--aeo-gray2); }
.aeo-course .aeo-list--sub li::before { background: var(--aeo-gray2); box-shadow: none; width: 4px; height: 4px; top: 0.8em; }

/* ── CTA ──────────────────────────────────────────── */
.aeo-course .aeo-cta-wrap { margin: 0; }
.aeo-course a.aeo-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: auto;
	height: auto;
	padding: 16px 30px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--aeo-point2), var(--aeo-point));
	color: #0c2328;
	font-family: 'NEXON Lv2 Gothic Bold', sans-serif;
	font-weight: 800;
	font-size: 17px;
	line-height: 1.2;
	text-align: center;
	text-indent: 0;
	text-decoration: none;
	white-space: normal;
	overflow: visible;
	margin: 0;
	box-shadow: 0 10px 26px rgba(8, 206, 232, .22);
	transition: transform .18s ease, box-shadow .18s ease;
}
.aeo-course a.aeo-cta i {
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
	flex: 0 0 auto;
}
.aeo-course a.aeo-cta:hover,
.aeo-course a.aeo-cta:focus {
	color: #0c2328;
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(8, 206, 232, .32);
}

/* ── 과정 한눈에 보기 표 ─────────────────────────────── */
.aeo-course .aeo-table-wrap { width: 100%; }
.aeo-course .aeo-facts {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--aeo-glass);
	border: 1px solid var(--aeo-line);
	border-radius: 18px;
	overflow: hidden;
	table-layout: fixed;
	backdrop-filter: blur(10px);
}
.aeo-course .aeo-facts caption {
	caption-side: top;
	text-align: center;
	padding: 0 0 18px;
	color: var(--aeo-gray2);
	font-size: 15px;
	font-family: 'NEXON Lv2 Gothic Light', 'NEXON Lv2 Gothic', sans-serif;
	font-weight: 300;
}
.aeo-course .aeo-facts th,
.aeo-course .aeo-facts td {
	padding: 17px 22px;
	border-bottom: 1px solid var(--aeo-line);
	text-align: left;
	vertical-align: top;
	word-break: keep-all;
}
.aeo-course .aeo-facts tr:last-child th,
.aeo-course .aeo-facts tr:last-child td { border-bottom: 0; }
.aeo-course .aeo-facts th {
	width: 186px;
	color: var(--aeo-point2);
	font-family: 'NEXON Lv2 Gothic Bold', sans-serif;
	font-weight: 800;
	white-space: nowrap;
	position: relative;
	padding-left: 34px;
}
.aeo-course .aeo-facts th::before {
	content: "";
	position: absolute;
	left: 22px;
	top: 1.52em;
	width: 6px;
	height: 6px;
	border-radius: 2px;
	background: var(--aeo-point);
	box-shadow: 0 0 8px rgba(8, 206, 232, .55);
}
.aeo-course .aeo-facts td { color: var(--aeo-gray); }
.aeo-course .aeo-facts .aeo-p { margin: 0; }
.aeo-course .aeo-facts .aeo-list { margin: 0; }

/* ── 칩(쉼표 나열) ────────────────────────────────── */
.aeo-course .aeo-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.aeo-course .aeo-chips li {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid rgba(8, 206, 232, .28);
	background: rgba(8, 206, 232, .07);
	color: var(--aeo-gray);
	font-size: 15px;
	line-height: 1.4;
	white-space: normal;
	word-break: keep-all;
}

/* ── 라벨 + 값 목록 ──────────────────────────────── */
/* 라벨+값 목록. 표(과정 한눈에 보기)만 카드로 두고 여기는 선만 남겨
   회색 패널이 연달아 나오지 않게 한다. */
.aeo-course .aeo-dl {
	margin: 0 0 6px;
	padding: 0;
	display: grid;
	grid-template-columns: 208px 1fr;
	gap: 0;
	border-top: 1px solid rgba(255, 255, 255, .06);
}
.aeo-course .aeo-dl dt {
	padding: 16px 18px 16px 0;
	color: var(--aeo-point2);
	font-family: 'NEXON Lv2 Gothic Bold', sans-serif;
	font-weight: 800;
	font-size: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, .06);
	word-break: keep-all;
}
.aeo-course .aeo-dl dd {
	margin: 0;
	padding: 16px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .06);
	color: var(--aeo-gray);
}
.aeo-course .aeo-dl dd .aeo-p:last-child,
.aeo-course .aeo-dl dd .aeo-list:last-child { margin-bottom: 0; }

/* ── 수치 타일(실적) ─────────────────────────────── */
.aeo-course .aeo-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.aeo-course .aeo-stats li {
	padding: 26px 20px;
	border-radius: 18px;
	border: 1px solid var(--aeo-line);
	background: linear-gradient(160deg, rgba(8, 206, 232, .10), var(--aeo-glass) 60%);
	text-align: center;
}
.aeo-course .aeo-stat__v {
	display: block;
	font-family: 'Manrope', 'NEXON Lv2 Gothic Bold', sans-serif;
	font-weight: 800;
	font-size: 44px;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--aeo-point2);
}
.aeo-course .aeo-stat__v em {
	font-style: normal;
	font-family: 'NEXON Lv2 Gothic Bold', sans-serif;
	font-size: 17px;
	font-weight: 800;
	margin-left: 3px;
	color: var(--aeo-point);
}
.aeo-course .aeo-stat__k {
	display: block;
	margin-top: 12px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--aeo-gray2);
	word-break: keep-all;
}

/* ── 섹션 이미지 ────────────────────────────────
   wide : 가로 전체 배너 (수료 결과물·실습 과제·차별점)
   side : 왼쪽에 띄우고 글이 감싼다 (취업지원·초보자·수업방식·상담)
          글만 이어지는 구간의 단조로움을 끊는 용도다. */
.aeo-course .aeo-shot {
	margin: 0 0 26px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--aeo-glass);
	position: relative;
}
.aeo-course .aeo-shot img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 7;
	object-fit: cover;
}
.aeo-course .aeo-sec--side { overflow: hidden; }   /* float 해제 */

.aeo-course .aeo-shot--side {
	float: left;
	width: 360px;
	max-width: 42%;
	margin: 4px 28px 18px 0;
	border-radius: 12px;
}
.aeo-course .aeo-shot--side img { aspect-ratio: 4 / 3; }
.aeo-course .aeo-sec--side .aeo-dl {
	grid-template-columns: 170px 1fr;
	border-top: 0;
}
.aeo-course .aeo-sec--side .aeo-dl dt { padding-top: 14px; padding-bottom: 14px; }
.aeo-course .aeo-sec--side .aeo-dl dd { padding-top: 14px; padding-bottom: 14px; }

/* ── 교육 시설 사진 ─────────────────────────────────
   기존 커리큘럼 카드(.edu-step .swiper-slide)와 같은 규격:
   모서리 12px · 색 보정 없음 · 캡션은 이미지 아래 10px */
.aeo-course .aeo-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}
.aeo-course .aeo-gallery li { position: relative; }
.aeo-course .aeo-gallery img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 12px;
	margin-bottom: 10px;
}
.aeo-course .aeo-gallery span {
	display: block;
	color: #fff;
	font-family: 'NEXON Lv2 Gothic', sans-serif;
	font-size: 15px;
	line-height: 1.5;
	word-break: keep-all;
}

/* ── 단계 타임라인(커리큘럼) ─────────────────────── */
.aeo-course .aeo-steps {
	counter-reset: aeostep;
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
}
.aeo-course .aeo-steps::before {
	content: "";
	position: absolute;
	left: 19px;
	top: 14px;
	bottom: 14px;
	width: 2px;
	background: linear-gradient(180deg, rgba(8, 206, 232, .55), rgba(8, 206, 232, .08));
}
.aeo-course .aeo-steps li {
	counter-increment: aeostep;
	position: relative;
	padding: 0 0 20px 58px;
	min-height: 40px;
}
.aeo-course .aeo-steps li:last-child { padding-bottom: 0; }
.aeo-course .aeo-steps li::before {
	content: counter(aeostep, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--aeo-bg);
	border: 1px solid rgba(8, 206, 232, .45);
	box-shadow: 0 0 14px rgba(8, 206, 232, .18);
	color: var(--aeo-point2);
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
	font-size: 15px;
	line-height: 1;
}
.aeo-course .aeo-step__h {
	display: block;
	padding-top: 6px;
	margin-bottom: 4px;
	color: #fff;
	font-family: 'NEXON Lv2 Gothic Bold', sans-serif;
	font-weight: 800;
	font-size: 18px;
	line-height: 1.45;
	letter-spacing: -0.015em;
	word-break: keep-all;
}
.aeo-course .aeo-step__t { display: block; }
.aeo-course .aeo-steps li > .aeo-step__t:first-child { padding-top: 7px; }

/* ── FAQ ────────────────────────────────────────── */
.aeo-course .aeo-faq { margin-top: 4px; }
.aeo-course .aeo-faq details {
	background: var(--aeo-glass);
	border: 1px solid var(--aeo-line);
	border-radius: 16px;
	margin-bottom: 12px;
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.aeo-course .aeo-faq details[open] {
	border-color: rgba(8, 206, 232, .40);
	box-shadow: 0 0 22px rgba(8, 206, 232, .10);
}
.aeo-course .aeo-faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px 58px 20px 22px;
	position: relative;
	color: #fff;
	font-family: 'NEXON Lv2 Gothic Bold', sans-serif;
	font-weight: 800;
	font-size: 18px;
	line-height: 1.5;
	word-break: keep-all;
}
.aeo-course .aeo-faq summary::-webkit-details-marker { display: none; }
.aeo-course .aeo-faq__q,
.aeo-course .aeo-faq__a {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
	font-size: 14px;
	line-height: 1;
}
.aeo-course .aeo-faq__q {
	background: linear-gradient(145deg, var(--aeo-point2), var(--aeo-point));
	color: #0c2328;
}
.aeo-course .aeo-faq__a {
	background: rgba(255, 255, 255, .07);
	border: 1px solid var(--aeo-line);
	color: var(--aeo-point2);
	margin-top: 2px;
}
.aeo-course .aeo-faq summary::after {
	content: "";
	position: absolute;
	right: 24px;
	top: 50%;
	width: 11px;
	height: 11px;
	margin-top: -7px;
	border-right: 2px solid var(--aeo-point);
	border-bottom: 2px solid var(--aeo-point);
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.aeo-course .aeo-faq details[open] summary::after {
	transform: rotate(-135deg);
	margin-top: -3px;
}
.aeo-course .aeo-faq summary:focus-visible {
	outline: 2px solid var(--aeo-point);
	outline-offset: -2px;
}
.aeo-course .aeo-faq-a {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 0 22px 22px;
	color: var(--aeo-gray);
}
.aeo-course .aeo-faq__body { flex: 1 1 auto; }
.aeo-course .aeo-faq__body .aeo-p:last-child,
.aeo-course .aeo-faq__body .aeo-list:last-child { margin-bottom: 0; }

/* ── 꼬리말 ─────────────────────────────────────── */
.aeo-course .aeo-foot {
	margin-top: 64px;
	padding-top: 26px;
	border-top: 1px solid var(--aeo-line);
}
.aeo-course .aeo-biz,
.aeo-course .aeo-updated {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--aeo-gray2);
	word-break: keep-all;
}
.aeo-course .aeo-updated { margin-top: 8px; opacity: .8; }

/* ── 모바일 ─────────────────────────────────────── */
@media (max-width: 1024px) {
	.aeo-course { font-size: 16px; padding-top: 12px; }
	.aeo-course .aeo-sec { margin-bottom: 58px; }
	.aeo-course .aeo-sec--facts,
	.aeo-course .aeo-sec--faq { padding-top: 58px; }
	.aeo-course .aeo-sec__head { margin-bottom: 22px; }
	.aeo-course .aeo-sec__num { font-size: 13px; margin-bottom: 8px; }
	.aeo-course .aeo-sec__ico { width: 42px; height: 42px; margin-bottom: 12px; }
	.aeo-course .aeo-sec__ico svg { width: 22px; height: 22px; }
	.aeo-course .aeo-lead { margin: -8px 0 22px; }
	.aeo-course .aeo-intro .aeo-p { font-size: 17px; }

	.aeo-course .aeo-facts th,
	.aeo-course .aeo-facts td { display: block; width: auto; padding: 0 18px; white-space: normal; }
	.aeo-course .aeo-facts th { padding: 18px 18px 7px 34px; border-bottom: 0; }
	.aeo-course .aeo-facts th::before { left: 18px; top: 1.6em; }
	.aeo-course .aeo-facts td { padding-bottom: 18px; }

	.aeo-course .aeo-dl { grid-template-columns: 1fr; border-top: 0; }
	.aeo-course .aeo-dl dt { padding: 18px 0 6px; border-bottom: 0; }
	.aeo-course .aeo-dl dd { padding: 0 0 18px; }

	.aeo-course .aeo-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.aeo-course .aeo-stats li { padding: 20px 12px; border-radius: 14px; }
	.aeo-course .aeo-stat__v { font-size: 32px; }
	.aeo-course .aeo-stat__v em { font-size: 14px; }
	.aeo-course .aeo-stat__k { font-size: 13px; margin-top: 9px; }

	.aeo-course .aeo-steps::before { left: 16px; }
	.aeo-course .aeo-steps li { padding-left: 48px; }
	.aeo-course .aeo-steps li::before { width: 34px; height: 34px; font-size: 13px; }
	.aeo-course .aeo-step__t { padding-top: 4px; }

	.aeo-course .aeo-faq summary { font-size: 16px; padding: 17px 46px 17px 18px; gap: 11px; }
	.aeo-course .aeo-faq summary::after { right: 18px; }
	.aeo-course .aeo-faq-a { padding: 0 18px 18px; gap: 11px; }
	.aeo-course .aeo-faq__q,
	.aeo-course .aeo-faq__a { width: 24px; height: 24px; font-size: 13px; border-radius: 8px; }

	.aeo-course a.aeo-cta { display: flex; width: 100%; box-sizing: border-box; justify-content: center; }
	.aeo-course .aeo-foot { margin-top: 48px; }

	.aeo-course .aeo-shot { border-radius: 14px; margin-bottom: 20px; }
	.aeo-course .aeo-shot img { aspect-ratio: 16 / 9; }
	/* 모바일에서는 띄우지 않고 위에 가로로 눕힌다 */
	.aeo-course .aeo-shot--side { float: none; width: 100%; max-width: 100%; margin: 0 0 20px; }
	.aeo-course .aeo-shot--side img { aspect-ratio: 16 / 9; }
	.aeo-course .aeo-sec--side .aeo-dl { grid-template-columns: 1fr; }
	.aeo-course .aeo-gallery { grid-template-columns: 1fr; gap: 16px; margin-top: 18px; }
	.aeo-course .aeo-gallery img { aspect-ratio: 16 / 9; }
	.aeo-course .aeo-gallery span { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.aeo-course a.aeo-cta,
	.aeo-course .aeo-faq details,
	.aeo-course .aeo-faq summary::after { transition: none; }
}