/*
 * EchoNova — theme.json 으로 표현하기 어려운 컴포넌트 스타일
 * 색상·글꼴·간격은 theme.json 프리셋 변수(--wp--preset--*)를 사용합니다.
 */

/* ---------- 기본 ---------- */
body {
	word-break: keep-all;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* 헤더·본문·푸터 사이의 기본 간격 제거 (각 영역이 자체 여백을 가짐) */
.wp-site-blocks > * {
	margin-block-start: 0;
}

.en-muted {
	color: var(--wp--preset--color--muted);
}

/* 임시 자료 표시 */
.en-draft-note {
	background: var(--wp--preset--color--notice);
	color: var(--wp--preset--color--notice-text);
	font-size: var(--wp--preset--font-size--x-small);
	padding: 0.625rem 0.875rem;
	border-radius: 8px;
}

.en-tag-sample {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--notice);
	color: var(--wp--preset--color--notice-text);
	vertical-align: middle;
}

/* ---------- 헤더 ---------- */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 0px);
}

@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

.en-header__inner {
	min-height: 64px;
}

.en-wordmark {
	margin: 0;
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.en-wordmark a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.en-wordmark span {
	color: var(--wp--preset--color--accent);
}

.en-nav {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.en-nav a {
	text-decoration: none;
}

.en-nav .wp-block-navigation__responsive-container-open,
.en-nav .wp-block-search__button {
	font: inherit;
	color: var(--wp--preset--color--contrast);
	background: none;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	padding: 0.375rem 0.875rem;
	margin: 0;
}

.en-nav .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
	padding: 0.375rem 0.75rem;
	font: inherit;
}

.en-nav .wp-block-search__inside-wrapper {
	gap: 0.5rem;
	border: 0;
	padding: 0;
}

/* 모바일 메뉴 펼침 화면 */
.en-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40);
}

.en-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
}

.en-nav .is-menu-open .wp-block-navigation-item {
	width: 100%;
	padding: 0.875rem 0;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--medium);
}

/* ---------- 공통 구획 ---------- */
.en-section {
	padding-block: var(--wp--preset--spacing--60);
}

.en-hero + .en-section,
.en-section + .en-section {
	border-top: 1px solid var(--wp--preset--color--line);
}

.wp-block-heading.en-section__title {
	margin: 0;
}

.en-section__desc {
	margin-top: 0.5rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.en-section > .wp-block-query,
.en-section > .wp-block-columns {
	margin-block-start: var(--wp--preset--spacing--50);
}

.en-kicker {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--accent);
}

.en-kicker a {
	color: inherit;
	text-decoration: none;
}

/* ---------- 홈: 대표 기사 ---------- */
.en-hero {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.en-hero .wp-block-post-template > li > * {
	max-width: 820px;
	margin-block-start: 0;
}

.en-hero .en-hero__title {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 800;
	margin-block: 1rem 1.5rem;
}

.en-hero__title a {
	text-decoration: none;
}

.en-hero .en-hero__dek {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--muted);
	max-width: 36em;
	margin-bottom: 1.5rem;
}

.en-hero__dek p {
	margin: 0;
}

.en-read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: 0.75rem 1.25rem;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast);
	color: #fff;
	text-decoration: none;
}

.en-read-more:hover,
.en-read-more:focus-visible {
	background: var(--wp--preset--color--accent);
	color: #fff;
}

.en-hero .wp-block-post-template > li > .en-hero__media {
	max-width: none;
	margin-block-start: var(--wp--preset--spacing--50);
}

.en-hero__media img,
.en-card__media img,
.en-single-featured img {
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
}

/* ---------- 카드 목록 ---------- */
.wp-block-post-template.en-cards {
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.en-cards > li > * {
	margin-block-start: 0.5rem;
}

.en-cards > li > :first-child {
	margin-block-start: 0;
}

.en-cards .en-card__media {
	margin-bottom: 0.25rem;
}

.en-card__topic {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	color: var(--wp--preset--color--accent);
}

.en-card__topic a {
	color: inherit;
	text-decoration: none;
}

.en-cards .en-card__title {
	font-size: var(--wp--preset--font-size--large);
}

.en-card__title a {
	text-decoration: none;
}

.en-card__excerpt {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.en-card__excerpt p {
	margin: 0;
}

/* ---------- 주제별 목록 ---------- */
.en-topic-grid {
	gap: var(--wp--preset--spacing--40);
}

.en-topic {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: var(--wp--preset--spacing--40);
}

.en-topic > * {
	margin-block-start: 0;
}

.en-topic .en-topic__title {
	font-size: var(--wp--preset--font-size--large);
	margin-bottom: 0.25rem;
}

.en-topic__title a {
	text-decoration: none;
}

.en-topic__desc {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: 1rem;
}

.en-topic__list .wp-block-post-template > li {
	border-top: 1px solid var(--wp--preset--color--line);
	padding: 0.75rem 0;
	margin: 0;
}

.en-topic__list .wp-block-post-title {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0;
	margin: 0;
}

.en-topic__list .wp-block-post-title a {
	text-decoration: none;
}

.en-topic__list .wp-block-post-title a:hover {
	text-decoration: underline;
}

.en-topic__list p {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: 0.75rem;
	margin: 0;
}

/* 소개 */
.en-about {
	max-width: 46em;
}

.en-about p {
	color: var(--wp--preset--color--muted);
}

.en-about strong {
	color: var(--wp--preset--color--contrast);
}

/* ---------- 기사 ---------- */
.en-article-header {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.en-article-header > * {
	margin-block-start: 0;
}

.en-article-header .en-article-title {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 800;
	margin-block: 1rem;
}

.en-article-header .en-dek {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--muted);
	margin-bottom: 1rem;
}

.en-dek p {
	margin: 0;
}

.en-article-meta {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	gap: 0.75rem;
}

.en-article-meta a {
	text-decoration: none;
}

.wp-block-post-content > h2 {
	margin-block-start: var(--wp--preset--spacing--60);
}

.wp-block-post-content > h3 {
	margin-block-start: var(--wp--preset--spacing--50);
}

.wp-block-post-content > h2 + *,
.wp-block-post-content > h3 + * {
	margin-block-start: 0.75rem;
}

/* 30초 답변 (그룹 블록 스타일) */
.wp-block-group.is-style-en-quick-answer {
	background: var(--wp--preset--color--surface);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: 0 10px 10px 0;
	padding: var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--50);
}

.is-style-en-quick-answer > * {
	margin-block-start: 0;
}

.is-style-en-quick-answer .en-quick-answer__label {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--accent);
	margin-bottom: 0.5rem;
}

