/**
 * PlanStudy shared components.
 * 헤더/푸터/모바일 메뉴/고정 CTA 같은 사이트 공통 컴포넌트와, 홈페이지 전반에서
 * 재사용하는 카드형 컴포넌트(학습관리 카드 등)를 정의한다.
 * 섹션별 레이아웃(그리드 배치 등)은 homepage.css 에 둔다.
 */

/* =========================================================
 * Button
 * ========================================================= */
.ps-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ps-space-2);
	padding: var(--ps-space-3) var(--ps-space-6);
	border-radius: var(--ps-radius-md);
	font-size: var(--ps-font-size-button);
	font-weight: var(--ps-font-weight-bold);
	line-height: 1;
	min-height: 48px;
	text-decoration: none;
	transition: background-color var(--ps-transition-fast), border-color var(--ps-transition-fast), transform var(--ps-transition-fast);
}

.ps-button:hover {
	text-decoration: none;
}

.ps-button--primary {
	background-color: var(--ps-color-primary);
	color: #fff;
}

.ps-button--primary:hover {
	background-color: var(--ps-color-primary-secondary);
}

.ps-button--secondary {
	background-color: transparent;
	color: var(--ps-color-primary);
	border: 2px solid var(--ps-color-primary);
}

.ps-button--secondary:hover {
	background-color: var(--ps-color-primary);
	color: #fff;
}

/**
 * Action 버튼은 conversion CTA 전용이다 (무료 학습진단 신청 / 상담신청).
 * 다른 용도로 사용하지 않는다. docs/design-system.md 2장, 17장 참고.
 */
.ps-button--action {
	background-color: var(--ps-color-action);
	color: #fff;
}

.ps-button--action:hover {
	background-color: #e8653f;
}

@media (hover: hover) {
	.ps-button:hover {
		transform: translateY(-1px);
	}
}

/* =========================================================
 * Card / Badge / Progress / Checklist (일반 유틸)
 * ========================================================= */
.ps-card {
	background-color: var(--ps-color-surface);
	border: 1px solid var(--ps-color-border);
	border-radius: var(--ps-radius-lg);
	box-shadow: var(--ps-shadow-card);
	padding: var(--ps-space-5);
}

.ps-badge {
	display: inline-flex;
	align-items: center;
	padding: var(--ps-space-1) var(--ps-space-3);
	border-radius: var(--ps-radius-pill);
	font-size: var(--ps-font-size-caption);
	font-weight: var(--ps-font-weight-medium);
}

.ps-badge--accent { background-color: var(--ps-color-accent-tint); color: var(--ps-color-accent); }
.ps-badge--warning { background-color: var(--ps-color-warning-tint); color: #8a5a17; }
.ps-badge--alert { background-color: var(--ps-color-alert-tint); color: #a53333; }

.ps-progress-track {
	width: 100%;
	height: 10px;
	background-color: var(--ps-color-surface-alt);
	border-radius: var(--ps-radius-pill);
	overflow: hidden;
}

.ps-progress-fill {
	height: 100%;
	background-color: var(--ps-color-accent);
	border-radius: var(--ps-radius-pill);
	transition: width var(--ps-transition-base);
}

.ps-checklist-item {
	display: flex;
	align-items: center;
	gap: var(--ps-space-3);
	padding: var(--ps-space-2) 0;
	border-bottom: 1px solid var(--ps-color-border);
	font-size: var(--ps-font-size-body-mobile);
}

.ps-checklist-item:last-child {
	border-bottom: none;
}

.ps-checklist-item__check {
	width: 20px;
	height: 20px;
	min-width: 20px;
	border-radius: var(--ps-radius-sm);
	border: 2px solid var(--ps-color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 12px;
}

.ps-checklist-item--done .ps-checklist-item__check {
	background-color: var(--ps-color-accent);
	border-color: var(--ps-color-accent);
}

.ps-checklist-item--done .ps-checklist-item__label {
	color: var(--ps-color-text-muted);
	text-decoration: line-through;
}

/* =========================================================
 * Header
 * ========================================================= */
.ps-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: var(--ps-color-background);
	border-bottom: 1px solid var(--ps-color-border);
}

.ps-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ps-space-4);
	padding-block: var(--ps-space-3);
}

.ps-header__logo {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	color: var(--ps-color-text);
}

