/*
 * EQOpenLecture.css
 * 공개강좌 허브 전용 스타일
 *
 * - 별도 웹폰트를 지정하지 않고 활성 테마의 font-family를 상속한다.
 * - 2.html의 단정한 타이포그래피와 선형 목록 스타일을 기준으로 한다.
 * - 강좌 구성은 PC / 모바일 모두 가로 3열을 유지한다.
 * - 세부 강좌는 제목 링크를 기준으로 카드 전체를 클릭 영역으로 확장한다.
 */


/* ---------------------------------------------------------
 * Hub
 * ------------------------------------------------------ */

.EQ-OpenLecture-hub{
	max-width:1100px;
	margin:0 auto;
	word-break:keep-all;
}

.EQ-OpenLecture-hub *,
.EQ-OpenLecture-hub *::before,
.EQ-OpenLecture-hub *::after{
	box-sizing:border-box;
}

.EQ-OpenLecture-hub a{
	color:var(--EQOZBlue);
	text-decoration:none;
}

.EQ-OpenLecture-hub a:hover{
	text-decoration:underline;
}

.EQ-OpenLecture-hub a:focus-visible{
	outline:2px solid var(--EQOZRed);
	outline-offset:3px;
}

div#EQStartOfContent{    margin-top: 0px;}

/*
 * EQOpenLecture.css가 공개강좌 허브에서만 로드되는 전제라면
 * 테마 기본 Page Banner를 숨기고 Cover의 h1을 대표 제목으로
 * 사용할 수 있다.
 */

/*
.page-banner-wrapper{
	display:none;
}
*/


/* ---------------------------------------------------------
 * Cover
 * ------------------------------------------------------ */

.EQ-OpenLecture-cover{
	text-align:center;
	padding:28px 24px;
	border:2px solid var(--EQOZYellow);
	border-radius:12px;
}

.EQ-OpenLecture-cover h1{
	margin:0 0 8px;
	font-weight:700;
	line-height:1.35;
}

.EQ-OpenLecture-cover-title-sub{
	margin-bottom:24px;
	color:var(--EQOZDark);
	font-weight:700;
	line-height:1.6;
}

.EQ-OpenLecture-cover-title-sub span{
	font-weight:400;
}

.EQ-OpenLecture-cover-intro{
	max-width:840px;
	margin:0 auto;
	line-height:1.8;
}

h2#EQ-OpenLecture-cover-title{margin: 0;}

/* ---------------------------------------------------------
 * Goal
 * ------------------------------------------------------ */

.EQ-OpenLecture-goal{
	max-width:760px;
	margin:28px auto 0;
	padding-top:18px;
	border-top:1px solid var(--EQOZLight);
	text-align:left;
}

.EQ-OpenLecture-goal > strong{
	display:block;
	margin-bottom:8px;
	color:var(--EQOZRed);
	text-align:center;
}

.EQ-OpenLecture-goal ul{
	margin:0;
	padding-left:1.4em;
	line-height:1.75;
}

.EQ-OpenLecture-goal li{
	margin:.25em 0;
}


/* ---------------------------------------------------------
 * Guide
 * ------------------------------------------------------ */

.EQ-OpenLecture-guide{
	margin:36px 0;
	padding:20px 22px;
	background:var(--EQOZEuroWhite);
	border-left:4px solid var(--EQOZDark);
}

.EQ-OpenLecture-guide h2{
	margin:0 0 12px;
	font-weight:700;
}

.EQ-OpenLecture-guide p{
	margin:8px 0 0;
	line-height:1.75;
}


/* ---------------------------------------------------------
 * Course Map
 * ------------------------------------------------------ */

.EQ-OpenLecture-map{
	margin:44px 0 54px;
}

.EQ-OpenLecture-map > h2{
	margin:0 0 8px;
	padding-bottom:10px;
	border-bottom:2px solid var(--EQOZDark);
	font-weight:700;
}

.EQ-OpenLecture-map > p{
	margin:0 0 22px;
	color:var(--EQOZDark);
	line-height:1.7;
}

.EQ-OpenLecture-map ol{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:12px;
	margin:0;
	padding:0;
	list-style:none;
}

.EQ-OpenLecture-map-item{
	margin:0;
	border:1px solid var(--EQOZLight);
	border-top:4px solid var(--EQOZDark);
}

