/*
Theme Name: Lifework
Theme URI: https://lifework.kr/
Author: Ieumworks
Description: 라이프워크(lifework.kr) 블록 테마. 메인 시안 lifework-main.html 의 코드를 블록 테마로 옮긴 것.
Version: 0.1.0
Requires at least: 6.8
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lifework
*/

/*
 * 전역 · 공용 부품 · 헤더 · 푸터 · 공통 템플릿.
 * 값은 시안(docs/design/lifework-main.nob64.html) 그대로다. 섹션 스타일은 assets/css/sections/<섹션>.css.
 *
 * 섹션 패턴이 쓰는 공용 클래스(시안 클래스 → 테마 클래스)
 *   .wrap    → .lw-wrap        .section → .lw-section
 *   .eyebrow → .lw-eyebrow (어두운 배경 .is-light)
 *   .title   → .lw-title       .lead    → .lw-lead
 *   .arrow   → .lw-arrow       .link    → .lw-link (링크를 감싼 문단)
 *   .button  → 코어 버튼       .button.outline → 버튼 스타일 「외곽선」(is-style-outline)
 *   .pill    → .lw-pill
 *
 * 18px 미만 글자 색은 theme.json 의 대비 토큰(text-eyebrow·text-muted·text-label·text-soft)을 쓴다.
 * 시안 색의 색상·채도는 두고 명도만 내려 사이트의 밝은 바탕 14종 모두에서 4.5:1 을 넘긴 값이다
 * (표: data/reports/T20260929_WEB-LW-SEC-1_r2.md). 시안 원래 색(muted 등)은 큰 글자·면에만 남긴다.
 */

/* ── 전역 ─────────────────────────────────────────────── */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	word-break: keep-all;
}

button,
input {
	font: inherit;
}

/* 한국어 제목이 어절 가운데서 끊겨 한 글자 끝줄이 생기지 않게. 코어 .wp-block-post-title 의 word-break: break-word 가
 * body 의 keep-all 을 덮으므로 :root 를 붙여 이긴다(편집기 iframe 에서도 같은 명시도). 줄 길이는 balance 로 고르게. */
:root :is(h1, h2, h3, h4, h5, h6, .wp-block-post-title) {
	word-break: keep-all;
	overflow-wrap: break-word;
	text-wrap: balance;
}

button {
	cursor: pointer;
}

img {
	max-width: 100%;
}

::selection {
	background: #d5e2aa;
	color: var(--wp--preset--color--deep);
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* 헤더가 절대 위치로 히어로 위에 얹힌다 — 기준을 문서 흐름 쪽에 둔다(관리 막대가 있어도 밀리게). */
.wp-site-blocks {
	position: relative;
}

.lw-wrap {
	width: min(calc(100% - 2 * var(--wp--custom--gutter--desktop)), var(--wp--custom--max));
	margin-inline: auto;
}

.lw-section {
	padding-block: var(--wp--preset--spacing--section);
}

/* ── 공용 부품 ─────────────────────────────────────────── */

.lw-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font: 700 var(--wp--preset--font-size--eyebrow) / 1.2 var(--wp--preset--font-family--display);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-eyebrow);
}

.lw-eyebrow::before {
	content: "";
	width: 24px;
	height: 1px;
	background: currentColor;
}

.lw-eyebrow.is-light {
	color: #dce7c5;
}

.lw-title {
	margin: 20px 0 24px;
	font-size: var(--wp--preset--font-size--title);
	line-height: 1.28;
	letter-spacing: -0.06em;
	font-weight: 600;
}

.lw-lead {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.9;
	color: var(--wp--preset--color--text-muted);
}

.lw-arrow {
	display: inline-block;
	transition: transform 0.3s;
}

.lw-link a:hover .lw-arrow,
.wp-block-button__link:hover .lw-arrow {
	transform: translate(4px, -4px);
}

.lw-link {
	margin: 0;
}

.lw-link a {
	display: inline-flex;
	align-items: center;
	gap: 22px;
	padding-bottom: 9px;
	border-bottom: 1px solid currentColor;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--ui);
}

