/*
 * 공통 섹션 엔진 — 브리프 §6.0.
 *
 * 배경 톤은 섹션 인덱스에 따라 크림↔subtle로 교대한다(렌더러가 `tone`을 넘긴다).
 * 열 수는 고정하지 않고 `auto-fit`이 정한다 — 항목이 늘어도 CSS를 고치지 않는다.
 */

.aibaro-section {
	padding: var(--space-8) var(--space-4);
}

.aibaro-section.is-tone-cream {
	background: var(--bg-page);
}

.aibaro-section.is-tone-subtle {
	background: var(--bg-subtle);
}

.aibaro-section__inner {
	max-width: 1080px;
	margin: 0 auto;
}

.aibaro-section__head {
	max-width: 70ch;
	margin-bottom: var(--space-6);
}

.aibaro-section__kicker {
	margin: 0 0 var(--space-2);
	font-size: var(--font-size-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--brand);
	text-transform: uppercase;
}

.aibaro-section__title {
	margin: 0 0 var(--space-3);
}

.aibaro-section__lead {
	margin: 0;
	color: var(--text-secondary);
}

/* ── 카드 그리드 (순서에 뜻이 없는 묶음) ─────────────────────────── */
.aibaro-section__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.aibaro-card {
	padding: var(--space-5);
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
}

.aibaro-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: var(--space-3);
	font-size: var(--font-size-xl);
	border-radius: var(--radius-full);
}

/* 아이콘 배경은 순환하는 소프트 색. 의미는 담지 않는다(장식). */
.aibaro-card--tint-0 .aibaro-card__icon {
	background: var(--color-blue-soft);
}
.aibaro-card--tint-1 .aibaro-card__icon {
	background: var(--color-green-soft);
}
.aibaro-card--tint-2 .aibaro-card__icon {
	background: var(--color-yellow-soft);
}
.aibaro-card--tint-3 .aibaro-card__icon {
	background: var(--color-coral-soft);
}
.aibaro-card--tint-4 .aibaro-card__icon {
	background: var(--color-lav-soft);
}

.aibaro-card__label {
	margin: 0 0 var(--space-1);
	font-size: var(--font-size-sm);
	font-weight: 700;
	color: var(--brand);
}

.aibaro-card__title {
	margin: 0 0 var(--space-2);
	font-size: var(--font-size-lg);
}

.aibaro-card__body {
	margin: 0;
	color: var(--text-secondary);
}

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

.aibaro-tag {
	padding: 2px var(--space-2);
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	background: var(--bg-subtle);
	border-radius: var(--radius-full);
}

.aibaro-card__cta {
	margin: var(--space-3) 0 0;
}

/* ── 단계 (순서에 뜻이 있는 목록) ────────────────────────────────── */
.aibaro-section__steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: aibaro-step;
}

.aibaro-step {
	padding: var(--space-4) var(--space-5);
	background: var(--bg-surface);
	border-left: 4px solid var(--brand);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ── 히어로 ──────────────────────────────────────────────────────── */
.aibaro-section--hero .aibaro-section__head {
	max-width: 60ch;
}

.aibaro-section--hero .aibaro-section__cards {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* ── CTA 패널 ────────────────────────────────────────────────────── */
.aibaro-section--cta_panel {
	background: var(--cta-primary-bg);
	color: var(--cta-primary-fg);
}

.aibaro-section--cta_panel .aibaro-section__title,
.aibaro-section--cta_panel .aibaro-section__lead,
.aibaro-section--cta_panel .aibaro-section__kicker {
	color: var(--cta-primary-fg);
}

.aibaro-section--cta_panel .aibaro-button {
	color: var(--cta-primary-bg);
	background: var(--cta-primary-fg);
}

/* ── 법적 문서 ───────────────────────────────────────────────────── */
.aibaro-section--legal_prose .aibaro-section__inner {
	max-width: var(--document-max-width);
}

.aibaro-section__document {
	white-space: pre-wrap;
	line-height: 1.9;
	color: var(--text-body);
}

/* ── 공통 버튼·링크 ──────────────────────────────────────────────── */
.aibaro-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--touch-min);
	padding: 0 var(--space-5);
	font-weight: 700;
	color: var(--cta-primary-fg);
	text-decoration: none;
	background: var(--cta-primary-bg);
	border-radius: var(--radius-md);
}