.ps-header__logo-kr {
	font-size: 20px;
	font-weight: var(--ps-font-weight-bold);
	color: var(--ps-color-primary);
}

.ps-header__logo-en {
	font-size: 11px;
	font-weight: var(--ps-font-weight-medium);
	color: var(--ps-color-text-muted);
	letter-spacing: 0.04em;
}

.ps-header__nav-list {
	display: flex;
	align-items: center;
	gap: var(--ps-space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ps-header__nav-link {
	font-size: 15px;
	font-weight: var(--ps-font-weight-medium);
	color: var(--ps-color-text);
}

.ps-header__nav-link:hover {
	color: var(--ps-color-accent);
}

.ps-header__nav-link--disabled {
	color: var(--ps-color-text-muted);
	cursor: default;
}

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

.ps-header__cta {
	padding: var(--ps-space-2) var(--ps-space-5);
	min-height: 40px;
}

/* 상담전화(PHASE 1G-F.1 9장) — 전화는 이미지가 아닌 실제 텍스트 tel 링크로 노출한다. */
.ps-header__phone {
	font-size: 14px;
	font-weight: var(--ps-font-weight-bold);
	color: var(--ps-color-primary);
	text-decoration: none;
	white-space: nowrap;
}

.ps-header__phone:hover {
	color: var(--ps-color-accent);
}

.ps-header__menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border-radius: var(--ps-radius-sm);
}

.ps-header__menu-icon,
.ps-header__menu-icon::before,
.ps-header__menu-icon::after {
	display: block;
	width: 22px;
	height: 2px;
	background-color: var(--ps-color-text);
	border-radius: 1px;
}

.ps-header__menu-icon {
	position: relative;
}

.ps-header__menu-icon::before,
.ps-header__menu-icon::after {
	content: '';
	position: absolute;
	left: 0;
}

.ps-header__menu-icon::before { top: -6px; }
.ps-header__menu-icon::after { top: 6px; }

/* =========================================================
 * Mobile nav (전체화면 패널)
 * ========================================================= */
.ps-mobile-nav {
	position: fixed;
	inset: 0;
	top: var(--ps-header-height, 60px);
	background-color: var(--ps-color-background);
	z-index: 49;
	overflow-y: auto;
	padding: var(--ps-space-6) var(--ps-container-gutter);
}

.ps-mobile-nav[hidden] {
	display: none;
}

.ps-mobile-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ps-space-4);
}

.ps-mobile-nav__link {
	display: block;
	font-size: 18px;
	font-weight: var(--ps-font-weight-bold);
	color: var(--ps-color-text);
	padding-block: var(--ps-space-2);
}

.ps-mobile-nav__link--disabled {
	color: var(--ps-color-text-muted);
}

.ps-mobile-nav__cta {
	width: 100%;
	margin-top: var(--ps-space-4);
}

/* =========================================================
 * Footer
 * ========================================================= */
.ps-footer {
	border-top: 1px solid var(--ps-color-border);
	padding-block: var(--ps-space-10);
	margin-top: var(--ps-space-10);
}

.ps-footer__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--ps-space-6);
}

.ps-footer__logo-kr {
	font-weight: var(--ps-font-weight-bold);
	color: var(--ps-color-primary);
	margin-right: var(--ps-space-2);
}

.ps-footer__logo-en {
	font-size: 12px;
	color: var(--ps-color-text-muted);
}

.ps-footer__tagline {
	color: var(--ps-color-text-muted);
	font-size: var(--ps-font-size-caption);
	margin-top: var(--ps-space-2);
}

.ps-footer__phone {
	margin-top: var(--ps-space-3);
}

.ps-footer__phone-link {
	color: var(--ps-color-primary);
	font-weight: var(--ps-font-weight-bold);
	text-decoration: none;
}

.ps-footer__phone-link:hover {
	color: var(--ps-color-accent);
}

