/* components.css — Layout Sections & Structural Components
   Mobile-first · Desktop ≥1024px · Companion: controls.css */

/* 1. APP HEADER — sticky 56px, frosted glass, progress bar */
.app-header {
	position: sticky;
	top: 0;
	height: var(--header-h);
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding: 0 var(--s-4);
	background: rgb(255 255 255 / 92%);
	backdrop-filter: saturate(140%) blur(6px);
	border-bottom: 1px solid var(--border);
	z-index: var(--z-header);
}

.app-logo {
	font-family: var(--font-display);
	font-size: var(--size-lg);
	font-weight: var(--weight-bold);
	color: var(--fg);
	text-decoration: none;
	letter-spacing: -0.02em;
	flex-shrink: 0;
	transition: color var(--transition);
}

.app-logo:hover {
	color: var(--accent);
}
.app-logo:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: var(--r-1);
}
.app-logo:active {
	opacity: 0.75;
}

/* Section nav — hidden mobile, shown ≥1024px */
.app-nav {
	display: none;
	flex: 1;
	gap: var(--s-3);
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Mobile: open state shows nav as dropdown below header */
.app-nav.app-nav--open {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--bg);
	border-bottom: 1px solid var(--border);
	padding: var(--s-3);
	gap: var(--s-2);
	z-index: 100;
	box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
}

@media (min-width: 1024px) {
	.app-nav,
	.app-nav.app-nav--open {
		display: flex;
		flex-direction: row;
		position: static;
		align-items: center;
		background: transparent;
		border: 0;
		padding: 0;
		box-shadow: none;
	}
}

.app-nav a {
	font-size: var(--size-sm);
	color: var(--muted);
	text-decoration: none;
	padding: var(--s-1) var(--s-2);
	border-radius: var(--r-1);
	transition:
		color var(--transition),
		background-color var(--transition);
}

.app-nav a:hover {
	color: var(--fg);
	background: var(--state-empty);
}
.app-nav a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	color: var(--fg);
}
.app-nav a:active {
	opacity: 0.75;
}
.app-nav a[aria-current="true"] {
	color: var(--accent);
	font-weight: var(--weight-bold);
}

/* Hamburger — mobile only */
.app-hamburger {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 1px solid var(--border);
	border-radius: var(--r-1);
	cursor: pointer;
	color: var(--fg);
	transition:
		background-color var(--transition),
		border-color var(--transition);
}

.app-hamburger:hover {
	background: var(--state-empty);
	border-color: var(--muted);
}
.app-hamburger:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
.app-hamburger:active {
	opacity: 0.75;
}

@media (min-width: 1024px) {
	.app-hamburger {
		display: none;
	}
}

/* Scroll progress bar */
.app-progress {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	background: var(--accent);
	width: 0%;
	transition: width 100ms linear;
}

/* 2. HERO SECTION */
.hero {
	min-height: 640px;
	display: grid;
	place-items: center;
	padding: var(--s-12) var(--s-4);
	text-align: center;
}

.hero__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--size-sm);
	color: var(--accent);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: var(--s-3);
}

.hero__title {
	font-family: var(--font-display);
	font-size: clamp(var(--size-xl), 6vw, 56px);
	font-weight: var(--weight-bold);
	line-height: var(--lh-tight);
	letter-spacing: -0.03em;
	color: var(--fg);
	margin-bottom: var(--s-4);
}

.hero__subtitle {
	font-size: var(--size-lg);
	color: var(--muted);
	line-height: var(--lh-snug);
	max-width: 52ch;
	margin-inline: auto;
	margin-bottom: var(--s-6);
}

.hero__mini-canvas {
	width: min(400px, 100%);
	height: 240px;
	margin-inline: auto;
	margin-top: var(--s-6);
	border: 1px solid var(--border);
	border-radius: var(--r-2);
	background: var(--state-empty);
	overflow: hidden;
}

.hero__cta {
	margin-top: var(--s-6);
}

/* 3. NARRATIVE SECTION §1–§6, §9, §10 (B-1 Setosa pattern) */
.section-narrative {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-6);
	max-width: 1200px;
	margin-inline: auto;
	padding: var(--s-12) var(--s-4);
}

@media (min-width: 1024px) {
	.section-narrative {
		grid-template-columns: 1fr 1.6fr;
		align-items: center;
	}
}

