/*
 * 소개(/about) — 이전 사이트 routes/about/+page.svelte 의 스타일을 옮겼다.
 * 선택자는 .about 아래로 좁힌다(app.css 의 .account 등과 겹치지 않게). 방향이 있는 속성은 논리 속성만 쓴다(ar·ur).
 */

.about {
	max-inline-size: 60rem;
	display: grid;
	gap: var(--wa-space-2xl);
}
.about :is(h2, p) {
	margin: 0;
}

/* ── 히어로 ─────────────────────────────────────── */
.about-hero {
	justify-items: center;
	text-align: center;
	gap: var(--wa-space-m);
}
.about-hero .pes-eyebrow {
	font-size: var(--wa-font-size-s);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pes-accent-ink);
}
.about-hero h1 {
	font-size: clamp(1.75rem, 5vw, 2.75rem);
	line-height: 1.25;
	font-weight: var(--wa-font-weight-semibold);
	letter-spacing: -0.02em;
}
.about-hero h1 strong {
	font-weight: var(--wa-font-weight-bold);
}
.about-letter {
	color: var(--pes-accent);
	font-weight: var(--wa-font-weight-bold);
}
.about-hero .about-lead {
	max-inline-size: 44rem;
	font-size: var(--wa-font-size-l);
	line-height: 1.75;
	color: var(--wa-color-text-normal);
}
.about-hero .about-tagline {
	max-inline-size: 44rem;
	font-weight: var(--wa-font-weight-semibold);
	color: var(--pes-accent-ink);
}

/* ── 계열(교육·환경)과 세계관 머리 ───────────────── */
.about-series,
.about-worldview {
	display: grid;
	gap: var(--wa-space-l);
}
.about-series-head {
	display: grid;
	gap: var(--wa-space-2xs);
}
.about-series-tag {
	font-size: var(--wa-font-size-2xs);
	font-weight: var(--wa-font-weight-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pes-accent-ink);
}
.about-series-head h2 {
	font-size: var(--wa-font-size-xl);
	font-weight: var(--wa-font-weight-bold);
}
.about-series-head p {
	max-inline-size: 65ch;
	line-height: 1.75;
	color: var(--wa-color-text-quiet);
}

/* ── 세 가지 뜻 카드 ───────────────────────────── */
.about-meanings {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: var(--wa-space-m);
}
.about-meaning {
	block-size: 100%;
	box-sizing: border-box;
}
.about-meaning-name {
	display: grid;
	gap: var(--wa-space-3xs);
}
.about-meaning-name strong {
	font-size: var(--wa-font-size-l);
	line-height: 1.4;
}
.about-meaning-name span {
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-semibold);
	color: var(--pes-accent-ink);
}
.about .about-meaning p {
	font-size: var(--wa-font-size-s);
	line-height: 1.65;
}

/* ── 원칙 ───────────────────────────────────────── */
.about-principles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	gap: var(--wa-space-m);
}
.about-principle {
	display: flex;
	align-items: flex-start;
	gap: var(--wa-space-s);
	padding: var(--wa-space-m);
	border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-surface-raised);
}
.about-principle > i {
	flex: 0 0 auto;
	margin-block-start: 0.15rem;
	font-size: 1.35rem;
	color: var(--pes-accent);
}
.about-principle > div {
	display: grid;
	gap: var(--wa-space-3xs);
	min-inline-size: 0;
}
.about-principle small {
	font-size: var(--wa-font-size-s);
	line-height: 1.6;
	color: var(--wa-color-text-quiet);
}

/* ── 첫 번째 목표 ───────────────────────────────── */
.about-goal {
	display: grid;
	justify-items: center;
	gap: var(--wa-space-s);
	padding: var(--wa-space-2xl) var(--wa-space-l);
	border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-l);
	background: linear-gradient(
		135deg,
		var(--wa-color-brand-fill-quiet),
		color-mix(in oklab, var(--wa-color-brand-fill-quiet) 30%, transparent)
	);
	text-align: center;
}
.about-goal .about-goal-icon {
	font-size: 2.25rem;
	color: var(--pes-accent);
}
.about-goal h2 {
	font-size: var(--wa-font-size-xl);
	font-weight: var(--wa-font-weight-bold);
}
.about-goal p {
	max-inline-size: 42rem;
	line-height: 1.75;
}
.about-goal .pes-actions {
	justify-content: center;
	margin-block-start: var(--wa-space-s);
}

@media (max-width: 599px) {
	.about-goal {
		padding: var(--wa-space-xl) var(--wa-space-m);
	}
}