/* 01 Hero — 시안 .hero (lifework-main.nob64.html 15행, 중단점 36·37·38행, 마크업 58행). 패턴: patterns/hero.php */

/*
 * 인트로 숨김 — 모션 스펙 §4.3. 숨김을 CSS 가 먼저 거는 유일한 자리다(첫 그림 깜빡임 방지).
 * html.lw-motion 은 functions.php 머리 스크립트가 모션 줄이기가 꺼져 있을 때만 붙인다.
 * motion.js 가 2초 안에 lw-motion-ready 를 붙이지 못하면 CSS 가 스스로 보이게 한다.
 * lw-m-intro 는 범용 클래스라 섹션 CSS 가 모든 페이지에 실리는 점에 기댄다.
 */
.lw-motion .lw-m-intro > * {
	opacity: 0;
}

.lw-motion:not(.lw-motion-ready) .lw-m-intro > * {
	animation: lw-failsafe 0s linear 2s forwards;
}

@keyframes lw-failsafe {
	to {
		opacity: 1;
	}
}

.lw-hero.wp-block-cover {
	/* 사진이 늦게 와도 글자 대비가 서도록 시안의 바탕색을 둔다. */
	min-height: 760px;
	height: min(91vh, 920px);
	padding: 0;
	align-items: stretch;
	background-color: #536b63;
	color: #fff;
	/* 스크롤 안내 뒤 어두운 원의 가로 중심 — .lw-wrap 오른쪽 끝(여백 40px, 960 이하 22px)에서 8px 안쪽. */
	--lw-cue-x: calc(50% + min(50vw - 40px, 640px) - 8px);
}

.lw-hero .wp-block-cover__image-background {
	object-position: center 47%;
}

.lw-hero.wp-block-cover .wp-block-cover__background.has-background-dim {
	background-color: transparent;
	/*
	 * 시안 덮개(90°·0°) 위에 글자 뒤만 조금 더 어둡게 — 사진 위 작은 글자 AA 4.5:1(THEME-1_r2 실측).
	 * 맨 위 띠: 헤더 메뉴 · 28% 지점 .70→.76: 키커 · 오른쪽 아래 원: 스크롤 안내. 사진 한가운데는 그대로 둔다.
	 */
	background-image:
		linear-gradient(180deg, rgba(17, 39, 32, 0.68) 0, rgba(17, 39, 32, 0) 170px),
		linear-gradient(90deg, rgba(22, 47, 41, 0.88) 0%, rgba(22, 47, 41, 0.76) 28%, rgba(22, 47, 41, 0.15) 65%, rgba(22, 47, 41, 0.07) 100%),
		linear-gradient(0deg, rgba(17, 39, 32, 0.38), transparent 45%),
		radial-gradient(ellipse 200px 300px at var(--lw-cue-x) calc(100% - 140px), rgba(17, 39, 32, 0.7), transparent 100%);
	opacity: 1;
}

.lw-hero .wp-block-cover__inner-container {
	position: static;
	display: flex;
	width: 100%;
}

.lw-hero__main {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
}

.lw-hero__copy {
	max-width: 740px;
	padding-top: 60px;
}

.lw-hero__kicker {
	/* 시안 .hero-kicker 는 인라인 span — 상자를 글자 폭으로(글자 뒤 바탕만 재고 덮는다). */
	width: fit-content;
	margin: 0;
	color: #e5ebcf;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.lw-hero .lw-hero__title {
	margin: 28px 0;
	font-size: var(--wp--preset--font-size--display);
	font-weight: 500;
	line-height: 1.17;
	letter-spacing: -0.075em;
}

.lw-hero__title em {
	font-style: normal;
	color: #dce7b6;
}

.lw-hero__lead {
	max-width: 550px;
	margin: 0;
	color: #f0f1e9;
	font-size: var(--wp--preset--font-size--hero-lead);
	line-height: 1.9;
}

.lw-hero__actions.wp-block-buttons {
	gap: 14px;
	margin-top: 42px;
}

.lw-hero .wp-block-button .wp-block-button__link {
	min-width: 179px;
	background: #e3e9c7;
	color: var(--wp--preset--color--deep);
}

.lw-hero .wp-block-button.is-style-outline > .wp-block-button__link {
	min-width: 163px;
	background: transparent;
	color: #fff;
}

.lw-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: #ffffff19;
}

.lw-hero__bottom {
	position: absolute;
	z-index: 1;
	bottom: 36px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	align-items: end;
	color: #e6ece1;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.09em;
}

.lw-hero__bottom p {
	margin: 0;
}

.lw-hero__line {
	display: inline-block;
	width: 58px;
	height: 1px;
	margin-right: 14px;
	background: #fff;
	vertical-align: middle;
}

.lw-hero__scroll {
	display: flex;
	align-items: center;
	gap: 12px;
	writing-mode: vertical-rl;
}

.lw-hero__scroll::after {
	content: "";
	width: 1px;
	height: 54px;
	background: #fff;
}

@media (max-width: 960px) {
	.lw-hero.wp-block-cover {
		min-height: 710px;
		--lw-cue-x: calc(100% - 30px);
	}
}

@media (max-width: 720px) {
	.lw-hero.wp-block-cover {
		height: 760px;
		min-height: 680px;
	}

	.lw-hero .wp-block-cover__image-background {
		object-position: 60% center;
	}

	.lw-hero.wp-block-cover .wp-block-cover__background.has-background-dim {
		/* 시안 #17382fda·70 → e0·78(360 키커 4.34 → 4.5 이상). */
		background-image:
			linear-gradient(90deg, #17382fe0, #17382f78 80%),
			linear-gradient(0deg, #17382f90, transparent);
	}

	.lw-hero__copy {
		padding-top: 50px;
	}

	.lw-hero .lw-hero__title {
		font-size: clamp(48px, 10.7vw, 70px);
	}

	.lw-hero__lead {
		font-size: 15px;
	}

	.lw-hero__bottom {
		bottom: 25px;
	}

	.lw-hero__scroll {
		display: none;
	}
}

@media (max-width: 480px) {
	.lw-hero .lw-hero__title {
		font-size: 47px;
	}

	.lw-hero__actions.wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.lw-hero__actions .wp-block-button .wp-block-button__link {
		width: 190px;
	}

	.lw-hero__bottom {
		font-size: var(--wp--preset--font-size--micro);
	}
}