/* Hawoo Lab — semantic aliases + component layer.
   Every value below resolves to a theme.json preset; do not hard-code hex here.
   Loaded on the front end and inside the block editor (add_editor_style). */

:root {
	--hw-paper: var(--wp--preset--color--paper);
	--hw-paper-raised: var(--wp--preset--color--paper-raised);
	--hw-sunken: var(--wp--preset--color--surface-sunken);
	--hw-ink: var(--wp--preset--color--ink-900);
	--hw-ink-700: var(--wp--preset--color--ink-700);
	--hw-ink-500: var(--wp--preset--color--ink-500);
	--hw-ink-300: var(--wp--preset--color--ink-300);
	--hw-on-ink: var(--wp--preset--color--on-ink);
	--hw-on-ink-muted: var(--wp--preset--color--on-ink-muted);
	--hw-rule: var(--wp--preset--color--rule);
	--hw-rule-strong: var(--wp--preset--color--rule-strong);
	--hw-signal: var(--wp--preset--color--signal);
	--hw-signal-hover: var(--wp--preset--color--signal-hover);
	--hw-signal-soft: var(--wp--preset--color--signal-soft);
	--hw-deep: var(--wp--preset--color--deep);
	--hw-success: #2E6B4F;
	--hw-success-soft: #EDF4F0;
	--hw-success-rule: #CADCD2;
	--hw-error: #A3271F;
	--hw-mono: var(--wp--preset--font-family--mono);
	--hw-serif: var(--wp--preset--font-family--display);
	--hw-label: var(--wp--preset--font-size--label);
	--hw-reading: 68ch;
	--hw-gutter: clamp(20px, 4vw, 64px);
	--hw-page: 1280px;
	--hw-motion: 180ms cubic-bezier(0.2, 0, 0, 1);
}

body {
	word-break: keep-all;
	text-wrap: pretty;
	-webkit-font-smoothing: antialiased;
}

/* Long Latin technical terms may break inside narrow columns; Korean never
   ellipsises. */
h1, h2, h3 { overflow-wrap: anywhere; text-overflow: clip; }

:focus-visible {
	outline: 2px solid var(--hw-deep);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* --- Shared page shell --------------------------------------------------- */
/* Sections rendered by PHP (lists, cards) use this instead of the core
   constrained layout so they line up with block-rendered sections. */
.hw-wrap {
	max-width: var(--hw-page);
	margin-inline: auto;
	padding-inline: var(--hw-gutter);
	box-sizing: border-box;
}

.hw-band { border-top: 1px solid var(--hw-rule); }
.hw-band--sunken { background: var(--hw-sunken); }
.hw-band--ink { background: var(--wp--preset--color--surface-ink); color: var(--hw-on-ink); }
.hw-band--ink h2, .hw-band--ink h3 { color: var(--hw-on-ink); }
.hw-pad { padding-block: clamp(32px, 4.5vw, 64px); }
.hw-pad-lg { padding-block: clamp(44px, 6vw, 88px); }

/* --- Labels -------------------------------------------------------------- */
/* Korean labels: Pretendard 600, near-normal tracking (mono has no Hangul,
   so mono + wide tracking would fall back to Pretendard with the tracking
   still applied — the exact defect this rule exists to prevent). */
.is-style-hw-label,
.hw-label {
	font-family: inherit;
	font-size: var(--hw-label);
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: none;
	color: var(--hw-ink-500);
	margin-bottom: 12px;
}
/* Latin / numeral labels only: S—01, A—01, DRAFT, P1–P4, Topic, Filter */
.is-style-hw-label-mono,
.hw-label-mono {
	font-family: var(--hw-mono);
	font-size: var(--hw-label);
	font-weight: 400;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--hw-ink-500);
	margin-bottom: 12px;
}
.hw-label--signal, .is-style-hw-label.hw-on-signal { color: var(--hw-signal); }

/* --- Structure ----------------------------------------------------------- */
.hw-section-rule {
	border-top: 2px solid var(--hw-ink);
	padding-top: 14px;
	margin-bottom: 0;
}
.hw-hairline { border-bottom: 1px solid var(--hw-rule); }
.hw-reading { max-width: var(--hw-reading); }

.is-style-hw-card {
	background: var(--hw-paper-raised);
	border: 1px solid var(--hw-rule);
	border-radius: 4px;
	padding: 24px;
}

.is-style-hw-takeaway {
	background: var(--hw-signal-soft);
	border-left: 3px solid var(--hw-signal);
	padding: 22px 24px;
}
.is-style-hw-takeaway li { color: var(--hw-ink); }
.is-style-hw-takeaway > :first-child { margin-top: 0; }
.is-style-hw-takeaway > :last-child,
.is-style-hw-delivery-context > :last-child,
.is-style-hw-card > :last-child { margin-bottom: 0; }

.is-style-hw-delivery-context {
	background: var(--hw-paper-raised);
	border: 1px solid var(--hw-rule-strong);
	padding: 22px 24px;
}
.is-style-hw-delivery-context code,
.is-style-hw-delivery-context .hw-approved-wording {
	display: block;
	font-family: var(--hw-mono);
	font-size: 14px;
	color: var(--hw-ink);
	background: var(--hw-sunken);
	padding: 10px 12px;
}

/* --- Top status bar ------------------------------------------------------ */
.hw-topbar {
	background: var(--wp--preset--color--surface-ink);
	color: var(--hw-on-ink-muted);
	font-family: var(--hw-mono);
	font-size: var(--hw-label);
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.6;
}
.hw-topbar__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	justify-content: space-between;
	padding-block: 9px;
}

