/**
 * PlanStudy responsive adjustments.
 * docs/design-system.md 14장(Mobile Rules) 기준.
 */

/* ---------------------------------------------------------
 * Header: 데스크톱 내비 숨김, 모바일 메뉴 토글 노출
 * --------------------------------------------------------- */
@media (max-width: 1024px) {
	.ps-header__nav {
		display: none;
	}

	.ps-header__menu-toggle {
		display: flex;
	}

	.ps-mobile-nav {
		top: 64px;
	}

	/**
	 * JS가 비활성화되어 있으면(<html> 에 no-js 클래스가 남아있으면) 모바일에서도
	 * 데스크톱 내비게이션 목록을 그대로 노출해 핵심 콘텐츠 접근이 막히지 않게 한다.
	 */
	html.no-js .ps-header__nav {
		display: block;
	}

	html.no-js .ps-header__nav-list {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ps-space-2);
		padding-block: var(--ps-space-3);
	}

	html.no-js .ps-header__menu-toggle {
		display: none;
	}
}

@media (min-width: 1025px) {
	.ps-header__cta {
		display: inline-flex;
	}
}

@media (max-width: 782px) {
	/* 모바일에서는 헤더 CTA/전화 링크를 숨긴다 — 모바일 하단 고정 CTA(무료 학습진단 1개, CLAUDE.md 18장)와 Footer/Diagnosis 섹션의 전화 링크로 대체한다. */
	.ps-header__cta,
	.ps-header__phone {
		display: none;
	}

	/* ---- Hero ---- */
	.ps-hero__inner {
		flex-direction: column;
		gap: var(--ps-space-6);
	}

	.ps-hero__cta-group {
		flex-direction: column;
	}

	.ps-hero__cta-group .ps-button {
		width: 100%;
	}

	/* ---- 12 상담 CTA: 무료 학습진단 + 상담전화 2버튼 모바일 세로 배치 ---- */
	.ps-final-cta__actions {
		flex-direction: column;
		width: 100%;
	}

	.ps-final-cta__actions .ps-button {
		width: 100%;
	}

	.ps-hero__dashboard-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* ---- 02 문제 인식 ---- */
	.ps-problem__grid {
		grid-template-columns: 1fr;
	}

	/* ---- 03 과목수업이 기본: 세로 스택 ---- */
	.ps-subject-first__diagram {
		flex-direction: column;
	}

	/* ---- 04 과목 카드: 정적 2열 (캐러셀 사용 안 함) ---- */
	.ps-subjects__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* ---- 05 관리 사이클: 2열 ---- */
	.ps-management-cycle {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.ps-management-cycle__step::after {
		display: none;
	}

	/* ---- 06 주간 관리 예시 ---- */
	.ps-weekly-management__grid {
		grid-template-columns: 1fr;
	}

	.ps-weekly-example__label {
		width: 72px;
	}

	/* ---- 07 학년별 관리 ---- */
	.ps-grades__grid {
		grid-template-columns: 1fr;
	}

	/* ---- 08 자기주도 / 09 진로입시 / 11 진단: 세로 스택 ---- */
	.ps-self-directed__layout,
	.ps-career-admission__layout,
	.ps-diagnosis__layout {
		flex-direction: column;
	}

	/*
	 * ---- 09 진로입시: visual 영역(내신 관리 + 학습 방향 점검 카드) full-width ----
	 * 부모의 align-items: flex-start가 column 방향에서는 cross-axis(너비) 기준
	 * shrink-to-fit을 유발해, 카드가 왼쪽에 작게 붙고 오른쪽에 빈 공간이 남는
	 * 문제가 있었다(PHASE 1G-H-A.1에서 발견). 이 섹션에서만 stretch로 되돌려
	 * 카드가 사용 가능한 전체 폭을 차지하게 한다 — 다른 섹션(.ps-self-directed__layout
	 * 등)의 align-items는 건드리지 않는다.
	 */
	.ps-career-admission__layout {
		align-items: stretch;
	}

	/* ---- 10 지역 ---- */
	.ps-regions__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 783px) and (max-width: 1024px) {
	/* 과목 카드: Tablet 2+2+1 */
	.ps-subjects__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ps-subjects__grid > :nth-child(5) {
		grid-column: span 2;
		max-width: 50%;
		margin-inline: auto;
	}
}

@media (max-width: 480px) {
	.ps-subjects__grid {
		grid-template-columns: 1fr;
	}

	.ps-regions__grid {
		grid-template-columns: 1fr;
	}
}

/**
 * 모바일 하단 고정 CTA ("무료 학습진단" 1개).
 * 데스크톱에는 표시하지 않는다.
 */
@media (max-width: 782px) {
	.ps-sticky-cta {
		display: flex;
	}

	/* 고정 CTA에 콘텐츠(특히 footer)가 가려지지 않도록 하단 여백을 둔다. */
	.ps-footer {
		padding-bottom: calc(var(--ps-space-10) + 56px + env(safe-area-inset-bottom, 0px));
	}
}