.ps-footer__nav-list {
	display: flex;
	gap: var(--ps-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ps-footer__nav-link {
	color: var(--ps-color-primary);
	font-size: var(--ps-font-size-caption);
	font-weight: var(--ps-font-weight-bold);
}

.ps-footer__nav-link--disabled {
	color: var(--ps-color-text-muted);
	font-size: var(--ps-font-size-caption);
	font-weight: var(--ps-font-weight-regular);
}

.ps-footer__copyright {
	width: 100%;
	color: var(--ps-color-text-muted);
	font-size: var(--ps-font-size-caption);
	margin-top: var(--ps-space-6);
	margin-bottom: 0;
}

/* =========================================================
 * Sticky CTA (모바일 전용, responsive.css 에서 표시 제어)
 * ========================================================= */
.ps-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	display: none;
	align-items: center;
	min-height: 56px;
	padding: var(--ps-space-2) var(--ps-container-gutter);
	padding-bottom: calc(var(--ps-space-2) + env(safe-area-inset-bottom, 0px));
	background-color: var(--ps-color-surface);
	border-top: 1px solid var(--ps-color-border);
	box-shadow: var(--ps-shadow-elevated);
}

.ps-sticky-cta__button {
	width: 100%;
}

/*
 * Diagnosis Form이 화면에 보이는 동안 고정 CTA를 숨긴다(PHASE 1G-D 25장).
 * JS(IntersectionObserver)가 토글하는 클래스 — JS가 없으면 이 클래스가 전혀
 * 추가되지 않으므로 기존 모바일 고정 CTA 동작 그대로 유지된다(fail-safe).
 */
.ps-sticky-cta.is-hidden-for-form {
	display: none !important;
}

/* =========================================================
 * Form primitives (재사용 가능한 폼 요소 — docs/design-system.md 8장 기준)
 * ========================================================= */
.ps-form-field {
	margin-bottom: var(--ps-space-5);
}

.ps-form-field:last-of-type {
	margin-bottom: 0;
}

.ps-form-label {
	display: block;
	font-size: var(--ps-font-size-caption);
	font-weight: var(--ps-font-weight-bold);
	color: var(--ps-color-text);
	margin-bottom: var(--ps-space-2);
	padding: 0;
	border: 0;
}

.ps-form-required {
	color: var(--ps-color-alert);
	margin-left: var(--ps-space-1);
}

.ps-form-options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ps-space-2) var(--ps-space-4);
}

/*
 * 희망 과목처럼 체크박스 그룹이 여러 묶음으로 나뉠 때(PHASE 1G-F.1 6장) 묶음
 * 전체(라벨 + 체크박스 행)를 감싸 구분선/여백을 준다. 과도한 박스/색상 없이
 * 얇은 점선 하나로만 구분한다.
 */
.ps-form-subject-group {
	margin-top: var(--ps-space-3);
	padding-top: var(--ps-space-2);
	border-top: 1px dashed var(--ps-color-border);
}

.ps-form-group-label {
	font-size: 12px;
	font-weight: var(--ps-font-weight-bold);
	color: var(--ps-color-text-muted);
	margin: 0 0 var(--ps-space-2);
}

.ps-form-option {
	display: inline-flex;
	align-items: center;
	gap: var(--ps-space-2);
	min-height: 44px;
	font-size: var(--ps-font-size-body-mobile);
	cursor: pointer;
}

.ps-form-option input[type='checkbox'],
.ps-form-option input[type='radio'] {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.ps-form-help {
	font-size: 13px;
	color: var(--ps-color-text-muted);
	margin-top: var(--ps-space-2);
	margin-bottom: 0;
}

.ps-form-error {
	font-size: 13px;
	color: var(--ps-color-alert);
	margin-top: var(--ps-space-2);
	margin-bottom: 0;
}

.ps-form-status {
	border-radius: var(--ps-radius-sm);
	padding: var(--ps-space-3) var(--ps-space-4);
	margin-bottom: var(--ps-space-4);
	font-size: var(--ps-font-size-caption);
}

.ps-form-status--success {
	background-color: var(--ps-color-success-tint);
	color: #1f6b3d;
}

.ps-form-status--error {
	background-color: var(--ps-color-alert-tint);
	color: #9c2f2f;
}

.ps-form-consent {
	background-color: var(--ps-color-surface-alt);
	border-radius: var(--ps-radius-sm);
	padding: var(--ps-space-4);
}

.ps-form-consent__details {
	list-style: disc;
	margin: var(--ps-space-2) 0 0;
	padding-left: var(--ps-space-5);
	font-size: 13px;
	color: var(--ps-color-text-muted);
}

.ps-form-consent__details li {
	margin-bottom: var(--ps-space-1);
}

.ps-form-consent__details li:last-child {
	margin-bottom: 0;
}

.ps-form-consent__policy-link {
	font-weight: var(--ps-font-weight-bold);
	text-decoration: underline;
}

[aria-invalid='true'] {
	border-color: var(--ps-color-alert) !important;
}

/* =========================================================
 * Dashboard 카드 컴포넌트 (template-parts/components/*)
 * ========================================================= */

/* Weekly Planner Card */
.ps-planner-card__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--ps-space-4);
}