/* --- Header -------------------------------------------------------------- */
.hw-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--hw-paper-raised);
	border-bottom: 1px solid var(--hw-rule);
}
.hw-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	min-height: 76px;
	padding-block: 12px;
}
.hw-brand {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	text-decoration: none;
	color: inherit;
	padding-block: 6px;
	min-height: 44px;
}
.hw-brand__mark {
	font-size: clamp(23px, 2.4vw, 30px);
	font-weight: 700;
	letter-spacing: -0.032em;
	color: var(--hw-ink);
	line-height: 1;
}
.hw-brand__mark em { font-style: normal; color: var(--hw-signal); }
.hw-brand__lockup {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--hw-ink-500);
}
.hw-brand__rule {
	width: 1px;
	height: 26px;
	background: var(--hw-rule-strong);
	display: inline-block;
}
.hw-brand__tagline {
	font-family: var(--hw-mono);
	font-size: var(--hw-label);
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.45;
}

.hw-nav { display: flex; gap: clamp(10px, 1.4vw, 22px); flex-wrap: nowrap; }
.hw-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 2px;
	font-size: 15px;
	font-weight: 500;
	color: var(--hw-ink-500);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color var(--hw-motion), border-color var(--hw-motion);
	white-space: nowrap;
}
.hw-nav a:hover { color: var(--hw-signal); }
.hw-nav a[aria-current] {
	font-weight: 600;
	color: var(--hw-ink);
	border-bottom-color: var(--hw-signal);
}

@media (max-width: 767px) {
	.hw-header__inner { min-height: 0; }
	.hw-brand__lockup { display: none; }
	.hw-nav { width: 100%; overflow-x: auto; gap: 16px; }
}

/* --- Footer -------------------------------------------------------------- */
.hw-footer { border-top: 1px solid var(--hw-rule); background: var(--hw-paper-raised); }
.hw-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: space-between;
	align-items: flex-start;
	padding-block: clamp(28px, 4vw, 48px);
}
.hw-footer__mark { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; }
.hw-footer__mark em { font-style: normal; color: var(--hw-signal); }
.hw-footer__note { font-size: 14px; color: var(--hw-ink-500); line-height: 1.9; }

/* --- Hero ---------------------------------------------------------------- */
/* The band on the right is reserved in markup so no stroke ever crosses text. */
.hw-hero { position: relative; overflow: hidden; }
.hw-hero > * { position: relative; }
.hw-hero > .hw-hero-visual { position: absolute; }
/* The art band is reserved on the centred content box, so the measured text
   edge lands in the same place the prototype puts it. Remove this padding and
   the graphic will run through the copy. */
@media (min-width: 820px) {
	.hw-hero__inner { padding-right: clamp(20px, 26vw, 340px); }
}
.hw-hero-visual { position: absolute; inset: 0; pointer-events: none; }
.hw-hero-visual canvas { width: 100%; height: 100%; display: block; }

.hw-hero__meta {
	margin: 0;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 8px 16px;
	font-size: 14px;
	border-left: 1px solid var(--hw-rule);
	padding-left: 20px;
}
.hw-hero__meta dt {
	font-family: var(--hw-mono);
	font-size: var(--hw-label);
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--hw-ink-500);
}
.hw-hero__meta dd { margin: 0; color: var(--hw-ink-700); }

.hw-hero__pull {
	border-left: 3px solid var(--hw-signal);
	padding-left: 20px;
}
.hw-hero__pull--deep { border-left-color: var(--hw-deep); }
.hw-hero__pull p {
	margin: 0;
	font-size: clamp(17px, 1.6vw, 21px);
	line-height: 1.6;
	font-weight: 600;
	letter-spacing: -0.012em;
	color: var(--hw-ink);
}
.hw-hero__pull p + p {
	font-weight: 400;
	color: var(--hw-ink-500);
	font-size: 15px;
	line-height: 1.75;
	margin-top: 8px;
}
.hw-hero__pull--serif p {
	font-family: var(--hw-serif);
	font-weight: 400;
	font-size: clamp(18px, 1.8vw, 23px);
	line-height: 1.5;
}

/* --- Operating modes (3 columns divided by rules) ------------------------ */
.hw-modes { display: flex; flex-wrap: wrap; }
.hw-modes > * {
	flex: 1 1 260px;
	min-width: 0;
	padding: 36px clamp(24px, 3vw, 44px) 40px;
	border-right: 1px solid var(--hw-rule);
}
.hw-modes > *:first-child { padding-left: 0; }
.hw-modes > *:last-child { padding-right: 0; border-right: 0; }
.hw-modes h2 { margin: 10px 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.hw-modes p { margin: 0; font-size: 15px; line-height: 1.8; color: var(--hw-ink-500); }
@media (max-width: 767px) {
	.hw-modes > * {
		padding: 24px 0;
		border-right: 0;
		border-bottom: 1px solid var(--hw-rule);
	}
	.hw-modes > *:last-child { border-bottom: 0; }
}

/* --- Item rows (solutions, advisory services, principles) ---------------- */
.hw-items { margin: 0; padding: 0; list-style: none; }
.hw-item {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(12px, 3vw, 40px);
	padding: 26px 0;
	border-bottom: 1px solid var(--hw-rule);
	align-items: flex-start;
}
.hw-item__code {
	flex: 0 0 56px;
	font-family: var(--hw-mono);
	font-size: var(--hw-label);
	letter-spacing: .08em;
	color: var(--hw-ink-500);
	padding-top: 6px;
}
.hw-item__code--deep { color: var(--hw-deep); }
.hw-item__main { flex: 1 1 300px; min-width: 0; }
.hw-item__main h2,
.hw-item__main h3 {
	margin: 0 0 10px;
	font-size: clamp(18px, 1.8vw, 23px);
	font-weight: 600;
	letter-spacing: -0.015em;
}
.hw-item__main p { margin: 0; color: var(--hw-ink-700); line-height: 1.8; max-width: 46ch; font-size: 16px; }
.hw-item__en {
	font-family: var(--hw-mono);
	font-size: var(--hw-label);
	letter-spacing: .06em;
	color: var(--hw-ink-300);
	margin: -4px 0 10px;
}
.hw-item__aside { flex: 1 1 220px; min-width: 0; color: var(--hw-ink-500); font-size: 15px; line-height: 1.8; }
.hw-item__aside--wide { flex: 2 1 240px; }
.hw-item__aside ul { margin: 0; padding: 0; list-style: none; }
.hw-item__aside li {
	border-bottom: 1px solid var(--hw-rule);
	padding: 10px 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--hw-ink-700);
}
.hw-item__aside li:last-child { border-bottom: 0; }
.hw-item__cta { flex: 0 0 auto; padding-top: 4px; }
.hw-item__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--hw-ink);
	font-size: 15px;
	line-height: 1.7;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--hw-rule-strong);
}
.hw-item__link:hover { color: var(--hw-signal); }

