/* 여력 소개 사이트. 빌드 도구를 쓰지 않으므로 이 파일 하나가 전부다. */

:root {
	--accent: #4c5d8a; /* 앱 테마의 시드 색과 같다 */
	--bg: #fbfbfd;
	--surface: #ffffff;
	--text: #1c1d21;
	--muted: #61636b;
	--line: #e3e4e9;
}

@media (prefers-color-scheme: dark) {
	:root {
		--accent: #9aabdc;
		--bg: #141519;
		--surface: #1c1d22;
		--text: #e8e9ee;
		--muted: #9a9ca6;
		--line: #2e3038;
	}
}

* { box-sizing: border-box; }

body {
	margin: 0;
	padding: 0 24px;
	background: var(--bg);
	color: var(--text);
	font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
		"Pretendard", "Noto Sans KR", sans-serif;
	font-size: 17px;
	line-height: 1.75;
	word-break: keep-all;
}

.wrap { max-width: 680px; margin: 0 auto; padding: 72px 0 96px; }

header { margin-bottom: 64px; }

.eyebrow {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--muted);
	margin-bottom: 12px;
}

h1 {
	font-size: 40px;
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin: 0 0 16px;
}

h2 {
	font-size: 21px;
	letter-spacing: -0.01em;
	margin: 56px 0 14px;
	padding-top: 28px;
	border-top: 1px solid var(--line);
}

h2 .num {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
	color: var(--accent);
	margin-right: 10px;
	vertical-align: 2px;
}

h3 { font-size: 17px; margin: 32px 0 8px; }

p { margin: 0 0 16px; }

.lead { font-size: 19px; color: var(--muted); }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

ul { padding-left: 20px; margin: 0 0 16px; }
li { margin-bottom: 6px; }

strong { font-weight: 650; }

.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px 22px;
	margin: 24px 0;
}

.card p:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 550; font-size: 13px; letter-spacing: 0.02em; }
td code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12.5px;
	color: var(--muted);
}

.meta { font-size: 15px; color: var(--muted); }

footer {
	margin-top: 80px;
	padding-top: 28px;
	border-top: 1px solid var(--line);
	font-size: 14px;
	color: var(--muted);
}

footer a { color: var(--muted); }
footer nav { margin-bottom: 16px; display: flex; gap: 20px; flex-wrap: wrap; }
footer nav a { text-decoration: none; }
footer nav a:hover { text-decoration: underline; }

@media (max-width: 520px) {
	body { font-size: 16px; padding: 0 20px; }
	.wrap { padding: 48px 0 64px; }
	h1 { font-size: 31px; }
}