.section-narrative .text {
	max-width: 42ch;
}
.section-narrative .text h2 {
	margin-bottom: var(--s-4);
}
.section-narrative .text p {
	margin-bottom: var(--s-3);
}

.section-narrative .viz {
	aspect-ratio: 5 / 3;
	background: var(--state-empty);
	border: 1px solid var(--border);
	border-radius: var(--r-2);
	overflow: hidden;
}

/* Content-sized viz (e.g., §1 intro quote stack) — let height grow with children */
.section-narrative #intro .viz,
.section-narrative .viz:has(> .card) {
	aspect-ratio: auto;
	overflow: visible;
}

.section-label {
	font-family: var(--font-mono);
	font-size: var(--size-sm);
	color: var(--accent);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: var(--s-2);
}

/* 4. FORMULA SECTION §6 — f(n) = g(n) + h(n) */
.section-formula {
	padding: var(--s-12) var(--s-4);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--fg);
	color: var(--bg);
}

.section-formula h2 {
	color: var(--bg);
	margin-bottom: var(--s-4);
}

.formula-card {
	display: inline-block;
	background: var(--bg);
	color: var(--fg);
	border-radius: var(--r-2);
	padding: var(--s-6) var(--s-8);
	margin: var(--s-6) 0;
	box-shadow: var(--shadow-md);
}

.formula-card__equation {
	font-family: var(--font-display);
	font-size: clamp(var(--size-xl), 5vw, 56px);
	font-weight: var(--weight-bold);
	letter-spacing: -0.02em;
	line-height: var(--lh-tight);
}

.formula-card__equation .accent {
	color: var(--accent);
}

.formula-card__caption {
	font-size: var(--size-sm);
	color: var(--muted);
	margin-top: var(--s-3);
	letter-spacing: 0.02em;
}

.formula-terms {
	display: flex;
	gap: var(--s-5);
	justify-content: center;
	flex-wrap: wrap;
	margin-top: var(--s-4);
}

.formula-term__symbol {
	font-family: var(--font-display);
	font-size: var(--size-xl);
	font-weight: var(--weight-bold);
	color: var(--accent);
	margin-bottom: var(--s-2);
}

.formula-term__label {
	font-size: var(--size-sm);
	color: var(--muted);
	margin-top: var(--s-1);
}

/* 4b. FORMULA EXPRESSION — large centered f(n)=g(n)+h(n) display */
.formula-expression {
	font-family: var(--font-display);
	font-size: 40px;
	font-weight: var(--weight-bold);
	text-align: center;
	margin: var(--s-6) 0;
	color: var(--bg);
	letter-spacing: -0.02em;
}

/* 5. PLAYGROUND §7 — canvas + sticky 320px panel */
.playground {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-4);
	max-width: 1200px;
	margin-inline: auto;
	padding: var(--s-12) var(--s-4);
}

@media (min-width: 1024px) {
	.playground {
		grid-template-columns: 1fr 320px;
		align-items: start;
	}
}

.playground__canvas-wrap {
	border: 1px solid var(--border);
	border-radius: var(--r-2);
	background: var(--state-empty);
	overflow: hidden;
}

.playground__canvas-wrap canvas {
	width: 100%;
	height: auto;
	display: block;
	cursor: crosshair;
}

.playground .panel {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--r-2);
	padding: var(--s-4);
	box-shadow: var(--shadow-sm);
}

@media (min-width: 1024px) {
	.playground .panel {
		position: sticky;
		top: calc(var(--header-h) + var(--s-4));
	}
}

/* Mobile §7: simple visual separator for panel below canvas */
@media (max-width: 639px) {
	.playground .panel {
		border-top: 1px solid var(--border);
		padding-top: var(--s-4);
	}
}

/* Mobile: panel as bottom sheet */
@media (max-width: 1023px) {
	.playground .panel {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: var(--r-2) var(--r-2) 0 0;
		z-index: var(--z-sheet);
		max-height: 70vh;
		overflow-y: auto;
		transform: translateY(100%);
		transition: transform var(--transition);
		box-shadow: 0 -4px 24px rgb(0 0 0 / 12%);
	}
	.playground .panel.panel--open {
		transform: translateY(0);
	}
}