/* Principles rows keep a tighter three-part rhythm. */
.hw-principle { padding: 20px 0; }
.hw-principle .hw-item__code { flex: 0 0 52px; color: var(--hw-signal); padding-top: 4px; }
.hw-principle h2 { flex: 1 1 220px; min-width: 0; margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.012em; }
.hw-principle p { flex: 2 1 300px; min-width: 0; margin: 0; color: var(--hw-ink-700); font-size: 15px; line-height: 1.8; }

/* --- Buttons ------------------------------------------------------------- */
.hw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 12px 22px;
	border: 0;
	border-radius: 2px;
	background: var(--hw-signal);
	color: var(--hw-paper-raised);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--hw-motion), border-color var(--hw-motion), color var(--hw-motion);
}
.hw-btn:hover { background: var(--hw-signal-hover); color: var(--hw-paper-raised); }
.hw-btn--outline {
	background: none;
	border: 1px solid var(--hw-rule-strong);
	color: var(--hw-ink);
}
.hw-btn--outline:hover { background: none; border-color: var(--hw-ink); color: var(--hw-ink); }
.hw-btn--on-ink {
	background: none;
	border: 1px solid var(--hw-ink-500);
	color: var(--hw-on-ink);
}
.hw-btn--on-ink:hover { background: none; border-color: var(--hw-on-ink); color: var(--hw-on-ink); }
.hw-textlink {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--hw-label);
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--hw-signal);
	text-decoration: none;
}
.hw-textlink:hover { color: var(--hw-signal-hover); text-decoration: underline; }

/* --- Table --------------------------------------------------------------- */
.is-style-hw-spec table { border-collapse: collapse; width: 100%; font-size: 15px; }
.is-style-hw-spec thead { background: var(--hw-sunken); }
.is-style-hw-spec thead th {
	text-align: left;
	font-family: inherit;
	font-size: var(--hw-label);
	letter-spacing: .02em;
	text-transform: none;
	font-weight: 600;
	color: var(--hw-ink-500);
	border-bottom: 1px solid var(--hw-rule-strong);
	padding: 12px 14px;
}
.is-style-hw-spec tbody th {
	text-align: left;
	font-family: var(--hw-mono);
	font-size: var(--hw-label);
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--hw-ink);
	border-bottom: 1px solid var(--hw-rule);
	padding: 13px 14px;
	vertical-align: top;
	white-space: nowrap;
}
.is-style-hw-spec td {
	border-bottom: 1px solid var(--hw-rule);
	padding: 13px 14px;
	color: var(--hw-ink-700);
	line-height: 1.7;
	vertical-align: top;
}
.is-style-hw-spec figcaption {
	margin-top: 12px;
	font-size: 14px;
	color: var(--hw-ink-500);
	line-height: 1.7;
}
.hw-scroll-x { overflow-x: auto; }
/* <768px: the spec table becomes key/value rows. */
@media (max-width: 767px) {
	.is-style-hw-spec table,
	.is-style-hw-spec tbody,
	.is-style-hw-spec tr,
	.is-style-hw-spec tbody th,
	.is-style-hw-spec td { display: block; width: 100%; box-sizing: border-box; }
	.is-style-hw-spec thead { display: none; }
	.is-style-hw-spec tr { border-bottom: 1px solid var(--hw-rule-strong); padding: 8px 0; }
	.is-style-hw-spec tbody th { border-bottom: 0; padding-bottom: 4px; }
	.is-style-hw-spec td { border-bottom: 0; padding-block: 4px; }
	.is-style-hw-spec td::before {
		content: attr(data-label);
		display: block;
		font-size: var(--hw-label);
		font-weight: 600;
		letter-spacing: .02em;
		color: var(--hw-ink-500);
	}
}

/* --- Chips / filters ----------------------------------------------------- */
.hw-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-block: 12px; }
.hw-chips__label { margin: 0 8px 0 0; }
.hw-chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid var(--hw-rule-strong);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	color: var(--hw-ink-700);
	text-decoration: none;
	transition: border-color var(--hw-motion), background-color var(--hw-motion), color var(--hw-motion);
}
.hw-chip:hover { border-color: var(--hw-ink); color: var(--hw-ink); }
.hw-chip[aria-current] {
	border-color: var(--hw-signal);
	background: var(--hw-signal-soft);
	color: var(--hw-signal);
}

