/*
 * 홈 디자인 — 간단한 환영 영역·큰 리엔·짧은 학습 링크(SSOT 23절).
 * home.css 다음에 읽는다. Web Awesome 토큰과 논리 속성으로 테마·RTL을 함께 지원한다.
 */

/* ── 환영 영역 — 글과 리엔을 한 패널에 담는다 ── */
.home {
	container-type: inline-size;
	gap: var(--wa-space-l);
	padding-block-start: var(--wa-space-xs);
}

.home .home-welcome {
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	gap: var(--wa-space-m);
	padding: clamp(1.5rem, 3.5cqi, 2.75rem);
	border-color: color-mix(in srgb, var(--wa-color-brand-border-normal) 32%, var(--wa-color-surface-border));
	border-radius: calc(var(--wa-border-radius-xl) * 1.25);
	background: linear-gradient(120deg, var(--wa-color-surface-raised) 35%, color-mix(in srgb, var(--wa-color-brand-fill-quiet) 55%, var(--wa-color-surface-raised)));
	box-shadow: var(--wa-shadow-m);
	text-align: start;
}

.home .home-welcome-copy {
	padding-block: var(--wa-space-l);
}

.home .home-welcome h1 {
	margin-block-end: var(--wa-space-l);
	font-size: clamp(2.15rem, 4.8cqi, 3.4rem);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.055em;
}

.home .home-welcome h1 em {
	color: var(--wa-color-brand-on-quiet);
}

.home .home-welcome-desc {
	max-inline-size: 29rem;
	margin-inline: 0;
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-m);
	line-height: 1.8;
}

.home .home-welcome-actions {
	justify-content: flex-start;
	margin-block-start: var(--wa-space-xl);
}

.home .home-welcome-actions a {
	gap: var(--wa-space-m);
	min-block-size: 3.4rem;
	padding-inline: var(--wa-space-l);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-brand-fill-loud);
	box-shadow: var(--wa-shadow-m);
	font-size: var(--wa-font-size-m);
	font-weight: 700;
	transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.home .home-welcome-actions a:hover {
	background: color-mix(in srgb, var(--wa-color-brand-fill-loud) 88%, var(--wa-color-text-normal));
	box-shadow: var(--wa-shadow-l);
	transform: translateY(-2px);
}

.home .home-welcome-actions a:focus-visible {
	outline: 2px solid var(--wa-color-focus);
	outline-offset: 4px;
}

/* ── 리엔 — 별도 테두리를 없애고 배경에 자연스럽게 이어 준다 ── */
.home .home-welcome-visual {
	block-size: clamp(25rem, 54cqi, 35rem);
	border: 0;
	border-radius: var(--wa-border-radius-xl);
	background: radial-gradient(ellipse at 50% 52%, color-mix(in srgb, var(--wa-color-brand-fill-quiet) 90%, var(--wa-color-surface-raised)) 15%, color-mix(in srgb, var(--wa-color-brand-fill-quiet) 30%, transparent) 62%, transparent 82%);
}

.home .home-welcome-visual .token-field {
	opacity: 0.6;
}

.home .home-orbit {
	inset: 12% 3%;
	border-color: color-mix(in srgb, var(--wa-color-brand-on-quiet) 16%, transparent);
}

.home .home-orbit::after {
	border-color: color-mix(in srgb, var(--wa-color-brand-on-quiet) 12%, transparent);
}

.home .home-spark {
	opacity: 0.7;
}

.home .home-spark-one {
	font-size: var(--wa-font-size-xl);
}

.home .home-spark-two {
	font-size: var(--wa-font-size-2xl);
}

/* ── 학습 링크 — 작은 아이콘과 넉넉한 클릭 영역 ── */
.home .home-more {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wa-space-l);
	padding: var(--wa-space-l);
	border-color: color-mix(in srgb, var(--wa-color-surface-border) 72%, transparent);
	border-radius: var(--wa-border-radius-xl);
	background: var(--wa-color-surface-raised);
	box-shadow: none;
}

.home .home-more-group + .home-more-group {
	padding-inline-start: var(--wa-space-l);
	border-inline-start: 1px solid var(--wa-color-surface-border);
}

.home .home-more h2 {
	margin-block-end: var(--wa-space-s);
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-xs);
	font-weight: 700;
	letter-spacing: 0;
}

.home .home-more ul {
	gap: var(--wa-space-2xs);
}

.home .home-more a {
	gap: var(--wa-space-xs);
	min-block-size: 2rem;
	padding-inline: var(--wa-space-xs);
	border-color: transparent;
	border-radius: var(--wa-border-radius-m);
	font-size: var(--wa-font-size-s);
	line-height: 1.35;
	transition: background-color 160ms ease, color 160ms ease;
}

.home .home-more a:hover,
.home .home-more a:focus-visible {
	background: var(--wa-color-brand-fill-quiet);
	color: var(--wa-color-brand-on-quiet);
}

.home .home-more a:focus-visible {
	outline: 2px solid var(--wa-color-focus);
	outline-offset: 2px;
}

.home .home-principles {
	padding-block-start: var(--wa-space-m);
	border-block-start-style: solid;
	font-size: var(--wa-font-size-xs);
	line-height: 1.7;
}

/* 본문에 남은 폭을 기준으로 바꾼다 — 양쪽 사이드바가 있는 화면에서도 균형을 유지한다. */
@container (max-width: 46rem) {
	.home .home-welcome {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wa-space-xs);
		text-align: center;
	}
	.home .home-welcome-copy { padding-block: var(--wa-space-m); }
	.home .home-welcome-desc { margin-inline: auto; }
	.home .home-welcome-actions { justify-content: center; margin-block-start: var(--wa-space-l); }
	.home .home-welcome-visual { block-size: clamp(23rem, 60cqi, 32rem); }
	.home .home-more { grid-template-columns: minmax(0, 1fr); gap: var(--wa-space-m); }
	.home .home-more-group + .home-more-group {
		padding-inline-start: 0;
		padding-block-start: var(--wa-space-m);
		border-inline-start: 0;
		border-block-start: 1px solid var(--wa-color-surface-border);
	}
}

@container (max-width: 25rem) {
	.home .home-welcome { padding: var(--wa-space-m); }
	.home .home-welcome h1 { font-size: clamp(1.95rem, 8.5cqi, 2.25rem); }
	.home .home-welcome-desc { font-size: var(--wa-font-size-s); }
	.home .home-welcome-actions a { flex: 0 1 auto; inline-size: 100%; }
	.home .home-welcome-visual { block-size: 23rem; }
	.home .home-more { padding: var(--wa-space-m); }
}

:lang(ur) .home .home-welcome h1 {
	line-height: 1.8;
	letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
	.home .home-welcome-actions a,
	.home .home-more a { transition: none; }
	.home .home-welcome-actions a:hover { transform: none; }
}