.EQ-OpenLecture-map-input{
	border-top-color:var(--EQOZBlue);
}

.EQ-OpenLecture-map-processing{
	border-top-color:var(--EQOZDark);
}

.EQ-OpenLecture-map-output{
	border-top-color:var(--EQOZRed);
}

.EQ-OpenLecture-map-item a{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:6px;

	width:100%;
	height:100%;
	min-height:140px;
	padding:18px 10px;

	color:inherit;
	text-align:center;
	text-decoration:none;
}

.EQ-OpenLecture-map-item a:hover{
	background:var(--EQOZEuroWhite);
	text-decoration:none;
}

.EQ-OpenLecture-map-item a:focus-visible{
	outline:2px solid var(--EQOZRed);
	outline-offset:2px;
}

.EQ-OpenLecture-map-item strong{
	font-size:1.18em;
	font-weight:700;
	line-height:1.3;
}

.EQ-OpenLecture-map-item span{
	line-height:1.5;
}

.EQ-OpenLecture-map-item small{
	margin-top:4px;
	color:var(--EQOZDark);
	font-size:.9em;
	font-weight:700;
}


/* ---------------------------------------------------------
 * Stage
 * ------------------------------------------------------ */

.EQ-OpenLecture-stage{
	margin:54px 0 0;
	scroll-margin-top:24px;
}

.EQ-OpenLecture-stage-header{
	margin-bottom:18px;
	padding-left:14px;
	border-left:4px solid var(--EQOZDark);
}

.EQ-OpenLecture-stage-input .EQ-OpenLecture-stage-header{
	border-left-color:var(--EQOZBlue);
}

.EQ-OpenLecture-stage-processing .EQ-OpenLecture-stage-header{
	border-left-color:var(--EQOZDark);
}

.EQ-OpenLecture-stage-output .EQ-OpenLecture-stage-header{
	border-left-color:var(--EQOZRed);
}

.EQ-OpenLecture-stage-step{
	margin:0 0 4px;
	color:var(--EQOZDark);
	font-size:.86em;
	font-weight:700;
	letter-spacing:.04em;
}

.EQ-OpenLecture-stage-header h2{
	margin:0;
	font-weight:700;
	line-height:1.4;
}

.EQ-OpenLecture-stage-header > p:last-child{
	margin:8px 0 0;
	line-height:1.75;
}


/* ---------------------------------------------------------
 * Detailed Lesson List
 * ------------------------------------------------------ */

.EQ-OpenLecture-list{
	margin:0;
	padding:0;
	list-style:none;
	border-top:1px solid var(--EQOZLight);
}

.EQ-OpenLecture-item{
	position:relative;

	display:grid;
	grid-template-columns:1fr;
	gap:8px;

	margin:0;
	padding:20px 12px 22px;

	border-bottom:1px solid var(--EQOZLight);
}

.EQ-OpenLecture-item:hover{
	background:var(--EQOZEuroWhite);
}


/*
 * 실제 HTML의 링크는 강좌 제목에만 존재하지만,
 * ::after를 카드 전체로 확장하여
 * 세부 강좌 칸 전체를 클릭 영역으로 사용한다.
 */

.EQ-OpenLecture-item h3 a::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:1;
}

.EQ-OpenLecture-item:has(h3 a:focus-visible){
	outline:2px solid var(--EQOZRed);
	outline-offset:2px;
}

.EQ-OpenLecture-item h3 a:focus-visible{
	outline:none;
}


/* ---------------------------------------------------------
 * Lesson Heading
 * ------------------------------------------------------ */

.EQ-OpenLecture-item-heading{
	display:grid;
	grid-template-columns:58px 1fr;
	gap:12px;
	align-items:baseline;
}

.EQ-OpenLecture-number{
	font-weight:700;
	color:var(--EQOZBlue);
	white-space:nowrap;
	line-height:1.4;
}

.EQ-OpenLecture-stage-processing .EQ-OpenLecture-number{
	color:var(--EQOZDark);
}

.EQ-OpenLecture-stage-output .EQ-OpenLecture-number{
	color:var(--EQOZRed);
}

.EQ-OpenLecture-item h3{
	margin:0;
	font-weight:700;
	line-height:1.45;
	text-align:left;
}

