/*
 * 전역 크롬(헤더·푸터) — 브리프 §6.0 사양 그대로.
 * 조작 요소는 전부 최소 44px, 상태는 색 외 수단으로도 표시한다.
 */

/* ── 헤더 ────────────────────────────────────────────────────────── */
.aibaro-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--bg-surface);
	border-bottom: 1px solid var(--border);
}

.aibaro-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	max-width: var(--chrome-max-width);
	margin: 0 auto;
	padding: var(--space-3) var(--space-4);
}

.aibaro-header__brand {
	display: inline-flex;
	align-items: center;
	min-height: var(--touch-min);
	font-family: var(--font-serif);
	font-size: var(--font-size-lg);
	font-weight: 700;
	color: var(--text-strong);
	text-decoration: none;
}

.aibaro-header__nav {
	display: flex;
	align-items: center;
	gap: var(--space-5);
}

.aibaro-header__list {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.aibaro-header__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--touch-min);
	color: var(--text-body);
	text-decoration: none;
}

.aibaro-header__link:hover,
.aibaro-header__link:focus-visible {
	color: var(--brand);
}

/* 현재 섹션은 색만이 아니라 굵기·밑줄로도 표시한다(PRD §15.1). */
.aibaro-header__link.is-current {
	color: var(--brand);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
}

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

/* 햄버거 — ≤900px에서만 보인다. */
.aibaro-header__toggle {
	display: none;
	width: var(--touch-min);
	height: var(--touch-min);
	padding: 0;
	background: transparent;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.aibaro-header__toggle-bars,
.aibaro-header__toggle-bars::before,
.aibaro-header__toggle-bars::after {
	display: block;
	width: 20px;
	height: 2px;
	margin: 0 auto;
	background: var(--text-strong);
	content: "";
}

.aibaro-header__toggle-bars::before {
	transform: translateY(-6px);
}

.aibaro-header__toggle-bars::after {
	transform: translateY(4px);
}

@media (max-width: 900px) {
	.aibaro-header__toggle {
		display: block;
	}

	.aibaro-header__nav {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--space-3) var(--space-4);
		background: var(--bg-surface);
		border-bottom: 1px solid var(--border);
	}

	.aibaro-header__nav.is-open {
		display: flex;
	}

	.aibaro-header__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.aibaro-header__auth {
		padding-top: var(--space-2);
		border-top: 1px solid var(--border);
	}
}

/* ── 푸터 ────────────────────────────────────────────────────────── */
.aibaro-footer {
	background: var(--bg-subtle);
	border-top: 1px solid var(--border);
}

.aibaro-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: var(--chrome-max-width);
	margin: 0 auto;
	padding: var(--space-6) var(--space-4);
}

.aibaro-footer__brand {
	margin: 0;
	font-family: var(--font-serif);
	font-size: var(--font-size-md);
	font-weight: 700;
	color: var(--text-strong);
}

.aibaro-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.aibaro-footer__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--touch-min);
	color: var(--text-secondary);
	text-decoration: none;
}

.aibaro-footer__link:hover,
.aibaro-footer__link:focus-visible {
	color: var(--brand);
	text-decoration: underline;
}

.aibaro-footer__copyright {
	margin: 0;
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

/* ── 본문 영역 ───────────────────────────────────────────────────── */
.aibaro-main {
	display: block;
	min-height: 40vh;
}