@charset "utf-8";
.lms-board-layout {
	display: grid;
	grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
	gap: var(--krds-gap-6);
}
.lms-board-main {
	min-width: 0;
}
.lms-learner-side ul {
	display: grid;
	gap: var(--krds-gap-2);
	padding: 0;
	list-style: none;
}
.lms-learner-side button {
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
}
.lms-learner-side [aria-current="page"] {
	font-weight: 700;
	text-decoration: underline;
}
.lms-faq-list {
	margin-block: var(--krds-gap-6);
}
.lms-faq-item {
	border-bottom: 1px solid var(--krds-light-color-border-gray-light);
	padding: var(--krds-padding-4);
}
.lms-faq-item summary {
	cursor: pointer;
}
.lms-faq-answer {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	padding-block: var(--krds-padding-4);
}
@media (max-width: 767px) {
	.lms-board-layout {
		display: block;
	}
	.lms-learner-side ul {
		display: flex;
		flex-wrap: wrap;
	}
}
/* ===========================================================================
 * L5 — 도메인(LMS) 고유
 *
 *   여기 두는 것   이 제품에서만 뜻이 통하는 표시 요소 (S40 §2 의 Q5)
 *                  예: 수강 상태 배지 · 진도 막대 · 수료 표식
 *   두지 않는 것   다른 제품에도 쓸 것 — 그것은 L4 다.
 *                  한 화면에서만 쓰는 것 — 그것은 L6(화면 전용)이다
 *
 *   ⚠️ 접두어는 lms- 다. 마크업은 WEB-INF/tags/lms/ 가 담당한다.
 *   ⚠️ **L6 패턴이 2개 화면에서 복제되면 여기로 승격**한다. 3번째를 기다리지 않는다 (S40 §2).
 *   ⚠️ 상태를 **색으로만** 표현하지 않는다 — 글자·아이콘을 같이 쓴다 (절대 규칙 8).
 *
 * =========================================================================== */

/* ---------------------------------------------------------------------------
 * 카드형 게시물 목록 (LIST_TYPE_CD=CARD) 【D-215】
 *
 *   ⚠️ **KRDS 에 카드 컴포넌트가 없다**(반입본 실측 — .krds-card 계열 0종).
 *      그래서 자체로 만들되 **값은 전부 --krds-* 토큰**이다(절대 규칙 6).
 *   ⚠️ **표가 아니라 목록이다.** 표로 만들면 스크린리더가 없는 열 제목을 읽는다
 *      (게시판-옵션정의 §4). 그래서 ul/li 이고, 클릭 대상은 button 하나다.
 *   ⚠️ **상태를 색으로만 알리지 않는다** — 카드가 알리는 것은 제목·요약·날짜 글자뿐이다.
 * ------------------------------------------------------------------------- */
.lms-post-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: var(--krds-gap-6);
	margin: var(--krds-gap-6) 0;
	padding: 0;
	list-style: none;
}

.lms-post-card {
	border: var(--krds-light-border-width-variable-regular) solid var(--krds-light-color-border-gray-light);
	border-radius: var(--krds-radius-medium2);
	background: var(--krds-light-color-surface-white);
	overflow: hidden;
}

/* 카드 전체가 하나의 누를 것이다 - 제목만 링크면 손가락·마우스 대상이 너무 작다 */
.lms-post-card-link {
	display: flex;
	flex-direction: column;
	gap: var(--krds-gap-2);
	width: 100%;
	padding: var(--krds-padding-5);
	border: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
}

.lms-post-card-link:hover,
.lms-post-card-link:focus-visible {
	background: var(--krds-light-color-surface-gray-subtler);
}

/* 대표 이미지는 비율을 고정한다 - 세로가 제각각이면 격자가 어긋난다 */
.lms-post-card-thumb {
	width: 100%;
	aspect-ratio: 4 / 3;
	margin-bottom: var(--krds-gap-2);
	object-fit: cover;
	border-radius: var(--krds-radius-small1);
}

.lms-post-card-title {
	font-size: var(--krds-pc-font-size-label-large);
	font-weight: var(--krds-font-weight-bold);
	color: var(--krds-light-color-text-bolder);
}

/* 요약은 두 줄까지만 - 길이가 제각각이면 카드 높이가 튄다 */
.lms-post-card-smry {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--krds-light-color-text-subtle);
	font-size: var(--krds-pc-font-size-label-small);
}

.lms-post-card-date {
	color: var(--krds-light-color-text-subtle);
	font-size: var(--krds-pc-font-size-label-small);
}