/*
Theme Name: Build-up English
Theme URI: https://example.com/
Author: Diana
Description: 바로 꺼내 쓰는, 센스 있는 영어. 상황별 영어 사전 사이트를 위한 블록 테마입니다.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: buildup-english
*/

:root {
	--bue-accent: var(--wp--preset--color--accent, #A8472A);
	--bue-accent-dark: var(--wp--preset--color--accent-dark, #8E3B22);
	--bue-hl: var(--wp--preset--color--highlight, #FFD9B8);
	--bue-tag: var(--wp--preset--color--tag-bg, #FBEDE6);
	--bue-soft: var(--wp--preset--color--soft, #FBF4F0);
	--bue-gray: var(--wp--preset--color--gray-bg, #F4F5F7);
	--bue-ink: var(--wp--preset--color--ink, #16181D);
	--bue-muted: var(--wp--preset--color--muted, #4B5160);
	--bue-subtle: var(--wp--preset--color--subtle, #6B7280);
	--bue-line: var(--wp--preset--color--line, #E6E7EB);
	--bue-display: var(--wp--preset--font-family--display, "Space Grotesk", sans-serif);
}

body { margin: 0; -webkit-font-smoothing: antialiased; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }

/* ---------- 공통 ---------- */
.bue-eyebrow {
	font-family: var(--bue-display);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bue-accent);
	margin: 0 0 14px;
}
.bue-lead { font-size: 18px; color: var(--bue-muted); margin-top: 0; }
.bue-muted { color: var(--bue-muted); }
mark.bue-hl, .bue-hl {
	background: linear-gradient(transparent 58%, var(--bue-hl) 58%);
	color: inherit;
}
.bue-section { padding-top: 80px; padding-bottom: 80px; }
.bue-section > h2, .bue-section-title { margin: 0 0 10px; }
.bue-section-desc { margin: 0 0 36px; color: var(--bue-muted); }
.bue-bg-soft { background: var(--bue-soft); }
.bue-bg-gray { background: var(--bue-gray); }
.bue-en { font-family: var(--bue-display); }

.bue-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
}
.bue-grid > * { margin: 0 !important; }

.bue-card {
	border: 1px solid var(--bue-line);
	border-radius: 18px;
	padding: 28px;
	background: #fff;
}
.bue-card > * { margin-top: 0; margin-bottom: 12px; }
.bue-card > *:last-child { margin-bottom: 0; }
.bue-card-label { font-family: var(--bue-display); font-weight: 700; font-size: 14px; color: var(--bue-accent); }
.bue-card h3 { font-size: 21px; }

.bue-link-strong a, a.bue-link-strong { font-weight: 700; color: var(--bue-accent); text-decoration: none; }

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--bue-ink);
	border: 1.5px solid var(--bue-ink);
}
.wp-block-button.bue-btn-dark > .wp-block-button__link { background: var(--bue-ink); color: #fff; }
.wp-block-button.bue-btn-hl > .wp-block-button__link { background: var(--bue-hl); color: var(--bue-ink); }

/* ---------- 헤더 ---------- */
.bue-header { border-bottom: 1px solid var(--bue-line); background: #fff; }
.bue-header-inner {
	max-width: 1160px;
	margin: 0 auto;
	padding-top: 16px;
	padding-bottom: 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
}
.bue-brand { margin: 0; font-family: var(--bue-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.bue-brand a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--bue-ink); }
.bue-brand a::before {
	content: "";
	width: 40px;
	height: 40px;
	border-radius: 10px;
	flex: 0 0 auto;
	background:
		linear-gradient(var(--bue-hl), var(--bue-hl)) center 11px / 14px 4px no-repeat,
		linear-gradient(#fff, #fff) center 18px / 20px 4px no-repeat,
		linear-gradient(#fff, #fff) center 25px / 26px 4px no-repeat,
		var(--bue-accent);
}
.bue-header-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bue-nav { font-size: 15px; font-weight: 500; }
.bue-nav .wp-block-navigation-item__content { padding: 10px 6px; }
.bue-header .wp-block-button__link { padding: 11px 18px; font-size: 15px; border-radius: 10px; }

/* ---------- 히어로 ---------- */
.bue-hero { background: var(--bue-soft); padding-top: 88px; padding-bottom: 80px; text-align: center; }
.bue-hero .bue-hero-title { font-size: clamp(34px, 5vw, 54px); line-height: 1.22; letter-spacing: -0.03em; margin: 0 0 20px; }
.bue-hero .bue-lead { max-width: 600px; margin: 0 auto 36px; }
.bue-search { max-width: 680px; margin: 0 auto !important; text-align: left; }
.bue-search .wp-block-search__label { font-size: 15px; font-weight: 500; margin-bottom: 8px; display: block; }
.bue-search .wp-block-search__inside-wrapper { gap: 10px; border: 0; padding: 0; }
.bue-search .wp-block-search__input {
	height: 58px;
	padding: 0 20px;
	border-radius: 14px;
	border: 1.5px solid #C9CCD3;
	font-size: 17px;
	background: #fff;
}
.bue-search .wp-block-search__button {
	height: 58px;
	margin: 0;
	padding: 0 28px;
	border-radius: 14px;
	border: 0;
	background: var(--bue-accent);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
}
.bue-chips { margin: 22px auto 0 !important; max-width: 760px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; font-size: 14px; }
.bue-chips span { color: var(--bue-muted); padding: 8px 0; }
.bue-chips a {
	padding: 8px 16px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid #E0D6D1;
	text-decoration: none;
	font-weight: 500;
}

/* ---------- 상황 그룹 카드 ---------- */
.bue-links { list-style: none; padding: 0; margin: 0 0 12px; }
.bue-links li { border-top: 1px solid #F0F1F3; }
.bue-links a { display: block; padding: 10px 0; text-decoration: none; font-size: 15px; }
.bue-links a::after { content: "›"; float: right; color: var(--bue-subtle); }

/* ---------- 새로 쌓인 표현 (쿼리) ---------- */
.bue-post-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; padding: 0; margin: 0; }
.bue-post-grid > li { margin: 0 !important; list-style: none; }
.bue-post-grid .wp-block-post,
.bue-post-grid > li {
	background: #fff;
	border: 1px solid var(--bue-line);
	border-radius: 16px;
	padding: 24px;
}
.bue-post-grid .wp-block-post-title { font-size: 19px; margin: 10px 0 8px; }
.bue-post-grid .wp-block-post-title a { text-decoration: none; }
.bue-post-grid .wp-block-post-excerpt { font-size: 15px; color: var(--bue-muted); margin: 0; }
.bue-post-grid .wp-block-post-excerpt__excerpt { margin: 0; }
.bue-tag a, .bue-tag {
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.bue-tag a {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--bue-tag);
	color: var(--bue-accent-dark);
}
.bue-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 32px !important; }
.bue-head-row > * { margin: 0 !important; }

/* ---------- 미팅에서 통하는 영어 ---------- */
.bue-panel {
	background: var(--bue-soft);
	border: 1px solid #F0E2DA;
	border-radius: 24px;
	padding: 48px;
	gap: 40px;
}
.bue-steps { list-style: none; padding: 0; margin: 0; counter-reset: bue-step; display: flex; flex-direction: column; gap: 10px; }
.bue-steps li {
	counter-increment: bue-step;
	position: relative;
	background: #fff;
	border: 1px solid var(--bue-line);
	border-radius: 14px;
	padding: 16px 20px 16px 70px;
	font-size: 16px;
	line-height: 1.5;
}
.bue-steps li::before {
	content: counter(bue-step);
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--bue-tag);
	color: var(--bue-accent-dark);
	font-family: var(--bue-display);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bue-steps .bue-en { color: var(--bue-muted); font-size: 15px; }

/* ---------- 챌린지 (어두운 박스) ---------- */
.bue-dark {
	background: var(--bue-ink);
	color: #fff;
	border-radius: 24px;
	padding: 48px;
	gap: 40px;
}
.bue-dark h2, .bue-dark h3 { color: #fff; }
.bue-dark .bue-eyebrow { color: var(--bue-hl); }
.bue-dark p { color: #D4D7DE; }
.bue-dark a { color: #fff; }
.bue-weeks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.bue-weeks span { font-size: 14px; padding: 6px 12px; border-radius: 999px; border: 1px solid #4A4F5C; color: #D4D7DE; }
.bue-form-box { background: #fff; color: var(--bue-ink); border-radius: 18px; padding: 24px; }
.bue-form-box p { color: var(--bue-muted); }

/* ---------- 템플릿 카드 ---------- */
.bue-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--bue-tag);
	position: relative;
	margin-bottom: 14px !important;
}
.bue-icon::before, .bue-icon::after {
	content: "";
	position: absolute;
	width: 14px;
	height: 16px;
	border: 2px solid var(--bue-accent-dark);
	border-radius: 3px;
}
.bue-icon::before { left: 11px; top: 10px; }
.bue-icon::after { left: 17px; top: 16px; background: var(--bue-tag); }

/* ---------- 질문하기 ---------- */
.bue-qa {
	background: #fff;
	border: 1px solid var(--bue-line);
	border-radius: 14px;
	padding: 20px 22px;
	margin: 0 0 12px !important;
}
.bue-qa .bue-q { font-size: 15px; color: var(--bue-muted); margin: 0 0 6px; }
.bue-qa .bue-a { font-family: var(--bue-display); font-weight: 700; font-size: 17px; margin: 0; }

/* ---------- 강의 ---------- */
.bue-class {
	border: 1.5px solid var(--bue-accent);
	border-radius: 24px;
	padding: 44px;
	gap: 40px;
	align-items: center;
}
.bue-avatar {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background: var(--bue-gray);
	border: 1.5px dashed #9AA0AC;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bue-subtle);
	font-size: 14px;
	text-align: center;
	margin: 0 auto;
}
.bue-avatar-img img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; }

/* ---------- 구독 띠 ---------- */
.bue-subscribe { background: var(--bue-accent); color: #fff; padding-top: 72px; padding-bottom: 72px; }
.bue-subscribe h2 { color: #fff; }
.bue-subscribe p { color: #F7E2D8; }
.bue-subscribe a { color: #fff; }
.bue-subscribe .bue-form-box p { color: var(--bue-muted); }

/* ---------- 푸터 ---------- */
.bue-footer { border-top: 1px solid var(--bue-line); }
.bue-footer-inner {
	max-width: 1160px;
	margin: 0 auto;
	padding-top: 36px;
	padding-bottom: 36px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
	font-size: 14px;
	color: var(--bue-subtle);
}
.bue-footer-inner p { margin: 0; }
.bue-footer-links a { color: var(--bue-muted); text-decoration: none; margin-left: 18px; }
.bue-footer-links a:first-child { margin-left: 0; }

/* ---------- 상황 페이지 ---------- */
.bue-single { padding-top: 48px; padding-bottom: 80px; }
.bue-single-cols { gap: 56px; }
.bue-crumb { font-size: 14px; color: var(--bue-subtle); margin-bottom: 8px; }
.bue-crumb a { color: var(--bue-muted); }
.bue-post-title { font-size: clamp(32px, 4vw, 42px); line-height: 1.3; margin: 0 0 16px; }

.bue-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 32px; font-size: 14px; }
.bue-share-label { color: var(--bue-subtle); margin-right: 4px; }
.bue-share button, .bue-share a {
	height: 36px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid #D5D8DE;
	background: #fff;
	color: var(--bue-ink);
	font: inherit;
	font-weight: 500;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

.bue-phrase {
	position: relative;
	border: 1px solid var(--bue-line);
	border-radius: 18px;
	padding: 26px 28px;
	margin: 0 0 16px !important;
}
.bue-phrase > * { margin: 0; }
.bue-level {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--bue-tag);
	color: var(--bue-accent-dark);
	margin-bottom: 14px !important;
}
.bue-phrase-en { font-family: var(--bue-display); font-weight: 700; font-size: 23px; line-height: 1.4; margin-bottom: 6px !important; padding-right: 72px; }
.bue-phrase-ko { color: var(--bue-muted); margin-bottom: 14px !important; }
.bue-phrase-when { font-size: 15px; color: var(--bue-muted); padding-top: 14px; border-top: 1px solid #F0F1F3; }
.bue-phrase-when strong { color: var(--bue-ink); }
.bue-copy {
	position: absolute;
	top: 22px;
	right: 22px;
	height: 40px;
	padding: 0 14px;
	border-radius: 10px;
	border: 1px solid #D5D8DE;
	background: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--bue-ink);
	cursor: pointer;
}
.bue-copy:hover { border-color: var(--bue-accent); color: var(--bue-accent); }

.bue-dialogue { background: var(--bue-soft); border-radius: 18px; padding: 28px; }
.bue-dialogue > * { margin: 0 0 14px; }
.bue-dialogue > *:last-child { margin-bottom: 0; }
.bue-line { position: relative; padding-left: 50px; font-family: var(--bue-display); font-size: 18px; line-height: 1.5; min-height: 36px; }
.bue-line strong:first-child {
	position: absolute;
	left: 0;
	top: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #E0D6D1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}
.bue-line.bue-b strong:first-child { background: var(--bue-accent); border-color: var(--bue-accent); color: #fff; }
.bue-line .bue-ko { display: block; font-family: var(--wp--preset--font-family--body); font-size: 14px; color: var(--bue-muted); }

.bue-mission { border: 2px solid var(--bue-ink); border-radius: 18px; padding: 28px; }
.bue-mission > * { margin: 0 0 6px; }
.bue-mission h3 { font-size: 19px; }
.bue-mission p:last-child { margin: 0; color: var(--bue-muted); }

.bue-cta { margin-top: 32px !important; border-radius: 18px; padding: 28px; gap: 20px; align-items: center; }
.bue-cta h3 { font-size: 19px; margin: 0 0 6px; }
.bue-cta p { margin: 0; font-size: 15px; }

.bue-aside > * { margin: 0 0 24px !important; }
.bue-aside .bue-card { padding: 24px; }
.bue-aside h3 { font-size: 16px; margin: 0 0 10px; }
.bue-side-list { padding: 0; margin: 0; }
.bue-side-list li { list-style: none; border-top: 1px solid #F0F1F3; margin: 0 !important; }
.bue-side-list .wp-block-post-title { font-size: 15px; font-weight: 500; letter-spacing: 0; margin: 0; }
.bue-side-list .wp-block-post-title a { display: block; padding: 10px 0; text-decoration: none; }
.bue-side-accent { background: var(--bue-accent); color: #fff; border-color: var(--bue-accent) !important; }
.bue-side-accent h3, .bue-side-accent p { color: #fff; }
.bue-side-accent p { color: #F7E2D8; }

/* ---------- 목록 페이지 ---------- */
.bue-archive { padding-top: 56px; padding-bottom: 80px; }
.bue-archive .wp-block-query-pagination { margin-top: 32px; }

@media (max-width: 781px) {
	.bue-panel, .bue-dark, .bue-class { padding: 28px; }
	.bue-section { padding-top: 56px; padding-bottom: 56px; }
	.bue-hero { padding-top: 56px; padding-bottom: 56px; }
	.bue-phrase-en { font-size: 20px; padding-right: 0; padding-top: 40px; }
	.bue-copy { top: 18px; right: 18px; }
}