/* --- Status badge -------------------------------------------------------- */
.hw-badge {
	font-size: var(--hw-label);
	font-weight: 600;
	letter-spacing: .02em;
	padding: 2px 9px;
	border-radius: 999px;
	white-space: nowrap;
	border: 1px solid var(--hw-rule);
	color: var(--hw-ink-300);
}
.hw-badge--live {
	color: var(--hw-success);
	border-color: var(--hw-success-rule);
	background: var(--hw-success-soft);
}

/* --- Studio cards -------------------------------------------------------- */
.hw-cards { display: flex; flex-wrap: wrap; gap: clamp(16px, 2.4vw, 28px); }
.hw-card {
	flex: 1 1 300px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--hw-rule-strong);
	border-radius: 4px;
	background: var(--hw-paper-raised);
	padding: 22px 24px;
}
.hw-card--soon { border-color: var(--hw-rule); background: transparent; }
.hw-card__top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 14px;
}
.hw-card h2 { margin: 0 0 4px; font-size: clamp(18px, 1.8vw, 21px); font-weight: 600; letter-spacing: -0.014em; }
.hw-card__sub { font-size: 14px; font-weight: 600; color: var(--hw-signal); margin-bottom: 10px; letter-spacing: -0.005em; }
.hw-card p { margin: 0 0 16px; color: var(--hw-ink-700); font-size: 15px; line-height: 1.8; }
.hw-card__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.hw-tag {
	font-family: var(--hw-mono);
	font-size: var(--hw-label);
	letter-spacing: .05em;
	color: var(--hw-ink-500);
	border: 1px solid var(--hw-rule);
	padding: 3px 9px;
}
.hw-card__link {
	display: inline-flex;
	align-items: center;
	margin-top: 14px;
	min-height: 44px;
	font-family: var(--hw-mono);
	font-size: var(--hw-label);
	letter-spacing: .04em;
	color: var(--hw-signal);
	text-decoration: none;
}
.hw-card__link:hover { text-decoration: underline; }

/* --- Editorial ----------------------------------------------------------- */
/* The whole featured block is the target, as in the prototype. */
.hw-featured {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(18px, 3vw, 48px);
	border-top: 2px solid var(--hw-ink);
	padding-top: 24px;
	align-items: flex-start;
	color: inherit;
	text-decoration: none;
}
.hw-featured__body { flex: 1 1 380px; min-width: 0; }
.hw-featured__title {
	display: block;
	margin: 0 0 14px;
	font-size: clamp(23px, 2.8vw, 36px);
	line-height: 1.28;
	letter-spacing: -0.022em;
	font-weight: 700;
	max-width: 20ch;
	color: var(--hw-ink);
	transition: color var(--hw-motion);
}
.hw-featured:hover .hw-featured__title { color: var(--hw-signal); }
.hw-featured__dek { display: block; margin: 0 0 14px; color: var(--hw-ink-700); line-height: 1.85; max-width: 52ch; font-size: 16px; }
.hw-figure {
	flex: 1 1 280px;
	min-width: 0;
	background: repeating-linear-gradient(135deg, var(--hw-sunken), var(--hw-sunken) 8px, #EAE7E2 8px, #EAE7E2 16px);
	border: 1px solid var(--hw-rule);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.hw-figure--4x3 { aspect-ratio: 4 / 3; }
.hw-figure--16x7 { aspect-ratio: 16 / 7; }
.hw-figure__note {
	font-size: var(--hw-label);
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--hw-ink-500);
	padding: 12px;
	line-height: 1.7;
}
.hw-figure__note .hw-latin {
	display: block;
	font-family: var(--hw-mono);
	font-weight: 400;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.hw-entries { margin: 0; padding: 0; list-style: none; }
/* Whole row is the target — 22px of padding puts it well past 44px. */
.hw-entry {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	align-items: baseline;
	border-top: 1px solid var(--hw-rule);
	padding: 22px 0;
	color: inherit;
	text-decoration: none;
	transition: opacity var(--hw-motion);
}
.hw-entry:hover { opacity: .72; color: inherit; }
.hw-entry__title {
	display: block;
	margin: 0 0 6px;
	font-size: clamp(17px, 1.6vw, 21px);
	line-height: 1.45;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--hw-ink);
}
.hw-brief-link {
	display: flex;
	flex-direction: column;
	line-height: 1.55;
	font-weight: 500;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: opacity var(--hw-motion), color var(--hw-motion);
}
.hw-brief-link:hover { opacity: .72; }
/* Fixed column so every title starts on the same x, whatever the topic name.
   min-width:0 is load-bearing: without it a long term (LEADERSHIP) refuses to
   shrink to the basis and knocks the titles out of alignment. */
.hw-entry__topic {
	flex: 0 0 96px;
	min-width: 0;
	font-family: var(--hw-mono);
	font-size: var(--hw-label);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hw-ink-500);
}
.hw-entry__body { flex: 1 1 280px; min-width: 0; }
.hw-entry__dek { display: block; margin: 0; color: var(--hw-ink-500); font-size: 15px; line-height: 1.75; max-width: 52ch; }
.hw-entry__status {
	flex: 0 0 auto;
	font-size: var(--hw-label);
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--hw-ink-300);
}

