/*
 * 사이트 첫 화면 위젯(x-widget.site.landing) — 큰 제목 · 한 줄 설명 · 시작 단추 · 대표 그림, 아래에 세 단계 순서도.
 * SSOT 11절 "영어 교육 브랜드 사이트" — "우선 최대한 심플하게". 색은 토큰만(주 단추는 .sonub-button-primary — 틀이 고른 강조색).
 */
.site-landing { display: grid; gap: var(--wa-space-3xl); }

.site-landing-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	align-items: center;
	gap: var(--wa-space-2xl);
}
.site-landing-copy { display: grid; justify-items: start; gap: var(--wa-space-l); min-inline-size: 0; }
.site-landing-copy h1 {
	margin: 0;
	font-size: clamp(calc(2rem * var(--wa-font-size-scale, 1)), 4vw, calc(3.2rem * var(--wa-font-size-scale, 1)));
	line-height: 1.15;
	letter-spacing: -0.015em;
}
.site-landing-lead {
	margin: 0;
	color: var(--wa-color-text-quiet);
	font-size: calc(1.15rem * var(--wa-font-size-scale, 1));
	line-height: 1.6;
}
.site-landing-actions { display: flex; flex-wrap: wrap; gap: var(--wa-space-s); }
.site-landing-actions .sonub-button { min-block-size: 3rem; padding-inline: var(--wa-space-l); }
.site-landing-image {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--wa-border-radius-l);
	box-shadow: var(--wa-shadow-m);
}

.site-landing-steps { display: grid; justify-items: center; gap: var(--wa-space-l); }
.site-landing-steps h2 { margin: 0; font-size: var(--wa-font-size-xl); text-align: center; }
.site-landing-steps .dg-flow { inline-size: 100%; max-inline-size: 48rem; }

/* 슬라이드 첫 화면(slides 가 있을 때 — okayteacher.com) — 제목(h1)은 위에 그대로, 그 아래 슬라이드(큰 문장 · 설명 · 단추 | 그림)가 옆으로 넘어간다.
   넘기기·점·끌기·자동 넘김은 wa-carousel, 켜고 끄기는 public/js/site-landing.js. 지금 슬라이드(--is-active)의 글은 아래에서 차례로 떠오르고 그림은 천천히 다가온다 */
.site-landing-carousel { position: relative; grid-template-columns: minmax(0, 1fr); gap: var(--wa-space-m); }
.site-landing-carousel .site-landing-kicker {
	justify-self: start;
	margin: 0;
	padding: var(--wa-space-2xs) var(--wa-space-m);
	border-radius: var(--wa-border-radius-pill);
	background: var(--wa-color-brand-fill-quiet);
	color: var(--wa-color-brand-on-quiet);
	font-size: var(--wa-font-size-m);
	font-weight: var(--wa-font-weight-bold);
	line-height: 1.5;
}
.site-landing-slides { --aspect-ratio: auto; --slide-gap: var(--wa-space-xl); display: block; min-inline-size: 0; }
.site-landing-slides::part(base) { display: block; min-inline-size: 0; }
.site-landing-slides::part(scroll-container) { aspect-ratio: auto; block-size: auto; grid-auto-rows: auto; align-items: stretch; border-radius: 0; }
.site-landing-slides::part(pagination) { justify-content: start; gap: var(--wa-space-xs); margin-block-start: var(--wa-space-l); }
.site-landing-slides::part(pagination-item) {
	inline-size: 0.65rem;
	block-size: 0.65rem;
	border-radius: var(--wa-border-radius-pill);
	background: var(--wa-color-neutral-fill-normal);
	transition: inline-size 0.35s ease, background-color 0.35s ease;
}
.site-landing-slides::part(pagination-item-active) { inline-size: 2rem; background: var(--wa-color-brand-fill-loud); }
.site-landing-slide {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	align-items: center;
	gap: var(--wa-space-2xl);
	max-block-size: none;
	aspect-ratio: auto;
}
.site-landing-slide .site-landing-slide-title {
	margin: 0;
	font-size: clamp(calc(2rem * var(--wa-font-size-scale, 1)), 4vw, calc(3.2rem * var(--wa-font-size-scale, 1)));
	font-weight: var(--wa-font-weight-bold);
	line-height: 1.15;
	letter-spacing: -0.015em;
}
.site-landing-toggle {
	position: absolute;
	inset-block-end: 0;
	inset-inline-end: 0;
	display: grid;
	place-items: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	padding: 0;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-pill);
	background: var(--wa-color-surface-raised);
	color: var(--wa-color-text-quiet);
	font: inherit;
	cursor: pointer;
}
.site-landing-toggle:hover { color: var(--wa-color-brand-on-quiet); background: var(--wa-color-brand-fill-quiet); }
.site-landing-toggle:focus-visible { outline: 2px solid var(--wa-color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
	.site-landing-slide.--is-active :is(.site-landing-slide-title, .site-landing-lead, .site-landing-actions) { animation: site-landing-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
	.site-landing-slide.--is-active .site-landing-lead { animation-delay: 0.12s; }
	.site-landing-slide.--is-active .site-landing-actions { animation-delay: 0.24s; }
	.site-landing-slide.--is-active .site-landing-image { animation: site-landing-zoom 6s ease-out both; }
}
@keyframes site-landing-rise { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }
@keyframes site-landing-zoom { from { transform: scale(1.04); } to { transform: none; } }

/* 좁은 화면 — 그림을 위로, 글을 아래로 한 줄씩 */
@media (max-width: 48rem) {
	.site-landing { gap: var(--wa-space-2xl); }
	.site-landing-hero { grid-template-columns: minmax(0, 1fr); gap: var(--wa-space-l); }
	.site-landing-image { order: -1; }
	.site-landing-slide { grid-template-columns: minmax(0, 1fr); gap: var(--wa-space-l); }
}