/* Mobile panel toggle button — shown <1024px, hidden on desktop */
.btn.panel-toggle-btn {
	display: inline-flex;
}
@media (min-width: 1024px) {
	.btn.panel-toggle-btn {
		display: none;
	}
}

.panel__title {
	font-family: var(--font-display);
	font-size: var(--size-lg);
	font-weight: var(--weight-bold);
	margin-bottom: var(--s-4);
	padding-bottom: var(--s-3);
	border-bottom: 1px solid var(--border);
}

.panel__stats {
	display: flex;
	gap: var(--s-4);
	margin-top: var(--s-4);
	padding-top: var(--s-4);
	border-top: 1px solid var(--border);
}

.panel__stat {
	flex: 1;
	text-align: center;
}

.panel__stat-value {
	font-family: var(--font-mono);
	font-size: var(--size-lg);
	font-weight: var(--weight-bold);
	color: var(--accent);
	line-height: var(--lh-tight);
}

.panel__stat-label {
	font-size: var(--size-sm);
	color: var(--muted);
	margin-top: var(--s-1);
}

/* 6. COMPARISON §8 — 1-col mobile → 3-col ≥640px */
.comparison {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-4);
	max-width: 1200px;
	margin-inline: auto;
	padding: var(--s-12) var(--s-4);
}

@media (min-width: 640px) {
	.comparison {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* 7. GENERIC SECTION WRAPPER */
.section {
	padding: var(--s-12) var(--s-4);
}
.section--alt {
	background: var(--state-empty);
}

.section__inner {
	max-width: 1200px;
	margin-inline: auto;
}

.section__header {
	margin-bottom: var(--s-6);
}
.section__header h2 {
	margin-bottom: var(--s-3);
}
.section__header p {
	color: var(--muted);
	max-width: 52ch;
}

/* 8. CARD component */
.card {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--r-2);
	padding: var(--s-4);
	box-shadow: var(--shadow-sm);
	transition:
		box-shadow var(--transition),
		transform var(--transition);
}

.card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.card--flat:hover {
	box-shadow: var(--shadow-sm);
	transform: none;
}

.card__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--size-sm);
	color: var(--accent);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: var(--s-2);
}

.card__title {
	font-family: var(--font-display);
	font-size: var(--size-lg);
	font-weight: var(--weight-bold);
	line-height: var(--lh-snug);
	margin-bottom: var(--s-3);
}

.card__body {
	font-size: var(--size-md);
	color: var(--muted);
	line-height: var(--lh-base);
}

.card--viz {
	padding: 0;
	overflow: hidden;
}

.card--viz .card__label {
	padding: var(--s-3) var(--s-4);
	font-size: var(--size-sm);
	font-weight: var(--weight-bold);
	border-top: 1px solid var(--border);
	font-family: var(--font-mono);
}

.card--quote {
	border-left: 4px solid var(--accent);
	border-radius: 0 var(--r-2) var(--r-2) 0;
}

.card--quote blockquote {
	font-family: var(--font-display);
	font-size: var(--size-lg);
	line-height: var(--lh-snug);
}

.card--quote cite {
	display: block;
	font-family: var(--font-body);
	font-size: var(--size-sm);
	color: var(--muted);
	margin-top: var(--s-3);
	font-style: normal;
}

/* 9. FOOTER */
.app-footer {
	padding: var(--s-8) var(--s-4);
	border-top: 1px solid var(--border);
	text-align: center;
}

.app-footer__links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--s-4);
	list-style: none;
	padding: 0;
	margin-bottom: var(--s-4);
}

.app-footer__links a {
	font-size: var(--size-sm);
	color: var(--muted);
	text-decoration: none;
	transition: color var(--transition);
}

.app-footer__links a:hover {
	color: var(--accent);
}
.app-footer__links a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: var(--r-1);
}
.app-footer__links a:active {
	opacity: 0.75;
}

.app-footer__copy {
	font-size: var(--size-sm);
	color: var(--muted);
}

/* 10. SECTION ENTRY ANIMATION (IntersectionObserver) */
/* 초기 상태: 보이되 약간 아래에 위치. IO가 동작 안 해도 콘텐츠는 즉시 렌더. */
.reveal {
	opacity: 1;
	transform: translateY(8px);
	transition: transform var(--duration) var(--ease);
}

.reveal.is-visible {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.reveal {
		transform: none;
		transition: none;
	}
}