.ps-planner-card__title {
	font-size: 16px;
	margin: 0;
}

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

.ps-planner-day {
	text-align: center;
	font-size: 12px;
	color: var(--ps-color-text-muted);
}

.ps-planner-day__dot {
	display: block;
	width: 28px;
	height: 28px;
	line-height: 28px;
	border-radius: 50%;
	margin: 4px auto 0;
	font-weight: var(--ps-font-weight-bold);
	color: var(--ps-color-text);
}

.ps-planner-day--active .ps-planner-day__dot {
	background-color: var(--ps-color-primary);
	color: #fff;
}

.ps-planner-card__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ps-space-2);
}

.ps-planner-card__item {
	display: flex;
	align-items: center;
	gap: var(--ps-space-2);
	padding: var(--ps-space-2) var(--ps-space-3);
	background-color: var(--ps-color-surface-alt);
	border-radius: var(--ps-radius-sm);
	font-size: 13px;
}

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

/* Progress Card */
.ps-progress-card__header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: var(--ps-space-3);
}

.ps-progress-card__label {
	font-size: 14px;
	color: var(--ps-color-text-muted);
}

.ps-progress-card__value {
	font-size: 28px;
	font-weight: var(--ps-font-weight-bold);
	color: var(--ps-color-primary);
	font-variant-numeric: tabular-nums;
}

.ps-progress-card__description {
	font-size: var(--ps-font-size-caption);
	color: var(--ps-color-text-muted);
	margin-top: var(--ps-space-3);
	margin-bottom: 0;
}

/* Homework Checklist */
.ps-homework-checklist__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--ps-space-3);
}

.ps-homework-checklist__title {
	font-size: 16px;
	margin: 0;
}

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

.ps-homework-checklist__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Wrong Answer Card */
.ps-wrong-answer-card__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--ps-space-3);
}

.ps-wrong-answer-card__title {
	font-size: 16px;
	margin: 0;
}

.ps-wrong-answer-card__summary {
	font-size: 14px;
	color: var(--ps-color-text);
	background-color: var(--ps-color-surface-alt);
	border-radius: var(--ps-radius-sm);
	padding: var(--ps-space-3);
	margin-bottom: var(--ps-space-3);
}

.ps-wrong-answer-card__footer {
	font-size: var(--ps-font-size-caption);
	color: var(--ps-color-text-muted);
	display: flex;
	justify-content: space-between;
}

/* Test D-Day Card */
.ps-test-dday-card {
	background-color: var(--ps-color-primary);
	color: #fff;
	border: none;
}

.ps-test-dday-card__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--ps-space-3);
}

.ps-test-dday-card__label {
	display: block;
	font-size: 12px;
	color: #c9d2e3;
	margin-bottom: 2px;
}

.ps-test-dday-card__name {
	font-size: 15px;
	font-weight: var(--ps-font-weight-bold);
}

.ps-test-dday-card__dday {
	font-size: 26px;
	font-weight: var(--ps-font-weight-bold);
	color: var(--ps-color-warning);
	font-variant-numeric: tabular-nums;
}

/* Subject Tutoring Card */
.ps-subject-card {
	text-align: left;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--ps-space-2);
}

.ps-subject-card__icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--ps-color-accent-tint);
	color: var(--ps-color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--ps-font-weight-bold);
	font-size: 16px;
	margin-bottom: var(--ps-space-2);
}

.ps-subject-card__name {
	font-size: 18px;
	margin: 0;
}

.ps-subject-card__lead {
	font-size: 14px;
	color: var(--ps-color-text);
	margin: 0;
}

.ps-subject-card__manage {
	font-size: var(--ps-font-size-caption);
	color: var(--ps-color-text-muted);
	margin: 0;
}

.ps-subject-card__manage strong {
	color: var(--ps-color-accent);
	font-weight: var(--ps-font-weight-bold);
}

