/* 제작 과정 페이지 — 시안 1-5 전용 스타일 */
.flow-hero,
.flow-services,
.flow-split-band,
.flow-checkpoints,
.flow-final {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	word-break: keep-all;
}

.flow-hero h1,
.flow-services h2,
.flow-split-band h2,
.flow-checkpoints h2,
.flow-final h2 {
	font-family: "Noto Serif KR", var(--wp--preset--font-family--serif);
	word-break: keep-all;
}

.flow-hero {
	display: grid;
	grid-template-columns: 42% 58%;
	min-height: clamp(440px, 33vw, 625px);
	background: var(--wp--preset--color--sand);
	overflow: hidden;
}

.flow-hero-copy {
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 55px 18px 55px max(6vw, var(--ch-edge));
}

.flow-hero h1 {
	max-width: 13em;
	margin: 0 0 15px;
	font-size: clamp(37px, 3.7vw, 60px);
	line-height: 1.35;
	letter-spacing: -.065em;
}

.flow-hero .flow-hero-lead {
	margin: 0 0 23px;
	color: var(--wp--custom--color--hero-lead);
	font-size: var(--wp--preset--font-size--lead-lg);
	line-height: 1.75;
}

.flow-hero-photo {
	position: relative;
	min-height: 100%;
	margin: 0;
}

.flow-hero-photo::before {
	position: absolute;
	z-index: 1;
	inset: 0 auto 0 -1px;
	width: 14%;
	background: linear-gradient(90deg, var(--wp--preset--color--sand), transparent);
	content: "";
	pointer-events: none;
}

.flow-services,
.flow-checkpoints {
	padding: var(--wp--preset--spacing--section-lg) 0;
	background: var(--wp--preset--color--white);
}

.flow-services-inner,
.flow-checkpoints-inner {
	width: min(100% - 2 * var(--wp--preset--spacing--gutter), 1320px);
	margin-inline: auto;
}

.flow-services-heading {
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 27px;
}

.flow-eyebrow {
	margin: 0 0 8px;
	color: #566b78;
	font-family: var(--wp--preset--font-family--latin);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.flow-services h2,
.flow-checkpoints h2,
.flow-split-band h2 {
	margin: 0;
	font-size: clamp(30px, 3.05vw, 48px);
	line-height: 1.4;
}

.flow-services-intro {
	margin: 0 0 5px;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.8;
}

.flow-service-grid {
	gap: 22px;
	margin: 0;
}

.flow-service-card {
	min-width: 0;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--wp--custom--color--card-border);
	border-radius: 4px;
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--soft);
	transition: transform .35s, box-shadow .35s;
}

.flow-service-photo {
	position: relative;
	height: 185px;
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--mist);
}

.flow-service-body {
	display: flex;
	min-height: 105px;
	align-items: center;
	gap: 15px;
	padding: 20px 22px;
}

.flow-service-icon {
	display: grid;
	width: 40px;
	height: 40px;
	flex: none;
	place-items: center;
	margin: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--numeral);
}

.flow-service-body h3 {
	margin: 0 0 4px;
	font-size: var(--wp--preset--font-size--subtitle);
}

.flow-service-body p:not(.flow-service-icon, .flow-service-arrow) {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.7;
}

.flow-service-arrow {
	margin: 0 0 0 auto;
	font-size: 22px;
	transition: transform .3s;
}

.flow-split-band {
	padding: 0 0 var(--wp--preset--spacing--section-lg);
	background: var(--wp--preset--color--white);
}

.flow-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	gap: 0;
	min-height: 445px;
	margin: 0;
}

.flow-split > .wp-block-column {
	min-width: 0;
	margin: 0;
}

.flow-split-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 54px clamp(35px, 6vw, 105px) 54px max(6vw, var(--ch-edge));
}

.flow-split-copy .flow-eyebrow { margin-bottom: 9px; }
.flow-split-copy h2 { margin: 0 0 10px; }

.flow-split-intro {
	margin: 0 0 22px;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.8;
}

.flow-details {
	display: grid;
	width: 100%;
	gap: 16px;
}

.flow-detail {
	display: grid;
	grid-template-columns: 39px minmax(0, 1fr);
	align-items: start;
	gap: 12px;
}

.flow-detail-icon {
	display: grid;
	width: 34px;
	height: 34px;
	place-items: center;
	margin: 0;
	border-radius: 50%;
	background: var(--wp--custom--color--step-border);
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--subtitle);
}

.flow-detail h3 {
	margin: 0 0 4px;
	font-size: var(--wp--preset--font-size--body);
}

.flow-detail p:not(.flow-detail-icon) {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.65;
}

.flow-split-media {
	position: relative;
	min-height: 445px;
}

.flow-split-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--mist);
}

.flow-split.is-alt > .flow-split-media { order: 0; }
.flow-split.is-alt > .flow-split-copy { order: 1; }
.flow-split.flow-hosting-layout > .flow-split-copy { order: 0; }
.flow-split.flow-hosting-layout > .flow-split-media { order: 1; }

.flow-checkpoints-heading { margin-bottom: 34px; }
.flow-checkpoints-intro {
	margin: 6px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--ui);
	line-height: 1.75;
}

.flow-checkpoint-grid {
	position: relative;
	gap: 25px;
	margin: 0;
}