.EQ-OpenLecture-item h3 a{
	color:inherit;
}


/* ---------------------------------------------------------
 * Lesson Description
 * ------------------------------------------------------ */

.EQ-OpenLecture-description{
	margin:0 0 0 70px;
	line-height:1.7;
}


/* ---------------------------------------------------------
 * Lesson Topics
 * ------------------------------------------------------ */

.EQ-OpenLecture-topics{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:4px 28px;

	margin:4px 0 0 70px;
	padding-left:1.2em;

	color:var(--EQOZDark);
	line-height:1.6;
	font-size:.92em;
}

.EQ-OpenLecture-topics li{
	margin:0;
}


/* ---------------------------------------------------------
 * History
 * ------------------------------------------------------ */

.EQ-OpenLecture-history{
	margin:58px 0 0;
	padding-top:24px;
	border-top:2px solid var(--EQOZDark);
}

.EQ-OpenLecture-history h2{
	margin:0 0 12px;
	font-weight:700;
}

.EQ-OpenLecture-history p{
	line-height:1.75;
}


/* ---------------------------------------------------------
 * Tablet
 * ------------------------------------------------------ */

@media(max-width:760px){

	/*
	 * Course Map은 모바일에서도 3열을 유지한다.
	 */

	.EQ-OpenLecture-map ol{
		grid-template-columns:repeat(3,minmax(0,1fr));
		gap:8px;
	}

	.EQ-OpenLecture-map-item a{
		min-height:130px;
		padding:16px 8px;
	}

	.EQ-OpenLecture-topics{
		grid-template-columns:1fr;
	}

}


/* ---------------------------------------------------------
 * Mobile
 * ------------------------------------------------------ */

@media(max-width:600px){

	.EQ-OpenLecture-cover{
		padding:22px 16px;
	}

	.EQ-OpenLecture-guide{
		padding:18px 16px;
	}


	/* Course Map */

	.EQ-OpenLecture-map{
		margin:36px 0 44px;
	}

	.EQ-OpenLecture-map ol{
		grid-template-columns:repeat(3,minmax(0,1fr));
		gap:6px;
	}

	.EQ-OpenLecture-map-item a{
		min-height:120px;
		padding:14px 5px;
		gap:5px;
	}

	.EQ-OpenLecture-map-item strong{
		font-size:1.05rem;
	}

	.EQ-OpenLecture-map-item span{
		font-size:.82rem;
		line-height:1.4;
	}

	.EQ-OpenLecture-map-item small{
		margin-top:3px;
		font-size:.78rem;
	}


	/* Detailed Lessons */

	.EQ-OpenLecture-item{
		padding:16px 6px 18px;
	}

	.EQ-OpenLecture-item-heading{
		grid-template-columns:50px 1fr;
		gap:8px;
	}

	.EQ-OpenLecture-description,
	.EQ-OpenLecture-topics{
		margin-left:58px;
	}

	.EQ-OpenLecture-item h3{
		font-size:1rem;
	}

	.EQ-OpenLecture-topics{
		font-size:.9rem;
	}

}


/* ---------------------------------------------------------
 * Very Small Mobile
 * ------------------------------------------------------ */

@media(max-width:400px){

	.EQ-OpenLecture-map ol{
		gap:4px;
	}

	.EQ-OpenLecture-map-item a{
		min-height:112px;
		padding:12px 3px;
	}

	.EQ-OpenLecture-map-item strong{
		font-size:1rem;
	}

	.EQ-OpenLecture-map-item span{
		font-size:.76rem;
	}

	.EQ-OpenLecture-map-item small{
		font-size:.72rem;
	}

	.EQ-OpenLecture-item-heading{
		grid-template-columns:46px 1fr;
	}

	.EQ-OpenLecture-description,
	.EQ-OpenLecture-topics{
		margin-left:54px;
	}

}


/* ---------------------------------------------------------
 * Reduced Motion
 * ------------------------------------------------------ */

@media(prefers-reduced-motion:reduce){

	.EQ-OpenLecture-hub *,
	.EQ-OpenLecture-hub *::before,
	.EQ-OpenLecture-hub *::after{
		scroll-behavior:auto !important;
		transition:none !important;
		animation:none !important;
	}

}