.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	min-height: 52px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--deep);
	color: #fff;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	/* 시안 .button 은 줄 높이 normal · 왼쪽 정렬(두 줄로 접힐 때 보인다). 코어 버튼의 center 와
	 * word-break: break-word 는 전역 keep-all 을 덮어 「둘러보 / 기」 처럼 어절 가운데서 끊는다. */
	line-height: normal;
	text-align: start;
	word-break: keep-all;
	transition: transform 0.3s, background 0.3s;
}

.wp-block-button .wp-block-button__link:hover {
	transform: translateY(-3px);
	background: #37594a;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 0 22px;
	border: 1px solid #b4c4b9;
	background: transparent;
	color: inherit;
}

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

.lw-pill {
	display: inline-block;
	margin: 0;
	padding: 8px 13px;
	border: 1px solid #cbd5c5;
	border-radius: var(--wp--custom--radius--pill);
	color: #526a5b;
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* ── 헤더 ─────────────────────────────────────────────── */

.lw-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	color: #fff;
}

/* 히어로가 없는 화면(글·페이지·목록·404)은 헤더가 문서 흐름에 서고 어두운 바탕을 가진다. */
body:not(.home) .lw-header {
	position: relative;
	background: var(--wp--preset--color--dark);
}

.lw-header__inner {
	height: var(--wp--custom--header--height);
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #ffffff58;
}

.lw-brand {
	margin: 0;
	font: 800 27px / 1 var(--wp--preset--font-family--display);
	letter-spacing: -0.09em;
}

.lw-brand a {
	display: flex;
	align-items: center;
	gap: 7px;
}

.lw-brand__mark {
	position: relative;
	width: 27px;
	height: 27px;
	border: 2px solid #e1e9cc;
	border-radius: 100%;
}

.lw-brand__mark::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 12px;
	width: 13px;
	height: 2px;
	background: #e1e9cc;
	transform: rotate(-33deg);
}

.lw-brand__dot {
	color: #e6eac5;
}

/* 주 메뉴 — 코어 내비게이션 블록의 기본 모양을 시안 값으로 덮는다.
 * 코어는 블록 클래스(lw-nav wp-block-navigation)를 안쪽 <ul> 에도 복사한다. 판(패널) 규칙은 nav 요소로 가둔다. */
.lw-header nav.lw-nav.wp-block-navigation,
.lw-header .lw-nav .wp-block-navigation__container {
	gap: 25px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.lw-header .lw-nav .wp-block-navigation-item__content {
	transition: opacity 0.2s;
}

.lw-header .lw-nav .wp-block-navigation-item__content:hover {
	opacity: 0.65;
}

.lw-header .lw-nav .has-child {
	position: relative;
	display: flex;
	align-items: center;
	height: var(--wp--custom--header--height);
	white-space: nowrap;
}

.lw-header .lw-nav .has-child > .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	gap: 6px;
}

.lw-header .lw-nav .has-child > .wp-block-navigation-item__content::after {
	content: "⌄";
	font-size: 15px;
	line-height: 1;
	opacity: 0.8;
}

.lw-header nav.lw-nav.wp-block-navigation .wp-block-navigation__submenu-container {
	position: absolute;
	top: 70px;
	left: -18px;
	width: auto;
	height: auto;
	min-width: 172px;
	overflow: visible;
	padding: 12px 0;
	border: 1px solid #e1e8da;
	background: #f8f8f0;
	color: #284135;
	box-shadow: 0 18px 40px #132b2640;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.lw-header nav.lw-nav.wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.lw-header nav.lw-nav.wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container {
	min-width: 172px;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.lw-header .lw-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 10px 18px;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1.4;
}

.lw-header .lw-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.lw-header .lw-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background: #e7eee0;
	color: #1b382a;
	opacity: 1;
}

.lw-header .lw-nav .lw-nav__cta > .wp-block-navigation-item__content {
	padding: 11px 19px;
	border: 1px solid #ffffff9a;
	border-radius: var(--wp--custom--radius--cta);
}

