/**
 * PlanStudy homepage-only styles.
 * front-page.php 에서만 enqueue 된다 (inc/enqueue.php 참고).
 * 섹션 순서/목적은 docs/design-system.md 11장을 따른다.
 */

.ps-section {
	padding-block: var(--ps-space-10);
}

.ps-section__title {
	margin-bottom: var(--ps-space-6);
}

.ps-section__subcopy {
	color: var(--ps-color-text-muted);
	max-width: 640px;
}

/* =========================================================
 * 01 Hero
 * ========================================================= */
.ps-hero {
	padding-block: var(--ps-space-10);
}

.ps-hero__inner {
	display: flex;
	align-items: center;
	gap: var(--ps-space-10);
}

.ps-hero__content {
	flex: 1 1 45%;
	min-width: 0;
}

.ps-hero__dashboard {
	flex: 1 1 55%;
	min-width: 0;
}

.ps-hero__eyebrow {
	display: inline-block;
	color: var(--ps-color-accent);
	font-size: var(--ps-font-size-caption);
	font-weight: var(--ps-font-weight-bold);
	margin-bottom: var(--ps-space-3);
}

.ps-hero__title {
	text-wrap: balance;
}

.ps-hero__body {
	color: var(--ps-color-text-muted);
	font-size: var(--ps-font-size-body);
}

.ps-hero__subcopy {
	font-size: 15px;
	color: var(--ps-color-text-muted);
	margin-top: var(--ps-space-2);
}

.ps-hero__cta-group {
	display: flex;
	gap: var(--ps-space-4);
	margin-block: var(--ps-space-6);
}

/* 상담전화 CTA/번호 노출(PHASE 1G-F.1 10장) — Coral Primary는 여전히 "무료 학습진단 신청" 1개뿐이다. */
.ps-hero__phone-line {
	margin: 0 0 var(--ps-space-3);
	font-size: var(--ps-font-size-caption);
	color: var(--ps-color-text-muted);
}

.ps-hero__phone-line .ps-phone-link {
	color: var(--ps-color-accent);
	font-weight: var(--ps-font-weight-bold);
	text-decoration: none;
}

.ps-hero__secondary-link {
	display: inline-block;
	color: var(--ps-color-primary);
	font-size: 15px;
	font-weight: var(--ps-font-weight-medium);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ps-hero__trust-features {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ps-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Hero dashboard mockup */
.ps-hero__dashboard-panel {
	background-color: var(--ps-color-surface);
}

.ps-hero__dashboard-header {
	font-size: 14px;
	font-weight: var(--ps-font-weight-bold);
	color: var(--ps-color-text-muted);
	margin-bottom: var(--ps-space-4);
}

.ps-hero__dashboard-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ps-space-3);
	margin-bottom: var(--ps-space-4);
}

.ps-hero__stat-card {
	background-color: var(--ps-color-surface-alt);
	border-radius: var(--ps-radius-md);
	padding: var(--ps-space-3) var(--ps-space-4);
}

.ps-hero__stat-label {
	display: block;
	font-size: 12px;
	color: var(--ps-color-text-muted);
	margin-bottom: 4px;
}

.ps-hero__stat-value {
	font-size: 20px;
	font-weight: var(--ps-font-weight-bold);
	color: var(--ps-color-primary);
	font-variant-numeric: tabular-nums;
}

.ps-hero__stat-value--accent { color: var(--ps-color-accent); }
.ps-hero__stat-value--warning { color: #8a5a17; }

.ps-hero__dashboard-planner {
	border-top: 1px solid var(--ps-color-border);
	padding-top: var(--ps-space-4);
	margin-bottom: var(--ps-space-4);
}

.ps-hero__planner-row {
	display: flex;
	align-items: center;
	gap: var(--ps-space-2);
	font-size: 13px;
	padding-block: var(--ps-space-1);
}

.ps-hero__planner-day {
	width: 28px;
	flex: none;
	font-weight: var(--ps-font-weight-bold);
	color: var(--ps-color-text-muted);
}

.ps-hero__planner-tag {
	font-size: 11px;
	font-weight: var(--ps-font-weight-bold);
	color: #fff;
	background-color: var(--ps-color-primary);
	border-radius: var(--ps-radius-pill);
	padding: 2px var(--ps-space-2);
	flex: none;
}

.ps-hero__planner-task {
	color: var(--ps-color-text-muted);
	min-width: 0;
}

.ps-hero__dashboard-disclaimer {
	font-size: 12px;
	color: var(--ps-color-text-muted);
	margin: 0;
	padding-top: var(--ps-space-3);
	border-top: 1px dashed var(--ps-color-border);
}

/* =========================================================
 * 02 기존 과외만으로 부족한 이유
 * ========================================================= */
.ps-problem__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ps-space-5);
	margin-top: var(--ps-space-6);
}