/* Grade Management Card */
.ps-grade-card__title {
	font-size: 16px;
	margin-bottom: var(--ps-space-4);
}

.ps-grade-card__row {
	display: flex;
	align-items: center;
	gap: var(--ps-space-3);
	margin-bottom: var(--ps-space-3);
}

.ps-grade-card__row:last-child {
	margin-bottom: 0;
}

.ps-grade-card__subject {
	width: 44px;
	font-size: 13px;
	color: var(--ps-color-text-muted);
	flex: none;
}

.ps-grade-card__track {
	flex: 1;
	height: 8px;
	background-color: var(--ps-color-surface-alt);
	border-radius: var(--ps-radius-pill);
	overflow: hidden;
	min-width: 0;
}

.ps-grade-card__fill {
	height: 100%;
	border-radius: var(--ps-radius-pill);
	background-color: var(--ps-color-accent);
}

.ps-grade-card__score {
	width: 44px;
	text-align: right;
	font-size: 13px;
	font-weight: var(--ps-font-weight-bold);
	flex: none;
}

/* Study Direction Card (PHASE 1G-H-B) */
.ps-study-direction-card__title {
	font-size: 16px;
	margin-bottom: var(--ps-space-4);
}

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

.ps-study-direction-card__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--ps-space-3);
}

.ps-study-direction-card__label {
	font-size: 13px;
	color: var(--ps-color-text-muted);
	flex: none;
}

.ps-study-direction-card__value {
	font-size: 14px;
	font-weight: var(--ps-font-weight-bold);
	color: var(--ps-color-text);
	text-align: right;
}

/* Study Report Card */
.ps-report-card__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--ps-space-3);
}

.ps-report-card__title {
	font-size: 16px;
	margin: 0;
}

.ps-report-card__date {
	font-size: 12px;
	color: var(--ps-color-text-muted);
}

.ps-report-card__quote {
	font-size: 14px;
	line-height: var(--ps-line-height-body);
	color: var(--ps-color-text);
	background-color: var(--ps-color-surface-alt);
	border-radius: var(--ps-radius-sm);
	padding: var(--ps-space-4);
	margin: 0 0 var(--ps-space-3);
}

.ps-report-card__author {
	display: flex;
	align-items: center;
	gap: var(--ps-space-2);
	font-size: 13px;
	color: var(--ps-color-text-muted);
}

.ps-report-card__note {
	display: block;
	font-size: 12px;
	color: var(--ps-color-text-muted);
	margin-top: var(--ps-space-2);
}

/* CTA Card */
.ps-cta-card {
	background-color: var(--ps-color-primary);
	color: #fff;
	border-radius: var(--ps-radius-lg);
	box-shadow: var(--ps-shadow-elevated);
	padding: var(--ps-space-8) var(--ps-space-6);
	text-align: center;
}

.ps-cta-card__eyebrow {
	display: inline-block;
	font-size: var(--ps-font-size-caption);
	font-weight: var(--ps-font-weight-bold);
	color: #a9d8d3;
	margin-bottom: var(--ps-space-3);
}

.ps-cta-card__title {
	font-size: 24px;
	line-height: 1.3;
	margin-bottom: var(--ps-space-6);
	color: #fff;
}

/* Region Card */
.ps-region-card {
	text-align: center;
}

.ps-region-card__name {
	font-size: 16px;
	margin-bottom: var(--ps-space-2);
}

/* =========================================================
 * 일반 고정 페이지 본문 (page.php, PHASE 1G-I.3-A — 개인정보처리방침 등)
 * 과도한 별도 디자인 시스템을 만들지 않고, 가독성에 필요한 최소 스타일만 둔다.
 * ========================================================= */
.ps-post {
	padding-block: var(--ps-space-10);
	max-width: 760px;
	margin-inline: auto;
}

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

.ps-post__content h2 {
	font-size: var(--ps-font-size-h3);
	margin-top: var(--ps-space-8);
	padding-top: var(--ps-space-4);
	border-top: 1px solid var(--ps-color-border);
}

.ps-post__content h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.ps-post__content ul,
.ps-post__content ol {
	margin: 0 0 var(--ps-space-4);
	padding-left: var(--ps-space-5);
}

.ps-post__content li {
	margin-bottom: var(--ps-space-2);
}