.hw-article-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 26px;
	font-family: var(--hw-mono);
	font-size: var(--hw-label);
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--hw-ink-500);
}
/* Korean values inside an otherwise-Latin metadata row opt out of mono. */
.hw-article-meta .hw-ko {
	font-family: inherit;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: none;
}
.hw-article-meta .hw-draft-inline { color: var(--hw-signal); }

.hw-prose { max-width: var(--hw-reading); }
.hw-prose p { line-height: 1.85; color: var(--hw-ink-700); }
.hw-prose > p:first-of-type { font-size: 19px; }
.hw-prose h2 { margin: 32px 0 14px; font-size: clamp(20px, 2vw, 27px); font-weight: 700; letter-spacing: -0.018em; }
.hw-prose figure { margin: 26px 0; border: 1px solid var(--hw-rule); }
.hw-prose figcaption {
	padding: 10px 14px;
	font-size: 14px;
	color: var(--hw-ink-500);
	border-top: 1px solid var(--hw-rule);
}
.hw-prose blockquote,
.is-style-hw-pullquote {
	margin: 28px 0;
	border-top: 2px solid var(--hw-ink);
	border-bottom: 2px solid var(--hw-ink);
	padding: 20px 0;
}
.hw-prose blockquote p,
.is-style-hw-pullquote p {
	margin: 0;
	font-family: var(--hw-serif);
	font-size: clamp(19px, 2vw, 25px);
	line-height: 1.5;
	color: var(--hw-ink);
}

/* --- Section navigation (solution detail) -------------------------------- */
.hw-doc { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 64px); align-items: flex-start; }
.hw-doc__nav { flex: 1 1 170px; min-width: 0; position: sticky; top: 110px; padding-block: 32px; }
.hw-doc__body { flex: 3 1 500px; min-width: 0; padding: 32px 0 64px; }
.hw-sectionnav { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.hw-sectionnav li { border-left: 2px solid var(--hw-rule); }
.hw-sectionnav a {
	display: block;
	padding: 10px 0 10px 12px;
	font-size: 14px;
	color: var(--hw-ink-500);
	text-decoration: none;
}
.hw-sectionnav li[aria-current] { border-left-color: var(--hw-signal); }
.hw-sectionnav li[aria-current] a { color: var(--hw-ink); font-weight: 600; }
@media (max-width: 1023px) {
	.hw-doc__nav { position: static; padding-bottom: 0; }
}

.hw-doc__aside { flex: 1 1 220px; min-width: 0; position: sticky; top: 110px; }
.hw-doc > .hw-prose { flex: 3 1 520px; min-width: 0; }
@media (max-width: 1023px) {
	.hw-doc__aside { position: static; }
}

.hw-doc__body > *,
.hw-doc__body .hw-doc__section { margin-bottom: 44px; }
.hw-doc__body > .is-style-hw-takeaway,
.hw-doc__body > .is-style-hw-delivery-context { margin-bottom: 44px; }
.hw-doc__section + .hw-doc__section,
.is-style-hw-takeaway + .hw-doc__section,
.is-style-hw-delivery-context + .hw-doc__section {
	border-top: 1px solid var(--hw-rule);
	padding-top: 28px;
}
.hw-doc__body h2 { margin: 0 0 16px; font-size: clamp(21px, 2.2vw, 30px); font-weight: 700; letter-spacing: -0.02em; }
.hw-doc__body p { color: var(--hw-ink-700); line-height: 1.85; max-width: var(--hw-reading); }

/* Editor-added page content still gets the page gutter when it sits directly
   in <main>; nested content (article prose, solution body) manages its own. */
main > .wp-block-post-content {
	max-width: var(--hw-page);
	margin-inline: auto;
	padding-inline: var(--hw-gutter);
	box-sizing: border-box;
}
main > .wp-block-post-content:empty { padding: 0; }

.hw-cols { display: flex; flex-wrap: wrap; gap: 22px; }
.hw-cols > * { flex: 1 1 220px; min-width: 0; }
.hw-cols h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.hw-cols p { margin: 0; color: var(--hw-ink-700); font-size: 15px; line-height: 1.8; }
.hw-fit h3 { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
.hw-fit--yes h3 { color: var(--hw-success); }
.hw-fit--no h3 { color: var(--hw-error); }
.hw-fit ul { margin: 0; padding-left: 18px; color: var(--hw-ink-700); font-size: 15px; line-height: 1.85; }

.hw-steps { margin: 0; padding: 0; list-style: none; }
.hw-steps li {
	display: flex;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--hw-rule);
	flex-wrap: wrap;
}
.hw-steps__n { flex: 0 0 34px; font-family: var(--hw-mono); font-size: var(--hw-label); color: var(--hw-signal); padding-top: 4px; }
.hw-steps__t { flex: 1 1 180px; min-width: 0; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.hw-steps__b { flex: 2 1 260px; min-width: 0; color: var(--hw-ink-700); font-size: 15px; line-height: 1.8; }

.hw-pill {
	display: inline-block;
	font-family: var(--hw-mono);
	font-size: var(--hw-label);
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--hw-ink-500);
	border: 1px solid var(--hw-rule-strong);
	border-radius: 999px;
	padding: 4px 12px;
	margin-bottom: 12px;
}

/* --- Split band (heading left, action right) ----------------------------- */
.hw-split {
	display: flex;
	flex-wrap: wrap;
	gap: 20px clamp(20px, 3vw, 48px);
	align-items: center;
	justify-content: space-between;
}
.hw-split--top { align-items: flex-start; }
.hw-split > * { flex: 1 1 300px; min-width: 0; }
.hw-split > .hw-split__action { flex: 0 0 auto; }
.hw-split h2 { margin: 0 0 8px; font-size: clamp(19px, 1.9vw, 24px); font-weight: 600; letter-spacing: -0.015em; }
.hw-split p { margin: 0; color: var(--hw-ink-700); line-height: 1.8; max-width: 52ch; font-size: 16px; }
.hw-split ul { margin: 0; padding-left: 18px; color: var(--hw-ink-700); font-size: 15px; line-height: 1.85; }
.hw-heading-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	flex-wrap: wrap;
	border-bottom: 2px solid var(--hw-ink);
	padding-bottom: 14px;
}
.hw-heading-row h2 { margin: 0; font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; letter-spacing: -0.018em; }