.aibaro-button:hover,
.aibaro-button:focus-visible {
	text-decoration: underline;
}

.aibaro-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--touch-min);
	font-weight: 700;
	color: var(--brand);
}

.aibaro-section__cta {
	margin: var(--space-6) 0 0;
}

@media (min-width: 768px) {
	.aibaro-section {
		padding: var(--space-8) var(--space-6);
	}
}

/* 법적 문서 제목 — 브리프 §6.10(h1 하단 보더). */
.aibaro-document__title {
	max-width: var(--document-max-width);
	margin: 0 auto;
	padding: var(--space-8) var(--space-4) var(--space-4);
	border-bottom: 1px solid var(--border);
}

/* 목록 카드 부가 요소 */
.aibaro-card__meta {
	margin: var(--space-2) 0 0;
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

.aibaro-badge {
	display: inline-block;
	margin: 0 0 var(--space-2);
	padding: 2px var(--space-2);
	font-size: var(--font-size-xs);
	font-weight: 700;
	border-radius: var(--radius-full);
}

/* 무료 배지는 테마 스왑 대상이 아니다 — 지역 색과 같아지면 뜻이 무너진다. */
.aibaro-badge--free {
	color: var(--badge-free-fg);
	background: var(--badge-free-bg);
}

.aibaro-badge--new {
	margin-left: var(--space-2);
	color: var(--badge-new-fg);
	background: var(--badge-new-bg);
}

.aibaro-empty {
	margin: 0;
	color: var(--text-muted);
}

/* ── 고객센터 (브리프 §6.9) ─────────────────────────────────────── */
.aibaro-notice-list,
.aibaro-faq-list,
.aibaro-support-search__results {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aibaro-notice-list__item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--touch-min);
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--border);
}

.aibaro-notice-list__item time {
	margin-left: auto;
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

.aibaro-badge--pinned {
	margin: 0;
	color: var(--brand);
	background: var(--color-blue-soft);
}

.aibaro-faq {
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--border);
}

.aibaro-faq__question {
	display: flex;
	align-items: center;
	min-height: var(--touch-min);
	font-weight: 700;
	cursor: pointer;
}

.aibaro-faq__answer {
	padding: var(--space-3) 0 0;
	color: var(--text-secondary);
}

.aibaro-support-search form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
}

.aibaro-support-search input[type="search"] {
	flex: 1 1 16rem;
	min-height: var(--touch-min);
	padding: 0 var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

.aibaro-support-search__results li {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--touch-min);
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--border);
}

/* ── 문의 폼 ────────────────────────────────────────────────────── */
.aibaro-inquiry-form {
	max-width: 40rem;
}

.aibaro-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0 0 var(--space-4);
}

.aibaro-field label {
	font-weight: 700;
}

.aibaro-field input,
.aibaro-field select,
.aibaro-field textarea {
	min-height: var(--touch-min);
	padding: var(--space-2) var(--space-3);
	font: inherit;
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

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

.aibaro-field--consent label {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	font-weight: 400;
	line-height: 1.6;
}

.aibaro-field--consent input {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	min-height: 0;
	margin-top: 0.2rem;
}

.aibaro-inquiry-form__error {
	padding: var(--space-3) var(--space-4);
	color: var(--text-error);
	background: var(--color-coral-soft);
	border-radius: var(--radius-md);
}

.aibaro-inquiry-result {
	padding: var(--space-5);
	background: var(--color-green-soft);
	border-radius: var(--radius-lg);
}

.aibaro-inquiry-result h2 {
	margin-top: 0;
	color: var(--badge-free-fg);
}

/* ── 인터랙티브 콘텐츠 목록 (PRD §10.2-3) ─────────────────────── */
.aibaro-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: flex-end;
	margin: 0 0 var(--space-6);
}

.aibaro-filters__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
}

.aibaro-filters__field label {
	font-weight: 700;
}

