/*
 * PBL 프로젝트 상세(/pbl/{projectNo}) 화면 전용 보정.
 * 재사용 컴포넌트(.detail-shell / .detail-hero / .detail-facts / .detail-cta /
 * .offering-list / .level-gauge)는 theme/components.css 에 있다.
 */

/* 모바일에서는 액션 카드를 표지 바로 아래로 끌어올린다(신청 버튼이 스크롤 아래 묻히지 않도록). */
@media (max-width: 991.98px) {
	.detail-shell__aside {
		order: -1;
	}
}

/* ---------- 미션 여정 ----------
   VOD 커리큘럼은 접었다 펴는 아코디언이지만, PBL 미션은 신청 전에 "전체 여정"을
   한눈에 훑어보는 것이 목적이라 처음부터 모두 펼친 세로 타임라인으로 그린다. */
.mission-track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.mission-track__step {
	position: relative;
	display: flex;
	gap: 0.75rem;
	padding: 1rem;
	background: var(--mili-surface);
	border: 1px solid var(--mili-border);
	border-radius: 0;
}

/* 순번 배지. 타임라인의 마디 역할을 한다. */
.mission-track__seq {
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--mili-radius-pill);
	background: var(--mili-primary-100);
	color: var(--mili-primary-700);
	font-weight: 700;
	font-size: 0.875rem;
}

/* 마디끼리 잇는 세로선. 마지막 미션 뒤에는 그리지 않는다. */
.mission-track__step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 1.875rem;               /* padding(1rem) + 배지 절반(0.875rem) */
	top: 2.75rem;                 /* padding(1rem) + 배지 높이(1.75rem) */
	bottom: -0.75rem;             /* 카드 사이 gap 만큼 아래로 잇는다 */
	width: 2px;
	background: var(--mili-border);
}

.mission-track__body {
	min-width: 0;                 /* 긴 제목이 카드를 밀어내지 않도록 */
	flex: 1 1 auto;
}

.mission-track__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
}

.mission-track__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--mili-ink);
}

.mission-track__flags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

/* 학습목표 — 이 미션을 마치면 무엇을 할 수 있게 되는지. */
.mission-track__goal {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--mili-primary-700);
}

.mission-track__desc {
	margin: 0.375rem 0 0;
	font-size: 0.875rem;
	color: var(--mili-body);
}

.mission-track__meta {
	list-style: none;
	margin: 0.625rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	font-size: 0.8125rem;
	color: var(--mili-muted);
}

/* ---------- 수행 조건과 산출물 ---------- */
.pbl-brief__label {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--mili-muted);
}

.pbl-brief__value {
	margin: 0.25rem 0 1rem;
	font-size: 0.9375rem;
	color: var(--mili-body);
	white-space: pre-line;        /* 시드/운영 데이터의 줄바꿈을 살린다 */
}

/* ---------- 모집·학습 기간 (CTA 카드) ---------- */
/*
 * theme/components.css 가 아니라 여기 두는 이유 — 기수마다 모집·학습 기간이 다른 것은
 * PBL 의 성질이다. VOD 상세 CTA 에는 이 줄이 없다.
 *
 * 바로 위 .detail-cta__learners 가 margin-bottom: 1rem 을 갖고 있어 기간 줄이 붙으면
 * 간격이 두 번 들어간다. 그래서 위쪽 여백은 걷어내고 이 블록이 아래 간격을 갖는다.
 */
.detail-cta__learners:has(+ .detail-cta__periods) {
	margin-bottom: 0.5rem;
}

.detail-cta__periods {
	margin-bottom: 1rem;
}

.detail-cta__period {
	font-size: 0.8125rem;
	color: var(--mili-muted);
}