/* --- Forms --------------------------------------------------------------- */
.hw-form { display: flex; flex-direction: column; gap: 12px; }
.hw-field { display: block; }
.hw-field > span {
	display: block;
	font-size: var(--hw-label);
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--hw-ink-500);
	margin-bottom: 6px;
}
.hw-field input, .hw-field textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	padding: 12px;
	border: 1px solid var(--hw-rule-strong);
	border-radius: 2px;
	background: var(--hw-paper-raised);
	color: var(--hw-ink);
	font: inherit;
	font-size: 16px;
	line-height: 1.7;
	resize: vertical;
}
.hw-form__note { margin: 0; font-size: 14px; color: var(--hw-ink-500); line-height: 1.7; }
.hw-form .hw-btn:disabled { opacity: .55; cursor: not-allowed; }

/* --- Draft marker -------------------------------------------------------- */
.hw-draft {
	font-family: var(--hw-mono);
	font-size: var(--hw-label);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hw-signal);
}

/* --- Empty state --------------------------------------------------------- */
.hw-empty {
	border-top: 1px dashed var(--hw-rule-strong);
	padding: 30px 0;
	text-align: center;
}
.hw-empty p { margin: 0 auto; color: var(--hw-ink-500); font-size: 15px; line-height: 1.8; max-width: 42ch; }

/* --- Core block nudges ---------------------------------------------------- */
.wp-block-button__link { min-height: 44px; display: inline-flex; align-items: center; }
.wp-block-column { min-width: 0; }

/* ── 얼라이언스 파트너 스트립 ────────────────────────────────────────── */
.hw-partners__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 20px;
	margin-bottom: 22px;
}
.hw-partners__note {
	margin: 0;
	color: var(--hw-ink-500);
	font-size: 14px;
	line-height: 1.7;
}
.hw-partners__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	background: var(--hw-rule);
	border: 1px solid var(--hw-rule);
}
.hw-partner {
	background: var(--hw-paper-raised, #fff);
	padding: 22px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 92px;
	text-align: center;
}
.hw-partner__mark {
	font-weight: 700;
	font-size: 16px;
	letter-spacing: -0.015em;
	color: var(--hw-ink-900);
	white-space: nowrap;
}
.hw-partner__logo {
	max-width: 168px;
	max-height: 32px;
	width: auto;
	height: auto;
	display: block;
}
.hw-partner__ko {
	font-size: 12px;
	color: var(--hw-ink-300);
	letter-spacing: 0.01em;
}

/* ── 문의 카드 ───────────────────────────────────────────────────────── */
.hw-contact-card {
	border: 1px solid var(--hw-rule-strong);
	background: var(--hw-paper-raised, #fff);
	padding: 24px 26px;
}
.hw-contact-card a { color: inherit; }

/* 푸터 우측 메일 링크 */
.hw-footer__note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }


/* ── 아카이브 페이저 ─────────────────────────────────────────────── */
.hw-pager { margin-top: 34px; border-top: 1px solid var(--hw-rule); padding-top: 20px; }
.hw-pager ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hw-pager a, .hw-pager span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; min-height: 40px; padding: 0 12px;
	border: 1px solid var(--hw-rule); font-size: 14px; text-decoration: none; color: inherit;
}
.hw-pager a:hover { border-color: var(--hw-rule-strong); background: var(--hw-sunken); }
.hw-pager .current { background: var(--wp--preset--color--surface-ink); color: var(--hw-on-ink); border-color: transparent; }

/* ── 질문지 코드블록 — 본문 크기에 맞춘다 ────────────────────────── */
.wp-block-code {
	font-size: 14px; line-height: 1.75;
	background: var(--hw-sunken); border: 1px solid var(--hw-rule);
	border-radius: 6px; padding: 18px 20px; overflow-x: auto;
}
.wp-block-code code {
	font-size: inherit; line-height: inherit;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	white-space: pre-wrap; word-break: keep-all;
}

/* ── 솔루션 본문 위계 — 진술 h2 / 소제목 h3 / 목록 ─────────────── */
.hw-doc__body h2 { max-width: 34ch; }
.hw-doc__body h3.wp-block-heading {
	margin: 34px 0 12px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
}
.hw-doc__body ul.wp-block-list,
.hw-doc__body ol.wp-block-list {
	margin: 0; padding-left: 20px;
	max-width: var(--hw-reading);
	color: var(--hw-ink-700); font-size: 16px; line-height: 1.85;
}
.hw-doc__body ul.wp-block-list li + li,
.hw-doc__body ol.wp-block-list li + li { margin-top: 6px; }

/* ── 솔루션 본문 — 좌우 폭과 정렬 ──────────────────────────────── */
/* 사이드 내비가 flex-grow 로 늘어나 본문 왼쪽에 빈 구간을 만들고 있었다.
   폭을 고정하고 남는 공간을 본문이 가져간다. */
