/*
 * 소개(/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 .sonub-eyebrow {
	font-size: var(--wa-font-size-s);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sonub-accent-ink);
}
.about-hero h1 {
	font-size: calc(clamp(1.75rem, 5vw, 2.75rem) * var(--wa-font-size-scale, 1));
	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(--sonub-accent);
	font-weight: var(--wa-font-weight-bold);
}
.about-hero .page-title-guide,
.about-hero > .sonub-lead {
	max-inline-size: 44rem;
	justify-content: center;
}

/* ── 계열(교육·환경)과 세계관 머리 ───────────────── */
.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(--sonub-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(--sonub-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-principles {
	margin: 0;
	padding: 0;
	list-style: none;
}
.about-principle {
	display: flex;
	align-items: flex-start;
	gap: var(--wa-space-m);
	margin: 0;
	padding: var(--wa-space-l);
	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 > .sonub-icon-tile {
	flex: 0 0 auto;
}
.about-principle > div {
	display: grid;
	gap: var(--wa-space-2xs);
	min-inline-size: 0;
}
.about-principle strong {
	font-size: var(--wa-font-size-m);
	line-height: 1.45;
}
.about-principle small {
	font-size: var(--wa-font-size-s);
	line-height: 1.65;
	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: calc(2.25rem * var(--wa-font-size-scale, 1));
	color: var(--sonub-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 .sonub-actions {
	justify-content: center;
	margin-block-start: var(--wa-space-s);
}

/* 소개 그림 · 여기서 배울 수 있는 것 */
.about-figure {
	max-inline-size: 44rem;
	margin: 0 auto;
}
.about-map-grid {
	display: grid;
	/* 아홉 과목이 넓은 화면에서 3×3 으로 서도록 칸을 넓게 잡는다(4열이면 마지막 줄에 한 장만 남는다) */
	grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
	gap: var(--wa-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}
.about-map-grid > li {
	margin: 0; /* 전역 li 들여쓰기를 지워 카드 묶음이 절 제목과 같은 줄에 선다 */
	min-inline-size: 0;
}
.about-map-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	align-items: start;
	column-gap: var(--wa-space-m);
	row-gap: var(--wa-space-2xs);
	position: relative;
	block-size: 100%;
	box-sizing: border-box;
	padding: var(--wa-space-l);
	padding-inline-end: calc(var(--wa-space-l) + 1.25rem);
	color: inherit;
	text-decoration: none;
}
.about-map-card > .sonub-icon-tile {
	grid-row: 1 / span 2;
}
.about-map-card strong {
	align-self: center;
	font-size: var(--wa-font-size-m);
	line-height: 1.4;
}
.about-map-card small {
	font-size: var(--wa-font-size-s);
	color: var(--wa-color-text-quiet);
	line-height: 1.6;
}
.about-map-go {
	position: absolute;
	inset-block-start: var(--wa-space-l);
	inset-inline-end: var(--wa-space-m);
	font-size: var(--wa-font-size-s);
	color: var(--wa-color-text-quiet);
	transition: color var(--sonub-motion);
}
.about-map-card:hover .about-map-go,
.about-map-card:focus-visible .about-map-go {
	color: var(--sonub-accent);
}
@media (prefers-reduced-motion: reduce) {
	.about-map-go {
		transition: none;
	}
}

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