.flow-checkpoint-grid::before {
	position: absolute;
	top: 37px;
	right: 15%;
	left: 15%;
	height: 1px;
	background: var(--wp--custom--color--rule);
	content: "";
}

.flow-checkpoint {
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	min-width: 0;
	margin: 0;
	padding: 0 18px;
	text-align: center;
}

.flow-checkpoint-icon {
	display: grid;
	width: 74px;
	height: 74px;
	place-items: center;
	margin: 0 auto 14px;
	border: 2px solid var(--wp--custom--color--step-border);
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	color: var(--wp--custom--color--step-arrow);
	font-size: 29px;
}

.flow-checkpoint h3 {
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--body);
}

.flow-checkpoint p:not(.flow-checkpoint-icon) {
	max-width: 260px;
	margin: 0 auto;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.7;
}

.flow-final {
	display: grid;
	grid-template-columns: 45% 55%;
	min-height: 250px;
	background: var(--wp--preset--color--paper);
}

.flow-final-copy {
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 38px 20px 38px max(6vw, var(--ch-edge));
	background: linear-gradient(90deg, var(--wp--preset--color--paper) 64%, transparent);
}

.flow-final h2 {
	margin: 0 0 9px;
	font-size: clamp(27px, 2.6vw, 42px);
	line-height: 1.4;
}

.flow-final-copy > p {
	margin: 0 0 18px;
	color: var(--wp--custom--color--hero-lead);
	font-size: var(--wp--preset--font-size--small);
}

.flow-final-photo {
	position: relative;
	min-height: 250px;
	margin: 0;
}

.flow-hero-photo img,
.flow-service-photo img,
.flow-split-photo img,
.flow-final-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.flow-hero :focus-visible,
.flow-final :focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
	.flow-service-card:hover { transform: translateY(-6px); box-shadow: var(--wp--preset--shadow--soft-hover); }
	.flow-service-card:hover .flow-service-arrow { transform: translateX(5px); }
}

@media (max-width: 1100px) {
	.flow-service-grid { gap: 14px; }
	.flow-service-body { gap: 10px; padding: 17px; }
	.flow-service-body h3 { font-size: var(--wp--preset--font-size--body); }
	.flow-split-copy { padding-right: 6vw; }
	.flow-split.is-alt .flow-split-copy { padding-left: 6vw; }
}

@media (max-width: 780px) {
	.flow-hero { display: flex; min-height: 0; flex-direction: column; }
	.flow-hero-copy { padding: 60px 25px 42px; }
	.flow-hero-photo { height: 350px; min-height: 0; }
	.flow-hero-photo::before { display: none; }
	.flow-services, .flow-checkpoints { padding: var(--wp--preset--spacing--section-sm) 0; }
	.flow-services-inner, .flow-checkpoints-inner { width: min(100% - 36px, 600px); }
	.flow-services-heading { display: block; }
	.flow-services-intro { margin-top: 10px; }
	.flow-service-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
	.flow-service-card { display: grid; grid-template-columns: 45% 55%; }
	.flow-service-photo { height: 170px; }
	.flow-service-body { min-height: 0; padding: 18px; }
	.flow-split-band { padding-bottom: var(--wp--preset--spacing--section-sm); }
	.flow-split { display: flex; flex-direction: column; }
	.flow-split-copy, .flow-split.is-alt .flow-split-copy { padding: 48px 27px; }
	.flow-split-media { min-height: 340px; }
	.flow-split.is-alt > .flow-split-media { order: 1; }
	.flow-split.is-alt > .flow-split-copy { order: 0; }
	.flow-checkpoint-grid { gap: 10px; }
	.flow-checkpoint { padding: 0 4px; }
	.flow-final { display: flex; flex-direction: column; }
	.flow-final-copy { padding: 45px 26px; background: var(--wp--preset--color--paper); }
	.flow-final-photo { height: 180px; min-height: 0; }
}

@media (max-width: 540px) {
	.flow-hero h1 { font-size: 36px; }
	.flow-hero .flow-hero-lead { font-size: var(--wp--preset--font-size--body); }
	.flow-hero-photo { height: 235px; }
	.flow-service-card { display: block; }
	.flow-service-photo { height: 185px; }
	.flow-service-body { min-height: 110px; padding: 20px; }
	.flow-split-copy, .flow-split.is-alt .flow-split-copy { padding: 48px 23px; }
	.flow-split-media { min-height: 270px; }
	.flow-checkpoint-grid { display: block; }
	.flow-checkpoint-grid::before { top: 38px; right: auto; bottom: 45px; left: 36px; width: 1px; height: auto; }
	.flow-checkpoint { display: grid; grid-template-columns: 72px minmax(0, 1fr); justify-items: stretch; gap: 0 16px; padding: 0 0 25px; text-align: left; }
	.flow-checkpoint-icon { grid-column: 1; grid-row: span 2; width: 72px; height: 72px; margin: 0; }
	.flow-checkpoint h3, .flow-checkpoint p:not(.flow-checkpoint-icon) { grid-column: 2; }
	.flow-checkpoint h3 { align-self: end; }
	.flow-checkpoint p:not(.flow-checkpoint-icon) { margin: 0; }
	.flow-checkpoint p:not(.flow-checkpoint-icon) { margin: 0; }
	.flow-final-photo { height: 165px; }
}

@media (prefers-reduced-motion: reduce) {
	.flow-service-card, .flow-service-arrow { transition: none; }
}