/* 모바일 메뉴 버튼은 assets/js/nav.js 가 만든다. */
.lw-menu-toggle {
	display: none;
	padding: 8px;
	border: 0;
	background: none;
	color: #fff;
	font-size: 26px;
	line-height: 1;
}

/* ── 푸터 ─────────────────────────────────────────────── */

.lw-footer {
	padding: 68px 0 30px;
	background: var(--wp--preset--color--dark);
	color: #e9eee4;
}

.lw-footer__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: 80px;
}

.lw-footer .lw-brand {
	margin-bottom: 23px;
}

.lw-footer__about p:not(.lw-brand) {
	max-width: 290px;
	margin: 0;
	color: #b2c2b5;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.8;
}

.lw-footer__title {
	margin: 0 0 22px;
	color: #e4edda;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	line-height: 1.2;
}

.lw-footer .lw-footer__nav .wp-block-navigation__container {
	flex-direction: column;
	align-items: flex-start;
	gap: 13px;
}

.lw-footer .lw-footer__nav .wp-block-navigation-item__content {
	display: block;
	color: #afc1b2;
	font-size: var(--wp--preset--font-size--xs);
}

.lw-footer .lw-footer__nav .wp-block-navigation-item__content:hover {
	color: #fff;
}

.lw-footer__bottom {
	display: flex;
	justify-content: space-between;
	margin-top: 65px;
	padding-top: 22px;
	border-top: 1px solid #ffffff2f;
	color: #9cb2a3;
	font-size: var(--wp--preset--font-size--eyebrow);
}

.lw-footer__bottom p {
	margin: 0;
}

/* ── 공통 템플릿(글·페이지·목록·404) ───────────────────── */

.lw-page {
	padding-block: var(--wp--preset--spacing--section);
}

.lw-page .lw-title {
	margin-top: 20px;
}

.lw-page__head {
	margin-bottom: var(--wp--preset--spacing--l);
}

.lw-page__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 12px;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.lw-page__meta > * {
	margin: 0;
}

.lw-page__image {
	margin: 0 0 var(--wp--preset--spacing--l);
}

.lw-page__image img {
	width: 100%;
	height: auto;
	display: block;
}

.lw-prose {
	max-width: 760px;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.9;
}

.lw-prose > * + * {
	margin-block-start: 1.2em;
}

.lw-prose h2,
.lw-prose h3 {
	margin-block-start: 2em;
	line-height: 1.4;
	letter-spacing: -0.04em;
}

.lw-prose a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lw-posts .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lw-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	transition: transform 0.3s;
}

.lw-card:hover {
	transform: translateY(-6px);
}

.lw-card .wp-block-post-featured-image {
	margin: 0;
}

.lw-card .wp-block-post-featured-image img {
	width: 100%;
	height: 230px;
	object-fit: cover;
	display: block;
}

.lw-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 23px 24px 28px;
}