.ps-problem__card {
	text-align: left;
}

.ps-problem__icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--ps-color-alert-tint);
	color: #a53333;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--ps-space-3);
}

.ps-problem__text {
	font-size: 15px;
	margin: 0;
}

/* =========================================================
 * 03 과목수업이 기본
 * ========================================================= */
.ps-subject-first {
	background-color: var(--ps-color-surface);
}

.ps-subject-first__inner {
	text-align: center;
}

.ps-subject-first__title {
	max-width: 640px;
	margin-inline: auto;
}

.ps-subject-first__body {
	max-width: 640px;
	margin: 0 auto var(--ps-space-8);
	color: var(--ps-color-text-muted);
}

.ps-subject-first__diagram {
	display: flex;
	gap: var(--ps-space-2);
	max-width: 720px;
	margin: 0 auto;
}

.ps-subject-first__segment {
	border-radius: var(--ps-radius-md);
	padding: var(--ps-space-5) var(--ps-space-3);
	color: #fff;
	font-weight: var(--ps-font-weight-bold);
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.ps-subject-first__segment--primary {
	flex: 3;
	background-color: var(--ps-color-primary);
	font-size: 16px;
}

.ps-subject-first__segment--secondary {
	flex: 2;
	background-color: var(--ps-color-primary-secondary);
}

.ps-subject-first__segment--tertiary {
	flex: 1;
	background-color: var(--ps-color-accent);
}

/* =========================================================
 * 04 과목별 1:1 과외
 * ========================================================= */
.ps-subjects__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ps-space-5);
}

.ps-subjects__grid > :nth-child(4),
.ps-subjects__grid > :nth-child(5) {
	grid-column: span 1;
}

/* Desktop 3+2 배열: 4,5번 카드를 2,4열에 걸쳐 중앙에 가깝게 배치 */
@media (min-width: 1025px) {
	.ps-subjects__grid {
		grid-template-columns: repeat(6, 1fr);
	}

	.ps-subjects__grid > :nth-child(1) { grid-column: 1 / 3; }
	.ps-subjects__grid > :nth-child(2) { grid-column: 3 / 5; }
	.ps-subjects__grid > :nth-child(3) { grid-column: 5 / 7; }
	.ps-subjects__grid > :nth-child(4) { grid-column: 2 / 4; }
	.ps-subjects__grid > :nth-child(5) { grid-column: 4 / 6; }
}

/* =========================================================
 * 05 관리형 과외 시스템
 * ========================================================= */
.ps-management-cycle {
	display: flex;
	align-items: stretch;
	gap: var(--ps-space-3);
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ps-management-cycle__step {
	flex: 1 1 140px;
	background-color: var(--ps-color-surface);
	border: 1px solid var(--ps-color-border);
	border-radius: var(--ps-radius-lg);
	padding: var(--ps-space-4);
	text-align: center;
	position: relative;
}

.ps-management-cycle__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: var(--ps-color-primary);
	color: #fff;
	font-size: 13px;
	font-weight: var(--ps-font-weight-bold);
	margin-bottom: var(--ps-space-2);
}

.ps-management-cycle__label {
	font-size: 14px;
	font-weight: var(--ps-font-weight-bold);
	margin: 0;
}

/* 화살표는 border 만으로 최소한으로 표현한다 (과도한 그래픽 금지) */
.ps-management-cycle__step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 50%;
	right: calc(-1 * var(--ps-space-3) - 1px);
	transform: translateY(-50%);
	width: var(--ps-space-3);
	height: 2px;
	background-color: var(--ps-color-border);
}

/* =========================================================
 * 06 실제 주간 학습관리 예시
 * ========================================================= */
.ps-weekly-management__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ps-space-5);
	margin-bottom: var(--ps-space-6);
}

.ps-weekly-example {
	margin-bottom: var(--ps-space-6);
}

.ps-weekly-example__title {
	font-size: 16px;
	margin-bottom: var(--ps-space-4);
}

.ps-weekly-example__rows {
	display: flex;
	flex-direction: column;
	gap: var(--ps-space-3);
}

.ps-weekly-example__row {
	display: flex;
	align-items: center;
	gap: var(--ps-space-3);
}

.ps-weekly-example__label {
	width: 96px;
	flex: none;
	font-size: 13px;
	color: var(--ps-color-text-muted);
}

.ps-weekly-example__track {
	flex: 1;
	min-width: 0;
}

.ps-weekly-example__value {
	width: 110px;
	flex: none;
	text-align: right;
	font-size: 13px;
	font-weight: var(--ps-font-weight-bold);
	font-variant-numeric: tabular-nums;
}