.hw-doc__nav { flex: 0 0 clamp(158px, 15vw, 208px); }
.hw-doc__body { flex: 1 1 460px; }

/* constrained 레이아웃이 자식마다 margin-inline:auto 를 걸어
   max-width 가 있는 문단·제목을 가운데로 밀던 것을 되돌린다. */
.hw-doc__body > *,
.hw-doc__body .hw-doc__section > * {
	margin-inline-start: 0 !important;
	margin-inline-end: 0 !important;
}
.hw-doc__body .is-style-hw-label,
.hw-doc__body .hw-label-mono { text-align: left; }

/* 본문 칸을 넓힌 뒤로 68ch 가독 폭이 우측에 큰 여백을 남겼다.
   표·도해가 쓰는 폭에 가깝게 올린다 — 한글 기준 한 줄 약 50자. */
.hw-doc__body p,
.hw-doc__body ul.wp-block-list,
.hw-doc__body ol.wp-block-list { max-width: 84ch; }
.hw-doc__body h2 { max-width: 46ch; }

/* ── 브리프 아카이브 — 2단 카드 ────────────────────────────────── */
.hw-cardgrid {
	margin: 0; padding: 0; list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* 행 간격이 열 간격과 비슷하면 위아래 카드가 붙어 보인다. 행만 조금 더 준다. */
	gap: clamp(34px, 4.2vw, 56px) clamp(20px, 2.4vw, 32px);
}
@media (max-width: 720px) { .hw-cardgrid { grid-template-columns: 1fr; } }

