@charset "utf-8";

/* ---------------------------------------------------------------------------
 * UI-PC1001M — 학습자 메인 전용 【TASK-UI15】
 *
 * 설계 정본 — deliverables/05-화면설계/메인화면-설계.md
 *
 * ⚠️ 값은 --krds-* 토큰만 쓴다. 색·간격 하드코딩과 !important 금지 (절대 규칙 6).
 * ⚠️ 모바일 우선 — min-width 로만 올려 쌓는다. 경계값은 480·768·1024·1440 뿐 (S50 §2).
 * ⚠️ 이 파일은 frontMain.jsp 가 직접 싣는다. 공통 CSS 뒤에 온다(화면 전용 = L6).
 *    먼저 실린 front/common.css 의 .front-main__* 규칙을 이어받는다.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------- ③ 히어로 */

/* 이미지가 폭을 넘지 않게 — 320px 가로 스크롤의 가장 흔한 원인 (S50 §5.1) */
.front-main__visual img {
	max-width: 100%;
	height: auto;
	border-radius: var(--krds-radius-medium1);
}

/*
 * IMG-M01 자리 — 운영자가 비주얼 배너를 한 장도 등록하지 않았을 때의 기본 바탕.
 * **장식**이라 JSP 에서 aria-hidden 을 건다. 그림이 정해지면 이 상자 안에 넣는다.
 * aspect-ratio 로 잡아 두므로 320px 에서도 폭에 맞춰 줄어든다.
 */
.front-main__visual-slot {
	aspect-ratio: 16 / 9;
	max-width: 100%;
	border: var(--krds-light-border-width-variable-regular) dashed var(--krds-light-color-border-gray);
	border-radius: var(--krds-radius-medium1);
	background-color: var(--krds-light-color-surface-gray-subtler);
}

/* 계정 안내 — 학습(LMS)이 아니라 계정 상태와 다음 행동만 담는다 */
.front-main__account {
	border: var(--krds-light-border-width-variable-regular) solid var(--krds-light-color-border-gray);
	border-radius: var(--krds-radius-medium1);
	padding: var(--krds-padding-6);
	display: flex;
	flex-direction: column;
	gap: var(--krds-gap-4);
}

.front-main__account-title {
	font-size: var(--krds-pc-font-size-heading-xsmall);
	font-weight: var(--krds-font-weight-bold);
	margin: 0;
}

.front-main__account-desc {
	margin: 0;
	font-size: var(--krds-pc-font-size-body-small);
	color: var(--krds-light-color-text-subtle);
}

.front-main__account-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--krds-gap-3);
	margin-top: auto;
}

/* -------------------------------------------------------------- ④ 바로가기 */

/*
 * 목록으로 바꿨다 — 보조기술이 "항목 6개"를 먼저 알려 준다.
 * 열 수는 front/common.css 가 정한다(XS 2 · MD 3 · LG 6).
 * 칸이 5개(로그인)면 마지막 칸이 비는데, 그것이 맞다 — 줄을 다시 나누면 위치가 흔들린다.
 */
.front-main__quick {
	list-style: none;
	margin: 0;
	padding: 0;
}

.front-main__quick > li {
	display: flex;
}

.front-main__quick > li > a {
	width: 100%;
}

/* ------------------------------------------------------------ ⑥ 이용 안내 */

.front-main__guide-desc {
	margin: 0 0 var(--krds-gap-5);
	font-size: var(--krds-pc-font-size-body-small);
	color: var(--krds-light-color-text-subtle);
}

.front-main__guide {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--krds-gap-4);
}

@media (min-width: 768px) {
	.front-main__guide {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.front-main__guide-step {
	border: var(--krds-light-border-width-variable-regular) solid var(--krds-light-color-border-gray);
	border-radius: var(--krds-radius-medium1);
	padding: var(--krds-padding-5);
	display: flex;
	flex-direction: column;
	gap: var(--krds-gap-2);
}

/* IMG-M02 자리 — 장식. 48×48 고정이라 좁은 화면에서도 줄이지 않는다 */
.front-main__guide-icon {
	width: var(--krds-size-height-7);
	height: var(--krds-size-height-7);
	flex: none;
	border: var(--krds-light-border-width-variable-regular) dashed var(--krds-light-color-border-gray);
	border-radius: var(--krds-radius-max);
	background-color: var(--krds-light-color-surface-gray-subtler);
}

/* 단계 구분은 색이 아니라 이 글자가 진다 (절대 규칙 8 · 5.4.1) */
.front-main__guide-no {
	font-size: var(--krds-pc-font-size-label-small);
	font-weight: var(--krds-font-weight-bold);
	color: var(--krds-light-color-text-subtle);
}

.front-main__guide-title {
	margin: 0;
	font-size: var(--krds-pc-font-size-body-large);
	font-weight: var(--krds-font-weight-bold);
}

/* 카드 전체가 아니라 제목만 링크다 — 링크 이름이 곧 목적지 이름이어야 한다 */
.front-main__guide-title a {
	color: var(--krds-light-color-text-basic);
}

.front-main__guide-text {
	margin: 0;
	font-size: var(--krds-pc-font-size-body-small);
	color: var(--krds-light-color-text-subtle);
}