.ps-weekly-management__disclaimer {
	font-size: var(--ps-font-size-caption);
	color: var(--ps-color-text-muted);
}

/* =========================================================
 * 07 학년별 관리
 * ========================================================= */
.ps-grades__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ps-space-5);
}

.ps-grades__card-title {
	font-size: 18px;
	margin-bottom: var(--ps-space-3);
}

.ps-grades__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ps-space-2);
	font-size: 14px;
	color: var(--ps-color-text-muted);
}

.ps-grades__list li::before {
	content: '·';
	color: var(--ps-color-accent);
	margin-right: var(--ps-space-2);
	font-weight: var(--ps-font-weight-bold);
}

/* =========================================================
 * 08 자기주도 학습코칭
 * ========================================================= */
.ps-self-directed {
	background-color: var(--ps-color-surface);
}

.ps-self-directed__layout {
	display: flex;
	gap: var(--ps-space-10);
	align-items: flex-start;
}

.ps-self-directed__text {
	flex: 1 1 50%;
	min-width: 0;
}

.ps-self-directed__report {
	flex: 1 1 50%;
	min-width: 0;
}

.ps-self-directed__cycle {
	list-style: none;
	margin: var(--ps-space-5) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ps-space-2);
}

.ps-self-directed__cycle li {
	font-size: 13px;
	font-weight: var(--ps-font-weight-medium);
	background-color: var(--ps-color-accent-tint);
	color: var(--ps-color-accent);
	border-radius: var(--ps-radius-pill);
	padding: var(--ps-space-1) var(--ps-space-3);
}

/* =========================================================
 * 09 진로·입시 방향 코칭
 * ========================================================= */
.ps-career-admission__layout {
	display: flex;
	gap: var(--ps-space-10);
	align-items: flex-start;
}

.ps-career-admission__text {
	flex: 1 1 55%;
	min-width: 0;
}

.ps-career-admission__visual {
	flex: 1 1 45%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ps-space-5);
}

/* =========================================================
 * 10 지역별 관리형과외
 * ========================================================= */
.ps-regions__note {
	color: var(--ps-color-text-muted);
	margin-bottom: var(--ps-space-6);
}

.ps-regions__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ps-space-4);
}

.ps-region-card__sample-tag {
	display: block;
	font-size: 11px;
	color: var(--ps-color-text-muted);
	margin-top: var(--ps-space-1);
}

/* =========================================================
 * 11 무료 학습진단
 * ========================================================= */
.ps-diagnosis__layout {
	display: flex;
	gap: var(--ps-space-10);
	align-items: center;
}

.ps-diagnosis__intro {
	flex: 1 1 45%;
	min-width: 0;
}

.ps-diagnosis__card {
	flex: 1 1 55%;
	min-width: 0;
}

/* 바로 통화를 원하는 사용자를 위한 보조 tel 링크(PHASE 1G-F.1 12장) — Form submit CTA와 경쟁하지 않도록 작은 보조 텍스트로만 둔다. */
.ps-diagnosis__phone-note {
	margin-top: var(--ps-space-3);
	font-size: var(--ps-font-size-caption);
	color: var(--ps-color-text-muted);
}

.ps-diagnosis__phone-note .ps-phone-link {
	color: var(--ps-color-accent);
	font-weight: var(--ps-font-weight-bold);
	text-decoration: none;
}

/*
 * 실제 Form 마크업(PHASE 1G-D). honeypot은 화면에서 완전히 가린다(봇만 채움 —
 * aria-hidden 부모 + tabindex=-1 입력으로 스크린리더/키보드 탐색에서도 제외됨).
 */
.ps-diagnosis-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ps-diagnosis-form__submit {
	width: 100%;
	justify-content: center;
}

.ps-diagnosis-form__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.ps-diagnosis-form__gate-note {
	text-align: center;
}

/* =========================================================
 * 12 상담 CTA
 * ========================================================= */
.ps-final-cta {
	text-align: center;
}

.ps-final-cta__title {
	max-width: 560px;
	margin: 0 auto var(--ps-space-6);
	text-wrap: balance;
}

/* PHASE 1G-F.1 — 무료 학습진단 신청 + 상담전화 두 경로를 함께 제공한다. */
.ps-final-cta__actions {
	display: inline-flex;
	gap: var(--ps-space-4);
}

.ps-final-cta__phone-line {
	margin: var(--ps-space-4) 0 0;
	font-size: var(--ps-font-size-caption);
	color: var(--ps-color-text-muted);
}

.ps-final-cta__phone-line .ps-phone-link {
	color: var(--ps-color-accent);
	font-weight: var(--ps-font-weight-bold);
	text-decoration: none;
}