.hw-card { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.hw-card__thumb {
	display: block; overflow: hidden;
	border: 1px solid var(--hw-rule);
	background: var(--hw-sunken);
	aspect-ratio: 1200 / 630;
}
.hw-card__thumb img {
	display: block; width: 100%; height: 100%; object-fit: cover;
	transition: transform var(--hw-motion);
}
.hw-card:hover .hw-card__thumb img { transform: scale(1.02); }
.hw-card__thumb--empty {
	background: repeating-linear-gradient(135deg, var(--hw-sunken), var(--hw-sunken) 8px, #EAE7E2 8px, #EAE7E2 16px);
}
.hw-card__body { display: block; padding-top: 14px; }
.hw-card__meta { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.hw-card__topic {
	font-family: var(--hw-mono); font-size: var(--hw-label);
	letter-spacing: .08em; text-transform: uppercase; color: var(--hw-ink-500);
}
.hw-card__status { font-size: var(--hw-label); font-weight: 600; color: var(--hw-ink-300); }
.hw-card__title {
	display: block; margin: 0 0 8px;
	font-size: clamp(17px, 1.5vw, 20px); line-height: 1.45;
	font-weight: 600; letter-spacing: -0.015em;
	color: var(--hw-ink); transition: color var(--hw-motion);
}
.hw-card:hover .hw-card__title { color: var(--hw-signal); }
.hw-card__dek { display: block; margin: 0; color: var(--hw-ink-500); font-size: 15px; line-height: 1.75; }

/* Featured — 자리표시자 대신 실제 대표 이미지 */
.hw-featured__cover { flex: 1 1 380px; min-width: 0; display: block; }
.hw-featured__cover img { display: block; width: 100%; height: auto; border: 1px solid var(--hw-rule); }

/* ── 검색 ──────────────────────────────────────────────────────── */
.hw-search { display: flex; flex-wrap: wrap; gap: 10px; max-width: 520px; }
.hw-search__input {
	flex: 1 1 240px; min-width: 0;
	font-family: inherit; font-size: 16px; line-height: 1.5;
	padding: 12px 14px;
	color: var(--hw-ink);
	background: var(--hw-paper-raised);
	border: 1px solid var(--hw-rule-strong);
	border-radius: 0;
	-webkit-appearance: none; appearance: none;
}
.hw-search__input:focus-visible { outline: 2px solid var(--hw-signal); outline-offset: 1px; }
.hw-search__input::placeholder { color: var(--hw-ink-300); }
.hw-search__submit {
	flex: 0 0 auto;
	font-family: inherit; font-size: 15px; font-weight: 600;
	padding: 12px 22px; min-height: 44px;
	color: var(--hw-on-ink); background: var(--hw-signal);
	border: 1px solid var(--hw-signal); cursor: pointer;
	transition: opacity var(--hw-motion);
}
.hw-search__submit:hover { opacity: .88; }
.screen-reader-text {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap; border: 0;
}
.hw-chips__search { margin-left: auto; flex: 0 1 300px; min-width: 0; }
@media (max-width: 767px) { .hw-chips__search { margin-left: 0; flex: 1 1 100%; } }

/* 카드가 홀수로 끝나면 마지막 한 장이 오른쪽을 비운 채 남는다.
   마지막 줄을 가로로 눕혀 폭을 채운다 — 페이지마다 나머지가 달라지므로
   건수를 맞추는 방식으로는 해결되지 않는다. */
@media (min-width: 721px) {
	.hw-cardgrid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.hw-cardgrid > li:last-child:nth-child(odd) .hw-card {
		flex-direction: row;
		gap: clamp(18px, 2.4vw, 30px);
		align-items: flex-start;
	}
	.hw-cardgrid > li:last-child:nth-child(odd) .hw-card__thumb {
		flex: 0 0 clamp(240px, 34%, 420px);
	}
	.hw-cardgrid > li:last-child:nth-child(odd) .hw-card__body {
		flex: 1 1 auto; min-width: 0; padding-top: 2px;
	}
}

/* ── Resources ─────────────────────────────────────────────────── */
.hw-doc__body--resource { flex: 3 1 460px; }
.hw-doc__body--resource p { max-width: 74ch; }

.hw-resource-card {
	background: var(--hw-sunken);
	border: 1px solid var(--hw-rule);
	padding: 20px 22px;
}
.hw-resource-card__orig {
	margin: 0 0 14px; font-size: 15px; line-height: 1.65;
	color: var(--hw-ink-700); font-weight: 600; letter-spacing: -0.01em;
}
.hw-resource-card__meta {
	margin: 0 0 18px; display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 7px 14px; font-size: 14px;
}
.hw-resource-card__meta dt {
	font-family: var(--hw-mono); font-size: var(--hw-label);
	letter-spacing: .06em; text-transform: uppercase; color: var(--hw-ink-300);
}
.hw-resource-card__meta dd { margin: 0; color: var(--hw-ink-700); }
.hw-resource-card .hw-btn { width: 100%; box-sizing: border-box; text-align: center; }

/* ── 국내 적용 관점 — 자료마다 붙는 해설 ──────────────────────── */
.hw-note {
	margin-top: 4px;
	border-top: 3px solid var(--hw-signal);
	background: var(--hw-paper-raised);
	padding: clamp(24px, 3vw, 36px) clamp(22px, 3vw, 38px) clamp(26px, 3.2vw, 40px);
	box-shadow: 0 1px 0 var(--hw-rule), 0 0 0 1px var(--hw-rule);
}
.hw-note__head { margin-bottom: 22px; }
.hw-note__head .hw-label-mono { margin: 0 0 8px; }
.hw-note__head h2 {
	margin: 0; font-size: clamp(22px, 2.3vw, 29px); font-weight: 700;
	letter-spacing: -0.02em; color: var(--hw-ink); max-width: none;
}
.hw-note__body > * + * { margin-top: 16px; }
.hw-note__body p {
	margin: 0; font-size: 17px; line-height: 1.9;
	color: var(--hw-ink-700); max-width: 68ch;
}
.hw-note__h {
	margin: 30px 0 0; font-size: 16px; font-weight: 700;
	letter-spacing: .01em; color: var(--hw-ink);
	padding-left: 13px; border-left: 3px solid var(--hw-signal);
}
.hw-note__body > .hw-note__h:first-child { margin-top: 0; }
.hw-note__h + p { margin-top: 12px; }
.hw-note__checks {
	margin: 0; padding: 0; list-style: none;
	display: grid; gap: 10px; max-width: 68ch;
}
.hw-note__checks li {
	position: relative; padding-left: 26px;
	font-size: 16px; line-height: 1.8; color: var(--hw-ink-700);
}
.hw-note__checks li::before {
	content: ""; position: absolute; left: 4px; top: .62em;
	width: 8px; height: 8px; border: 2px solid var(--hw-signal); border-radius: 50%;
}
@media (max-width: 767px) {
	.hw-note__body p { font-size: 16px; }
	.hw-note__checks li { font-size: 15px; }
}

/* ── 핵심 내용 — 자료가 무엇을 다루는지 먼저 밝힌다 ────────────── */
.hw-sum { margin-bottom: 30px; }
.hw-sum__head { margin-bottom: 18px; }
.hw-sum__head .hw-label-mono { margin: 0 0 6px; color: var(--hw-ink-300); }
.hw-sum__head h2 {
	margin: 0; font-size: clamp(21px, 2.2vw, 27px); font-weight: 700;
	letter-spacing: -0.02em; color: var(--hw-ink); max-width: none;
}
.hw-sum__body > * + * { margin-top: 14px; }
.hw-sum__body p { margin: 0; font-size: 17px; line-height: 1.9; color: var(--hw-ink-700); max-width: 72ch; }
.hw-sum__h {
	margin: 24px 0 0; font-size: 16px; font-weight: 700;
	color: var(--hw-ink); letter-spacing: .01em;
}
.hw-sum__body > .hw-sum__h:first-child { margin-top: 0; }
.hw-sum__points { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 72ch; }
.hw-sum__points li {
	position: relative; padding-left: 22px;
	font-size: 17px; line-height: 1.85; color: var(--hw-ink-700);
	border-left: 0;
}
.hw-sum__points li::before {
	content: ""; position: absolute; left: 0; top: .78em;
	width: 12px; height: 2px; background: var(--hw-ink-300);
}

/* 주제 태그 */
.hw-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--hw-rule); }
.hw-tags__label { margin: 0 6px 0 0; color: var(--hw-ink-300); }
@media (max-width: 767px) { .hw-sum__body p, .hw-sum__points li { font-size: 16px; } }

/* ── 자료실 조합 필터 ──────────────────────────────────────────── */
.hw-filterbar {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px;
	padding-top: 4px; padding-bottom: clamp(12px, 2vw, 18px);
}
.hw-filterbar__state { font-size: 15px; font-weight: 600; color: var(--hw-ink); }
.hw-filterbar__clear {
	font-size: 14px; color: var(--hw-ink-500); text-decoration: none;
	border-bottom: 1px solid var(--hw-rule-strong); padding-bottom: 1px;
}
.hw-filterbar__clear:hover { color: var(--hw-signal); border-color: var(--hw-signal); }

/* 자료 상세의 표지 — 제원 카드 위에 붙여 한 덩어리로 읽히게 한다. */
.hw-resource-cover {
	margin: 0 0 14px;
	border: 1px solid var(--hw-rule);
	line-height: 0;
	overflow: hidden;
}
.hw-resource-cover img {
	display: block;
	width: 100%;
	height: auto;
}