.lw-card__terms {
	color: var(--wp--preset--color--text-eyebrow);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.lw-card__title {
	margin: 14px 0 12px;
	font-size: 21px;
	line-height: 1.45;
	letter-spacing: -0.045em;
}

.lw-card .wp-block-post-excerpt {
	margin: 0;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.75;
}

.lw-card .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.lw-card__date {
	margin-top: auto;
	padding: 30px 0 8px;
	border-bottom: 1px solid #d6ddd4;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--xs);
}

.lw-pagination {
	margin-top: var(--wp--preset--spacing--l);
	gap: 18px;
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 700;
}

.lw-empty {
	max-width: 560px;
}

.lw-empty .wp-block-buttons {
	margin-top: 36px;
}

.lw-post-nav {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	max-width: 760px;
	margin-top: var(--wp--preset--spacing--xl);
	padding-top: 22px;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 700;
}

/* ── 중단점(시안: 1080 · 960 · 720 · 480) ──────────────── */

@media (max-width: 1080px) {
	.lw-header nav.lw-nav.wp-block-navigation,
	.lw-header .lw-nav .wp-block-navigation__container {
		gap: 15px;
	}

	.lw-header .lw-nav .has-child > .wp-block-navigation-item__content {
		font-size: var(--wp--preset--font-size--eyebrow);
	}

	.lw-header .lw-nav .lw-nav__cta > .wp-block-navigation-item__content {
		padding: 10px 12px;
		font-size: var(--wp--preset--font-size--eyebrow);
	}

	.lw-brand {
		font-size: 24px;
	}
}

@media (max-width: 960px) {
	.lw-wrap {
		width: min(calc(100% - 2 * var(--wp--custom--gutter--tablet)), var(--wp--custom--max));
	}

	.lw-header nav.lw-nav.wp-block-navigation {
		font-size: var(--wp--preset--font-size--eyebrow);
	}

	.lw-posts .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 720px) {
	.lw-header__inner {
		height: var(--wp--custom--header--height-mobile);
	}

	.lw-header .lw-brand {
		font-size: 23px;
	}

	.lw-js .lw-menu-toggle {
		display: block;
	}

	/* 모바일 메뉴 판 — JS 가 있으면 버튼으로 연다. 없으면 헤더가 흐름에 서고 메뉴가 펼쳐진 채 보인다. */
	.lw-header nav.lw-nav.wp-block-navigation {
		position: absolute;
		top: var(--wp--custom--header--height-mobile);
		left: 0;
		right: 0;
		max-height: calc(100vh - var(--wp--custom--header--height-mobile));
		overflow-y: auto;
		padding: 22px;
		background: #203a30;
		box-shadow: 0 16px 30px #14281e5c;
	}

	.lw-js .lw-header nav.lw-nav.wp-block-navigation {
		display: none;
	}

	.lw-js .lw-header nav.lw-nav.wp-block-navigation.is-open {
		display: block;
	}

	html:not(.lw-js) .lw-header {
		position: relative;
		background: var(--wp--preset--color--dark);
	}

	html:not(.lw-js) .lw-header nav.lw-nav.wp-block-navigation {
		position: static;
		width: 100%;
	}

	html:not(.lw-js) .lw-header__inner {
		flex-wrap: wrap;
		height: auto;
		min-height: var(--wp--custom--header--height-mobile);
	}

	.lw-header .lw-nav .wp-block-navigation__container {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.lw-header .lw-nav .wp-block-navigation-item,
	.lw-header .lw-nav .has-child {
		display: block;
		height: auto;
		white-space: normal;
		border-bottom: 1px solid #ffffff26;
	}

	.lw-header .lw-nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
		border-bottom: 0;
	}

	.lw-header .lw-nav .has-child > .wp-block-navigation-item__content {
		padding: 14px 6px 5px;
		font-size: var(--wp--preset--font-size--ui);
	}

	.lw-header .lw-nav .has-child > .wp-block-navigation-item__content::after {
		display: none;
	}

	.lw-header nav.lw-nav.wp-block-navigation .wp-block-navigation__submenu-container,
	.lw-header nav.lw-nav.wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
	.lw-header nav.lw-nav.wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container {
		position: static;
		min-width: 0;
		padding: 0 0 9px;
		border: 0;
		background: transparent;
		color: #d1dfd4;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.lw-header .lw-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 7px 15px;
		font-size: var(--wp--preset--font-size--xs);
	}

	.lw-header .lw-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.lw-header .lw-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		background: #ffffff1c;
		color: #fff;
	}

	.lw-header .lw-nav .lw-nav__cta > .wp-block-navigation-item__content {
		padding: 15px 6px;
		border: 0;
		font-size: var(--wp--preset--font-size--ui);
	}

	.lw-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 35px;
	}

	.lw-footer__grid > :first-child {
		grid-column: 1 / -1;
	}

	.lw-footer__bottom {
		gap: 20px;
	}

	.lw-posts .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.lw-wrap {
		width: calc(100% - 2 * var(--wp--custom--gutter--mobile));
	}

	.lw-title {
		font-size: 36px;
	}

	.lw-footer__grid {
		gap: 24px;
	}

	.lw-footer__bottom {
		flex-direction: column;
	}

	.lw-post-nav {
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}