.aibaro-filters__field select {
	min-height: var(--touch-min);
	padding: var(--space-2) var(--space-3);
	font: inherit;
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

.aibaro-filters__actions {
	display: flex;
	gap: var(--space-3);
	margin: 0;
}

/* 보조 버튼은 테두리로만 구분한다 — 주 버튼과 무게가 같으면 안 된다. */
.aibaro-button--ghost {
	color: var(--brand);
	background: transparent;
	border: 1px solid var(--border);
}

.aibaro-filters__count {
	margin: 0 0 var(--space-4);
	color: var(--text-muted);
}

.aibaro-card__image {
	width: 100%;
	height: auto;
	margin: 0 0 var(--space-3);
	border-radius: var(--radius-md);
}

/* ── 인터랙티브 콘텐츠 상세 (PRD §10.3) ───────────────────────── */
.aibaro-interactive {
	max-width: var(--document-max-width);
	margin: 0 auto;
	padding: var(--space-6) var(--space-4) var(--space-8);
}

.aibaro-interactive__back {
	margin: 0 0 var(--space-4);
}

.aibaro-interactive__title {
	margin: 0 0 var(--space-4);
}

.aibaro-interactive__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-6);
	margin: 0 0 var(--space-5);
}

.aibaro-interactive__meta dt {
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

.aibaro-interactive__meta dd {
	margin: 0;
	font-weight: 700;
}

.aibaro-interactive__lead {
	margin: 0 0 var(--space-6);
	line-height: 1.7;
}

.aibaro-interactive__player {
	margin: 0 0 var(--space-8);
}

/* H5P 플레이어는 자체 크기를 계산한다 — 폭만 넘겨주고 높이는 건드리지 않는다. */
.aibaro-interactive__player .h5p-iframe-wrapper,
.aibaro-interactive__player iframe {
	max-width: 100%;
}

.aibaro-interactive__gate {
	padding: var(--space-5);
	margin: 0 0 var(--space-8);
	background: var(--bg-subtle);
	border-radius: var(--radius-lg);
}

.aibaro-interactive__gate-title {
	margin-top: 0;
}

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

/* ── 마이페이지 (PRD §5.2 · §11.4) ─────────────────────────────── */
.aibaro-my {
	max-width: var(--document-max-width);
	margin: 0 auto;
	padding: 0 var(--space-4) var(--space-8);
}

.aibaro-my__gate {
	max-width: var(--document-max-width);
	margin: 0 auto;
	padding: var(--space-6);
	background: var(--bg-subtle);
	border-radius: var(--radius-lg);
}

.aibaro-my__gate h2 {
	margin-top: 0;
}

.aibaro-my__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-6);
	margin: 0 0 var(--space-6);
}

.aibaro-my__meta dt {
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

.aibaro-my__meta dd {
	margin: 0;
	font-weight: 700;
}

.aibaro-my__consents {
	padding-left: var(--space-5);
	line-height: 1.8;
}

.aibaro-my__consent-at {
	color: var(--text-muted);
}

.aibaro-my__orgs {
	display: grid;
	gap: var(--space-4);
	padding: 0;
	list-style: none;
}

/* 탈퇴는 되돌릴 수 없다 — 무엇이 사라지는지가 버튼보다 먼저 눈에 들어와야 한다. */
.aibaro-my__warning {
	padding: var(--space-5);
	margin: 0 0 var(--space-6);
	background: var(--color-coral-soft);
	border-radius: var(--radius-lg);
}

.aibaro-my__warning h2 {
	margin-top: 0;
}

.aibaro-my__warning ul {
	margin: 0;
	padding-left: var(--space-5);
	line-height: 1.8;
}

.aibaro-my__error {
	padding: var(--space-3) var(--space-4);
	margin: 0 0 var(--space-5);
	color: var(--text-error);
	background: var(--color-coral-soft);
	border-radius: var(--radius-md);
}

.aibaro-my__form {
	margin: 0 0 var(--space-4);
}

/* 파기 버튼만 다르게 보인다 — 다른 버튼과 같아 보이면 안 된다. */
.aibaro-button--danger {
	color: var(--color-white);
	background: var(--badge-new-fg);
}