.is-style-en-quick-answer .en-quick-answer__body {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.7;
	margin-bottom: 0;
}

/* 비교표 (표 블록 스타일) */
.wp-block-table.is-style-en-compare {
	margin-block: var(--wp--preset--spacing--50);
}

.wp-block-table.is-style-en-compare table {
	border-collapse: collapse;
	background: var(--wp--preset--color--surface);
	border-radius: 10px;
	overflow: hidden;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.wp-block-table.is-style-en-compare thead {
	border: 0;
}

.wp-block-table.is-style-en-compare th,
.wp-block-table.is-style-en-compare td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 0.875rem 1rem;
	text-align: left;
	vertical-align: top;
}

.wp-block-table.is-style-en-compare thead th {
	background: var(--wp--preset--color--contrast);
	color: #fff;
	font-weight: 600;
}

.wp-block-table.is-style-en-compare tbody td:first-child {
	font-weight: 700;
}

.wp-block-table.is-style-en-compare tbody tr:last-child > * {
	border-bottom: 0;
}

.wp-block-table.is-style-en-compare figcaption {
	text-align: left;
	margin-top: 0.75rem;
}

/* 좁은 화면: 표를 항목 카드로 쌓기 (data-label 은 functions.php 에서 추가) */
@media (max-width: 639px) {
	.wp-block-table.is-style-en-compare table,
	.wp-block-table.is-style-en-compare tbody,
	.wp-block-table.is-style-en-compare tr,
	.wp-block-table.is-style-en-compare td {
		display: block;
		width: 100%;
	}

	.wp-block-table.is-style-en-compare table {
		background: none;
	}

	.wp-block-table.is-style-en-compare thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.wp-block-table.is-style-en-compare tr {
		background: var(--wp--preset--color--surface);
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 0.75rem;
	}

	.wp-block-table.is-style-en-compare tbody td:first-child {
		background: var(--wp--preset--color--contrast);
		color: #fff;
	}

	.wp-block-table.is-style-en-compare td + td {
		display: grid;
		grid-template-columns: 7.5em 1fr;
		gap: 0.75rem;
	}

	.wp-block-table.is-style-en-compare td + td::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--wp--preset--color--muted);
	}

	.wp-block-table.is-style-en-compare tbody tr > * {
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	.wp-block-table.is-style-en-compare tbody tr > :last-child {
		border-bottom: 0;
	}
}

/* 기억할 세 가지 (그룹 블록 스타일) */
.wp-block-group.is-style-en-takeaways {
	background: var(--wp--preset--color--contrast);
	color: #fff;
	border-radius: 10px;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.is-style-en-takeaways > * {
	margin-block-start: 0;
}

.is-style-en-takeaways h2 {
	color: #fff;
	margin-bottom: var(--wp--preset--spacing--40);
}

.is-style-en-takeaways a {
	color: #fff;
}

.is-style-en-takeaways ol {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: en-take;
}

.is-style-en-takeaways ol > li {
	counter-increment: en-take;
	display: grid;
	grid-template-columns: 2.25rem 1fr;
	gap: 0.5rem;
	padding-block: 0.875rem;
	margin: 0;
	border-top: 1px solid rgb(255 255 255 / 0.16);
}

.is-style-en-takeaways ol > li::before {
	content: counter(en-take, decimal-leading-zero);
	color: #8fb1f0;
	font-weight: 700;
}

/* 출처 (그룹 블록 스타일) */
.wp-block-group.is-style-en-sources {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--50);
}

.is-style-en-sources > * {
	margin-block-start: 0.75rem;
}

.is-style-en-sources > :first-child {
	margin-block-start: 0;
}

.is-style-en-sources h2 {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
}

.is-style-en-sources ol {
	padding-left: 1.25em;
}

.is-style-en-sources li + li {
	margin-top: 0.5em;
}

/* 목록·검색·보관함 머리 */
.en-archive-header {
	padding-block: var(--wp--preset--spacing--50) 0;
}

.en-archive-header > * {
	margin-block-start: 0;
}

.en-archive-header .wp-block-term-description {
	color: var(--wp--preset--color--muted);
	margin-top: 0.5rem;
}

.wp-block-query-pagination {
	margin-block-start: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-query-pagination a {
	text-decoration: none;
}

/* ---------- 푸터 ---------- */
.en-footer {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-block: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.en-footer p {
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}