@charset "UTF-8";

/* merge-build.js 산출물 — 납품 시 css/sections/*.css 전량이 이 아래로 합쳐진다. 손으로 쓰지 않는다(CLAUDE.md 원칙 14). */
/* merge-build:con01 */
.con01 {
	/* 질감판 자연크기 1920x960 을 그대로 — width:100% 로 늘리면 1905 로 눌려 노이즈가 1:1 로 안 맞는다 */
	.bg_img {
		left: calc(var(--px)*-8);
		right: auto;
		top: 0;
		bottom: auto;
		width: calc(var(--px)*1920);
		height: calc(var(--px)*960);
	}
}

.con01_iner {
	padding-top: calc(var(--px)*124);
	padding-bottom: calc(var(--px)*161);
}

.con01__gear {
	width: calc(var(--px)*466);
	margin-left: calc(var(--px)*757);
}

.con01__filter {
	margin-left: calc(var(--px)*4);
}

.con01__server {
	margin-top: calc(var(--px)*2);
}

.con01__dripper {
	left: calc(var(--px)*7);
	top: calc(var(--px)*72);
}

.con01__dripper-front {
	left: calc(var(--px)*7);
	top: calc(var(--px)*107);
}

.con01__brewing {
	left: calc(var(--px)*232);
	top: calc(var(--px)*225);
}

.con01__coffee {
	right: calc(var(--px)*233);
	bottom: calc(var(--px)*230);
}

.con01__brewing-mark {
	margin-top: calc(var(--px)*3);
}

.con01__coffee-mark {
	margin-top: calc(var(--px)*3);
}

/* IMG:AUTO con01 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con01__filter {
    width: calc(var(--px)*350);
    aspect-ratio: 350 / 278;
}

.con01__server {
    width: calc(var(--px)*466);
    aspect-ratio: 466 / 394;
}

.con01__dripper {
    width: calc(var(--px)*431);
    aspect-ratio: 431 / 301;
}

.con01__dripper-front {
    width: calc(var(--px)*431);
    aspect-ratio: 431 / 266;
}

.con01__brewing-mark {
    width: calc(var(--px)*578);
    aspect-ratio: 578 / 90;
}

.con01__coffee-mark {
    width: calc(var(--px)*495);
    aspect-ratio: 495 / 90;
}
/* /IMG:AUTO con01 END */

/* FONT:AUTO con01 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con01 {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--titleXS);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 2.03;
    color: #2752ad;
}

.con01__coffee-tag {
    text-align: right;
    letter-spacing: -0.058em; /* OVR */
}
/* /FONT:AUTO con01 END */

@media (max-width:599px) {
	.con01 {
		.bg_img {
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.con01_iner {
		display: flex;
		flex-direction: column;
		gap: 5vw;
		/* PC 124·161 의 기본환산(19.84·25.76vw)은 모바일에서 화면폭의 1/5 을 먹어 과했다 — PC 비 1:1.3 만 유지하고 축소 */
		padding-top: 10vw;
		padding-bottom: 13vw;
		/* PC 좌우 여백 232·233 의 캔버스 비율(12.18%) 유지 */
		padding-inline: 12.1785vw;
	}

	/* 서버·드리퍼 몸통 축이 이미지 박스 중앙보다 48.5/466 왼쪽이라 박스를 가운데 두면 몸통이 왼쪽으로 보인다 — PC 는 박스를 오른쪽에 놓아 상쇄했다 */
	.con01__gear {
		width: 62vw;
		margin-inline: auto;
		translate: 6.4vw 0;
	}

	.con01__filter {
		width: 46.5665vw;
		margin-left: 0.5322vw;
	}

	.con01__server {
		width: 62vw;
		margin-top: 0.2661vw;
	}

	.con01__dripper {
		width: 57.3433vw;
		left: 0.9313vw;
		top: 9.5794vw;
	}

	.con01__dripper-front {
		width: 57.3433vw;
		left: 0.9313vw;
		top: 14.2361vw;
	}

	.con01__brewing {
		position: relative;
		left: auto;
		top: auto;
		order: -1;
		width: 100%;
	}

	.con01__coffee {
		position: relative;
		right: auto;
		bottom: auto;
		width: 100%;
		text-align: right;
	}

	.con01__brewing-mark {
		width: 70vw;
		margin-top: 0.48vw;
	}

	.con01__coffee-mark {
		width: 60vw;
		margin-top: 0.48vw;
		margin-left: auto;
	}
}

/* /merge-build:con01 */
/* merge-build:con02 */
/* 종이가 앞 섹션 위로 44px 올라타는 게 시안 — 전역 section{overflow:hidden} 을 이 섹션만 푼다 */
.con02 {
	overflow: visible;
	background: repeating-linear-gradient(90deg, #fef4af 0 calc(var(--px)*101), #fef3a3 calc(var(--px)*101) calc(var(--px)*202)) calc(var(--px)*-8) 0;
}

.con02_iner {
	padding-bottom: calc(var(--px)*133);
}

.con02__hero {
	margin-top: calc(var(--px)*73);
}

/* 찢어진 종이 카드가 섹션 위로 44px 빠져나가 앞 섹션 흰 배경에 겹친다 */
.con02__hero-paper {
	top: calc(var(--px)*-117);
	width: calc(var(--px)*972);
}

/* PSD dropShadow(#341c0f 29% · angle90 · distance18 · size32) — 찢긴 알파를 따라야 해 box-shadow 가 아니라 filter */
.con02__hero-paper-media {
	filter: drop-shadow(0 calc(var(--px)*18) calc(var(--px)*32) rgba(52, 28, 15, .29));
}

.con02__hero-paper-body {
	inset: 0;
	padding-top: calc(var(--px)*100);
}

.con02__hero-title {
	margin-top: calc(var(--px)*24);
}

.con02__hero-desc {
	margin-top: calc(var(--px)*17);
}

/* 모바일: 4열 → 2열 wrap */
.con02__points {
	bottom: calc(var(--px)*128);
	gap: calc(var(--px)*22);
}

.con02__point {
	width: calc(var(--px)*316);
	/* HEIGHT: 정원 배지 — 300x300 정사각 유지가 요건이라 콘텐츠 높이로 대체 불가 */
	height: calc(var(--px)*316);
	padding-top: calc(var(--px)*2);
	border-radius: 50%;
	background: #2651ad;
	box-shadow: inset 0 0 0 calc(var(--px)*6) #2651ad, inset 0 0 0 calc(var(--px)*8) #fef3a2;
}

.con02__point-desc {
	margin-top: calc(var(--px)*22);
}

.con02__lead {
	margin-top: calc(var(--px)*140);
}

.con02__lead-desc {
	margin-top: calc(var(--px)*18);
}

/* 모바일: 3열 → 1열 column */
.con02__trend {
	margin-top: calc(var(--px)*81);
	gap: calc(var(--px)*30);
}

/* 점등 전환은 상태 클래스 입력이라 CSS transition 이 보간을 소유한다(GSAP 은 시점만) */
.con02__trend-item {
	transition: transform .35s ease-out;
}

/* 신호등 모션의 점등 상태 — 시안이 첫 카드를 켜진 모습으로 그렸다 */
.con02__trend-item.is-active {
	transform: translateY(calc(var(--px)*-20));
}

.con02__trend-card {
	width: calc(var(--px)*500);
	padding: calc(var(--px)*69) 0 calc(var(--px)*69);
	background: #fff;
}

.con02__trend-badge {
	top: calc(var(--px)*-17);
	width: calc(var(--px)*64);
	padding: calc(var(--px)*9) 0;
	background: #2752ad;
	transition: opacity .3s ease-out, visibility .3s ease-out;
}

/* 신호등 모션이 is-active 를 옮기며 숫자를 노출한다 — 시안은 첫 카드만 점등된 상태 */
.con02__trend-item:not(.is-active) .con02__trend-badge {
	opacity: 0;
	visibility: hidden;
}

.con02__trend-desc {
	margin-top: calc(var(--px)*20);
}

.con02__trend-mark--quality,
.con02__trend-mark--specialty,
.con02__trend-mark--standard {
	margin-top: calc(var(--px)*-21);
}

/* IMG:AUTO con02 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con02__hero-photo {
    width: calc(var(--px)*1772);
    aspect-ratio: 1772 / 699;
}

.con02__hero-paper-media {
    width: calc(var(--px)*972);
    aspect-ratio: 972 / 503;
}

.con02__hero-eyebrow {
    width: calc(var(--px)*166);
    aspect-ratio: 166 / 14;
}

.con02__trend-badge-num--quality {
    width: calc(var(--px)*21);
    aspect-ratio: 21 / 16;
}

.con02__trend-mark--quality {
    width: calc(var(--px)*242);
    aspect-ratio: 242 / 46;
}

.con02__trend-badge-num--specialty,
.con02__trend-badge-num--standard {
    width: calc(var(--px)*24);
    aspect-ratio: 24 / 16;
}

.con02__trend-mark--specialty {
    width: calc(var(--px)*307);
    aspect-ratio: 307 / 42;
}

.con02__trend-mark--standard {
    width: calc(var(--px)*449);
    aspect-ratio: 449 / 41;
}
/* /IMG:AUTO con02 END */

/* FONT:AUTO con02 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con02 {
    text-align: center;
}

.con02__hero-paper-body,
.con02__lead,
.con02__trend {
    color: #0f0f0f;
}

.con02__hero-title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--titleXL);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.14;
}

.con02__hero-title-accent,
.con02__lead-title-accent {
    color: #2752ad;
}

.con02__hero-desc {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.48;
}

.con02__hero-desc-em,
.con02__lead-desc-em {
    font-weight: 700;
}

.con02__points {
    color: #ffffff;
}

.con02__point-title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--headM);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.15;
}

.con02__point-title-accent {
    color: #fef3a2;
}

.con02__point-desc,
.con02__trend-desc {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.5;
}

.con02__lead-title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--titleXL);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.23;
}

.con02__lead-desc {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.46;
}

.con02__trend-title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--subheadL);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.07;
}
/* /FONT:AUTO con02 END */

@media (max-width: 599px) {
	.con02_iner {
		padding-bottom: 21.28vw;
	}

	/* PC 는 종이가 섹션 위로 빠져나가 클립되는 구조 — 모바일은 relative 로 풀리므로 margin 을 지워 종이가 섹션 최상단에 붙는다 */
	.con02__hero {
		margin-top: 0;
	}

	.con02__hero-paper {
		position: relative;
		top: auto;
		order: -1;
		width: 100vw;
	}

	.con02__hero-paper-media {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	/* 종이를 텍스트 높이에 맞춰 채운다 — 전역 img{height:auto} 를 이겨야 하는 배경화 케이스 */
	.con02__hero-paper-media img {
		height: 100%;
		object-fit: cover;
	}

	.con02__hero-paper-body {
		position: relative;
		inset: auto;
		padding: 12vw 7vw 16vw;
	}

	/* 종이 폭 기준 환산(17.08vw)이면 모바일에서 커진 타이틀에 비해 너무 작다 — PC 의 eyebrow:타이틀 비(166:57)로 다시 잡는다 */
	.con02__hero-eyebrow {
		width: 23.3vw;
	}

	.con02__hero-title {
		margin-top: 3.84vw;
	}

	.con02__hero-desc {
		margin-top: 2.72vw;
	}

	.con02__hero-photo {
		width: 93vw;
		margin-top: -3vw;
	}

	/* 사진 바로 밑에 카드가 붙어 있었다(간격 0) — 사진→카드와 카드→카드를 같은 5vw 로 맞춘다 */
	.con02__points {
		position: relative;
		bottom: auto;
		flex-direction: column;
		align-items: center;
		gap: 5vw;
		margin-top: 5vw;
	}

	/* 정원은 모바일에서 글줄 위아래로 빈 공간만 만든다 — 라운드 사각 카드로 바꾸고 높이는 콘텐츠가 정한다 */
	.con02__point {
		width: 86vw;
		height: auto;
		padding: 6vw 5vw;
		border-radius: 5vw;
		box-shadow: inset 0 0 0 1.1747vw #2651ad, inset 0 0 0 1.5662vw #fef3a2;
	}

	.con02__point-desc {
		margin-top: 3.52vw;
	}

	/* PC 140 의 기본환산(22.4vw=84px)은 모바일에서 과했다 */
	.con02__lead {
		margin-top: 11vw;
	}

	.con02__lead-desc {
		margin-top: 2.88vw;
	}

	.con02__trend {
		flex-direction: column;
		align-items: center;
		margin-top: 12.96vw;
		gap: 4.8vw;
	}

	.con02__trend-item.is-active {
		transform: none;
	}

	.con02__trend-card {
		width: 88vw;
		padding: 11.04vw 0;
	}

	.con02__trend-badge {
		top: -2.72vw;
		width: 10.24vw;
		padding: 1.44vw 0;
	}

	.con02__trend-badge-num--quality {
		width: 3.36vw;
	}

	.con02__trend-badge-num--specialty,
	.con02__trend-badge-num--standard {
		width: 3.84vw;
	}

	.con02__trend-desc {
		margin-top: 3.2vw;
	}

	.con02__trend-mark--quality,
	.con02__trend-mark--specialty,
	.con02__trend-mark--standard {
		margin-top: -3.36vw;
	}

	.con02__trend-mark--quality {
		width: 42.592vw;
	}

	.con02__trend-mark--specialty {
		width: 54.032vw;
	}

	.con02__trend-mark--standard {
		width: 79.024vw;
	}
}

/* /merge-build:con02 */
/* merge-build:con03 */
/* con03 — 3열 비교 카드. 모바일은 .con03__cards 를 column 으로 접고 카드 폭 88vw, 금화는 좌우 off-canvas 유지 */
.con03 {
	padding: calc(var(--px)*146) 0 calc(var(--px)*114);
}

.con03__desc {
	margin-top: calc(var(--px)*15);
}

.con03__cards {
	margin-top: calc(var(--px)*52);
	gap: calc(var(--px)*19.5);
}

.con03__card {
	width: calc(var(--px)*400);
	margin-top: calc(var(--px)*58);
	background: #fff;
	border-radius: calc(var(--px)*30);
}

.con03__card--brand {
	width: calc(var(--px)*433);
	background: #fff;
	border: 1px solid #ddd;
	border-radius: calc(var(--px)*30);
}

.con03__coin--m {
	top: calc(var(--px)*47);
	left: calc(var(--px)*-40);
}

.con03__coin--e {
	right: calc(var(--px)*-33);
	bottom: calc(var(--px)*31);
}

.con03__company--m {
	display: block;
	width: calc(var(--px)*80);
	margin: calc(var(--px)*18) auto 0;
	padding: calc(var(--px)*11) 0;
	background: #f7c600;
	border-radius: 50%;
}

.con03__company--e {
	display: block;
	width: calc(var(--px)*80);
	margin: calc(var(--px)*18) auto 0;
	padding: calc(var(--px)*11) 0;
	background: #0f2164;
	border-radius: 50%;
}

.con03__card-head {
	padding: calc(var(--px)*27) 0 calc(var(--px)*29);
	background: #d9e4fb;
	border-radius: calc(var(--px)*30) calc(var(--px)*30) 0 0;
}

.con03__card-body {
	padding: calc(var(--px)*26) calc(var(--px)*30) calc(var(--px)*34);
}

.con03__card--brand .con03__card-body {
	padding: calc(var(--px)*34) calc(var(--px)*46) calc(var(--px)*40);
}

.con03__fee {
	gap: calc(var(--px)*17);
}

.con03__card--brand .con03__fee {
	gap: calc(var(--px)*16);
}

.con03__fee-item {
	width: calc(var(--px)*130);
	gap: calc(var(--px)*14);
}

.con03__card--brand .con03__fee-item {
	width: calc(var(--px)*136);
	gap: calc(var(--px)*11);
}

.con03__fee-plus--brand {
	margin-bottom: calc(var(--px)*8);
}

.con03__label {
	min-width: calc(var(--px)*69);
	padding: calc(var(--px)*1) calc(var(--px)*10);
	background: #5d5d5d;
	border-radius: 50vw;
}

.con03__label--brand {
	min-width: calc(var(--px)*86);
	padding: calc(var(--px)*4) calc(var(--px)*14);
	background: #2752ad;
	border-radius: 50vw;
}

.con03__row--sum {
	margin-top: calc(var(--px)*38);
	padding-top: calc(var(--px)*30);
	border-top: 1px solid #f1f1f1;
	gap: calc(var(--px)*10);
}

.con03__row--term {
	margin-top: calc(var(--px)*23);
	padding-top: calc(var(--px)*33);
	border-top: 1px solid #f1f1f1;
}

.con03__card--brand .con03__row--sum {
	margin-top: calc(var(--px)*24);
}

.con03__card--brand .con03__row--term {
	margin-top: calc(var(--px)*22);
	padding-top: calc(var(--px)*29);
}

.con03__total {
	padding: calc(var(--px)*4) calc(var(--px)*10);
	background: #f1f1f1;
}

.con03__total--brand {
	padding: 0 calc(var(--px)*14);
	background: #fef3a2;
}

.con03__term {
	margin-top: calc(var(--px)*15);
}

.con03__term--brand {
	margin-top: calc(var(--px)*14);
}

.con03__note {
	margin-top: calc(var(--px)*4);
}

.con03__source {
	margin-top: calc(var(--px)*18);
}

/* ── 스크롤 모션 상태 2종 (레퍼런스 ref__con03__motion) ── 기본은 안 보이고 애니 phase 가 켠다 */
.con03__state--zero,
.con03__state--event {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.con03__state--zero {
	background: #fff; /* 아래 base 금액을 덮는다 — 없으면 크로스페이드가 두 값을 겹쳐 보인다 */
	top: calc(var(--px)*122);
	left: calc(var(--px)*46);
	right: calc(var(--px)*46);
}

.con03__state--event {
	top: calc(var(--px)*117);
	left: calc(var(--px)*31);
	width: calc(var(--px)*370);
	height: calc(var(--px)*261); /* HEIGHT: 배너는 시안 고정 프레임(370x261)이고 커피잔·원두가 그 변에 물려 있어 콘텐츠로 못 만든다 */
	padding-top: calc(var(--px)*71);
	background: #2752ad;
	border-radius: calc(var(--px)*20);
	box-shadow: 0 0 0 calc(var(--px)*2) #fef3a2, 0 0 0 calc(var(--px)*8) #2752ad; /* 시안 = 노랑 2px 링 + 그 바깥 파랑 6px */
}

.con03__event-copy {
	margin-top: calc(var(--px)*25);
}

.con03__cup {
	top: calc(var(--px)*14);
	left: calc(var(--px)*-58);
}

.con03__bean--a {
	right: calc(var(--px)*8);
	bottom: calc(var(--px)*15);
}

.con03__bean--b {
	right: calc(var(--px)*-27);
	bottom: calc(var(--px)*56);
}

/* IMG:AUTO con03 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con03__coin--m {
    width: calc(var(--px)*82);
    aspect-ratio: 82 / 80;
}

.con03__logo {
    width: calc(var(--px)*122);
    aspect-ratio: 122 / 31;
}

.con03__event-title {
    width: calc(var(--px)*183);
    aspect-ratio: 183 / 13;
}

.con03__cup {
    width: calc(var(--px)*126);
    aspect-ratio: 126 / 97;
}

.con03__bean--a {
    width: calc(var(--px)*39);
    aspect-ratio: 39 / 42;
}

.con03__bean--b {
    width: calc(var(--px)*38);
    aspect-ratio: 38 / 37;
}

.con03__coin--e {
    width: calc(var(--px)*65);
    aspect-ratio: 65 / 70;
}
/* /IMG:AUTO con03 END */

/* FONT:AUTO con03 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con03 {
    text-align: center;
}

.con03__title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--titleXL);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.14;
    color: #ffffff;
}

.con03__title-point,
.con03__event-em {
    color: #fef3a2;
}

.con03__desc {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.46;
    color: #ffffff;
}

.con03__desc-strong {
    font-weight: 700;
}

.con03__company--m {
    font-family: var(--font-pretendard);
    font-size: var(--headM);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.2;  /* OVR psd:2.5 */
    color: #000000;
}

.con03__card-body,
.con03__fee-item,
.con03__row--sum {
    font-family: var(--font-nanumsquareneo);
}

.con03__fee {
    font-weight: 400;
}

.con03__label {
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1.56;
    color: #ffffff;
}

.con03__value,
.con03__fee-plus {
    font-size: var(--headM);
    letter-spacing: -0.05em;
    line-height: 1.08;
    color: #6a6a6a;
}

.con03__total {
    font-size: var(--headM);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.08;
    color: #6a6a6a;
}

.con03__term {
    font-size: var(--headM);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1.39;
    color: #6a6a6a;
}

.con03__label--brand {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--subheadM);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.22;
    color: #ffffff;
}

.con03__value--brand,
.con03__total--brand {
    font-size: var(--titleXS);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.3125;  /* OVR psd:1.31 */
    color: #0f0f0f;
}

.con03__fee-plus--brand {
    font-family: var(--font-pretendard);
    font-size: var(--headL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1;
    color: #0f0f0f;
}

.con03__event-copy {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--titleS);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.29;
    color: #ffffff;
}

.con03__term--brand {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--titleXS);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.3125;  /* OVR psd:1.31 */
    color: #0f0f0f;
}

.con03__note {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.4;  /* OVR psd:3.61 */
    color: #0f0f0f;
}

.con03__company--e {
    font-family: var(--font-pretendard);
    font-size: var(--headM);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.2;  /* OVR psd:2.5 */
    color: #ffffff;
}

.con03__source {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.4;  /* OVR psd:4.06 */
    color: #ffffff;
}
/* /FONT:AUTO con03 END */

@media (max-width: 599px) {
	.con03 {
		padding: 14vw 0 12vw; /* 0.16 환산(23.36/18.24)은 세로 여백엔 과대 — 다른 섹션 톤에 맞춰 축소 */
	}

	.con03_iner {
		padding-inline: 6vw; /* 카드 88vw 의 좌우선과 맞춘다 */
	}

	.con03__desc {
		margin-top: 2.4vw;
	}

	/* 카드덱 스택 — M사는 합계줄까지 · E사는 가맹금줄까지 계단식으로 내밀고 스탠브루가 맨 앞을 통째로 덮는다 */
	.con03__cards {
		position: relative;
		flex-direction: column;
		align-items: center;
		margin-top: 8.32vw;
		padding-top: 57vw; /* 카드 상단 기준 합계줄 끝이 53vw 라 M사 노출분을 그 뒤로 둔다 */
		gap: 0;
	}

	.con03__card {
		position: absolute;
		top: 0;
		width: 76vw;
		margin-top: 0;
		border-radius: 4.8vw;
		filter: grayscale(1) brightness(0.8); /* opacity 로 딤하면 뒤 카드 내용이 비쳐 보인다 */
		cursor: pointer;
		-webkit-tap-highlight-color: transparent; /* 눌러서 앞으로 보내는 동작이라 기본 회색 하이라이트는 방해다 */
		-webkit-user-select: none;
		user-select: none; /* 누르고 있는 제스처라 길게 누르면 글자가 잡히고 선택 핸들이 뜬다 */
		-webkit-touch-callout: none; /* iOS 는 같은 제스처에 콜아웃 메뉴까지 띄운다 */
		/* 계단이 겹쳐 카드 경계가 섞인다 — 위로 지는 그림자여야 덮는 카드가 뒤 카드 표면에 선을 남긴다.
		   filter 가 그림자까지 회색조로 먹으므로 색은 검정 계열이다 */
		box-shadow: 0 -0.8vw 2.67vw rgba(0, 0, 0, 0.2);
	}

	.con03__card--brand + .con03__card {
		top: 26vw; /* 57 − 26 = E사 노출 31vw — 가맹금·교육비줄 끝이 29.9vw 라 그 뒤에 둔다 */
		width: 82vw; /* M 76 → E 82 → brand 88 — 폭이 같으면 앞뒤가 안 읽힌다 */
		filter: grayscale(1) brightness(0.94); /* 앞장이라 뒷장(M사)보다 밝아야 계단이 읽힌다 */
	}

	.con03__card--brand {
		width: 88vw;
		border-radius: 4.8vw;
		box-shadow: 0 -0.8vw 2.67vw rgba(0, 0, 0, 0.2); /* E사 표면에 경계선을 남긴다 */
		z-index: 2; /* DOM 순서는 PC 시안 좌→우 = reading order 라 못 바꾼다 */
	}

	/* 누르고 있는 동안만 맨 앞 — 계단에 가려진 아래 항목을 확인하는 수단이라 떼면 되돌아간다 */
	.con03__card.is-peek {
		z-index: 3;
		filter: none; /* 앞으로 왔는데 흑백이면 읽으려고 누른 의미가 없다 */
	}

	.con03__card .con03__fee-item {
		width: 29vw; /* 카드 76vw 로 좁아진 가용폭 */
	}

	.con03__coin--m {
		width: 13.12vw;
		top: 7.52vw;
		left: -6.56vw;
	}

	.con03__coin--e {
		width: 10.4vw;
		right: -5.2vw;
		bottom: 4.96vw;
	}

	.con03__company--m,
	.con03__company--e {
		width: 12.8vw;
		margin-top: 2.88vw;
		padding: 1.76vw 0;
	}

	.con03__card-head {
		padding: 4.32vw 0 4.64vw;
		border-radius: 4.8vw 4.8vw 0 0;
	}

	.con03__logo {
		width: 19.52vw;
	}

	.con03__card-body {
		padding: 4.16vw 4.8vw 5.44vw;
	}

	.con03__card--brand .con03__card-body {
		padding: 5.44vw 7.36vw 6.4vw;
	}

	.con03__fee {
		gap: 2.72vw;
	}

	.con03__card--brand .con03__fee {
		gap: 2.56vw;
	}

	.con03__fee-item {
		width: 34.7vw;
		gap: 2.24vw;
	}

	.con03__card--brand .con03__fee-item {
		width: 32.2vw;
		gap: 1.76vw;
	}

	.con03__fee-plus--brand {
		margin-bottom: 1.28vw;
	}

	.con03__label {
		min-width: 11.04vw;
		padding: 0.16vw 1.6vw;
	}

	.con03__label--brand {
		min-width: 13.76vw;
		padding: 0.64vw 2.24vw;
	}

	.con03__row--sum {
		margin-top: 6.08vw;
		padding-top: 4.8vw;
		gap: 1.6vw;
	}

	.con03__row--term {
		margin-top: 3.68vw;
		padding-top: 5.28vw;
	}

	.con03__card--brand .con03__row--sum {
		margin-top: 3.84vw;
	}

	.con03__card--brand .con03__row--term {
		margin-top: 3.52vw;
		padding-top: 4.64vw;
	}

	.con03__total {
		padding: 0.64vw 1.6vw;
	}

	.con03__total--brand {
		padding: 0 2.24vw;
	}

	.con03__term {
		margin-top: 2.4vw;
	}

	.con03__term--brand {
		margin-top: 2.24vw;
	}

	.con03__note {
		margin-top: 0.64vw;
	}

	.con03__source {
		margin-top: 2.88vw;
	}

	.con03__state--zero {
		top: 19.35vw;
		left: 7.3583vw;
		right: 7.3583vw;
	}

	.con03__state--event {
		top: 18.55vw;
		left: 4.96vw;
		width: 78.08vw;
		height: 43.3067vw; /* HEIGHT: PC 와 동일 — 커피잔·원두가 배너 변에 물린 고정 프레임이라 콘텐츠로 못 만든다 */
		padding-top: 11.36vw;
		border-radius: 3.2vw;
		box-shadow: 0 0 0 0.32vw #fef3a2, 0 0 0 1.28vw #2752ad; /* PC 는 --px 축이라 모바일에서 0.4px 로 무너진다 */
	}

	.con03__event-title {
		width: 29.28vw;
	}

	.con03__event-copy {
		margin-top: 4vw;
	}

	.con03__cup {
		width: 20.16vw;
		top: 2.24vw;
		left: -9.28vw;
	}

	.con03__bean--a {
		width: 6.24vw;
		right: 1.28vw;
		bottom: 2.4vw;
	}

	.con03__bean--b {
		width: 6.08vw;
		right: -4.32vw;
		bottom: 8.96vw;
	}
}

/* /merge-build:con03 */
/* merge-build:con04 */
/* con04 — WHY STANBRU / 01 차별화된 창업 아이템 */
/* 모바일 계획: head 유지 · .con04__cards 3열 → column 1열 · .con04__diagram row → column · .con04__prices 3원 겹침 유지 */
.con04 {
	padding: calc(var(--px)*113) 0 calc(var(--px)*101);
	background: repeating-linear-gradient(90deg, #e4efff 0 calc(var(--px)*1), #d9e4fb calc(var(--px)*1) calc(var(--px)*15));
}

.con04__title {
	margin-top: calc(var(--px)*31);
}

.con04__lead {
	margin-top: calc(var(--px)*23);
}

/* 높이 793 = padding 33 + 접힌 덱 760(패널 490 + 앞 패널 띠 90 ×3) */
.con04__stack {
	width: calc(var(--px)*1440);
	height: calc(var(--px)*793); /* HEIGHT: 스택 창 — 대기 패널이 absol 이라 흐름이 못 만든다(2026-09-09 유저 승인) */
	margin: calc(var(--px)*22.7) auto 0;
	padding-top: calc(var(--px)*33);
	overflow: hidden;
}

.con04__panel {
	width: 100%;
}

/* 접힌 덱 — 앞 패널 띠(90)만 남기고 겹쳐 대기하다 스크롤에 400 씩 올라와 계단으로 쌓인다 */
.con04__panel--02,
.con04__panel--03,
.con04__panel--04 {
	left: 0;
}

.con04__panel--02 {
	top: calc(var(--px)*523);
}

.con04__panel--03 {
	top: calc(var(--px)*613);
}

.con04__panel--04 {
	top: calc(var(--px)*703);
}

.con04__panel-no {
	left: calc(var(--px)*65);
	top: calc(var(--px)*-33);
	width: calc(var(--px)*70);
	padding-block: calc(var(--px)*20.5);
	background: #fef3a2;
}

.con04__panel-title {
	padding: calc(var(--px)*24) 0 calc(var(--px)*26);
	background: #2752ad;
}

.con04__cards {
	background: #fff;
	border: 1px solid #ddd;
}

.con04__card {
	flex: 1 1 0;
	min-width: 0;
	padding: calc(var(--px)*35) calc(var(--px)*20) 0;
}

.con04__card + .con04__card {
	border-left: 1px solid #ddd;
}

.con04__card-desc {
	margin-top: calc(var(--px)*11.2);
}

.con04__card-photo {
	margin-top: calc(var(--px)*25);
}

.con04__prices {
	width: calc(var(--px)*363);
	margin-top: calc(var(--px)*39);
}

.con04__prices-row--pair {
	margin-top: calc(var(--px)*-23);
}

.con04__price {
	width: calc(var(--px)*190);
	padding: calc(var(--px)*32) 0 calc(var(--px)*35.5);
	border-radius: 50%;
	box-shadow: 0 0 0 2px #fff;
}

.con04__price--brew {
	background: #577ac5;
}

.con04__price--americano {
	background: #415a8f;
}

.con04__price--takeout {
	top: 0;
	right: 0;
	background: #0f2164;
}

.con04__price-value--brew,
.con04__price-value--americano,
.con04__price-value--takeout {
	margin-top: calc(var(--px)*5.4);
}

.con04__diagram {
	margin-top: calc(var(--px)*41.5);
}

.con04__diagram-label {
	/* TEXT-WIDTH: 다이어그램 노드 박스 — 시안 115x76 고정 프레임 */
	width: calc(var(--px)*115);
	padding: calc(var(--px)*11.5) 0 calc(var(--px)*15.5);
	background: #f4f8ff;
	border: 1px solid #ddd;
	border-radius: calc(var(--px)*10);
}

.con04__diagram-line {
	width: calc(var(--px)*26);
	padding-block: calc(var(--px)*4.5);
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

.con04__diagram-logo {
	width: calc(var(--px)*126);
	padding-block: calc(var(--px)*42.5);
	border-radius: 50%;
	background: #2752ad;
}

/* 패널02 — 효율적인 운영 시스템 */
/* 모바일 계획: .con04__menubox 는 카드 폭 100% · 바 width 는 % 로 환산 */
.con04__card-photo--machine {
	margin-top: calc(var(--px)*39.56);
	margin-left: calc(var(--px)*53.5);
}

.con04__card-photo--matcha {
	margin-top: calc(var(--px)*28.56);
	margin-left: calc(var(--px)*70.83);
}

.con04__menubox {
	width: calc(var(--px)*404);
	margin-top: calc(var(--px)*38.56);
	margin-left: calc(var(--px)*16.17);
	padding: calc(var(--px)*12) calc(var(--px)*30) calc(var(--px)*27);
	background: #fcfcf4;
	border: 1px solid #e7e7d7;
	border-radius: calc(var(--px)*20);
}

.con04__menubox-rows {
	margin-top: calc(var(--px)*19);
}

.con04__menubox-row + .con04__menubox-row {
	margin-top: calc(var(--px)*13);
}

.con04__menubox-name,
.con04__menubox-name--brand {
	width: calc(var(--px)*80);
}

.con04__menubox-bar--rival,
.con04__menubox-bar--brand {
	padding-block: calc(var(--px)*11);
}

.con04__menubox-bar--rival {
	width: calc(var(--px)*262);
	background: #b6b6b6;
}

.con04__menubox-bar--brand {
	width: calc(var(--px)*123);
	background: #2752ad;
}

.con04__menubox-callout {
	right: calc(var(--px)*13);
	bottom: calc(var(--px)*-4);
	width: calc(var(--px)*170);
	padding-block: calc(var(--px)*20);
	background: #0f0f0f;
	border-radius: 50%;
	box-shadow: 0 0 0 1px #fff, 0 0 0 3px #0f0f0f;
}

/* 패널03 — 안정적인 수익 구조 */
/* 모바일 계획: .con04__channels 3원 겹침 유지(축소만) */
.con04__channels {
	width: calc(var(--px)*359);
	margin-top: calc(var(--px)*51.56);
	margin-left: calc(var(--px)*40.5);
}

.con04__channel--hall,
.con04__channel--takeout,
.con04__channel--delivery {
	width: calc(var(--px)*124);
	border-radius: 50%;
}

.con04__channel--hall {
	padding: calc(var(--px)*41) 0 calc(var(--px)*39);
	background: #5e3f24;
	box-shadow: 0 0 0 1px #fef3a2, 0 0 0 3px #5e3f24;
}

.con04__channel--takeout {
	left: calc(var(--px)*117);
	top: 0;
	padding: calc(var(--px)*40) 0 calc(var(--px)*39);
	background: #2752ad;
	box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2752ad;
}

.con04__channel--delivery {
	right: 0;
	top: 0;
	padding: calc(var(--px)*40) 0 calc(var(--px)*39);
	background: #fef3a2;
	box-shadow: 0 0 0 1px #2752ad, 0 0 0 3px #fef3a2;
}

.con04__channel-rate--hall,
.con04__channel-rate--takeout,
.con04__channel-rate--delivery {
	margin-top: calc(var(--px)*11);
}

.con04__card-photo--store {
	margin-top: calc(var(--px)*46.56);
	margin-left: calc(var(--px)*28.83);
}

.con04__card-photo--beans {
	margin-top: calc(var(--px)*34.56);
	margin-left: calc(var(--px)*-20.83);
}

/* 패널04 — 롯데GRS의 체계적인 지원 */
/* 모바일 계획: .con04__lens-group·.con04__steps 는 카드 폭 기준 등비 축소 · .con04__posters 3열 유지 */
.con04__lens-group {
	width: calc(var(--px)*480);
	margin-top: calc(var(--px)*42.56);
	margin-left: calc(var(--px)*-21.5);
}

.con04__area--station,
.con04__area--mixed,
.con04__area--special {
	background: #0f0f0f;
	border-radius: 50%;
	box-shadow: 0 0 0 1px #fff, 0 0 0 3px #0f0f0f;
}

.con04__area--station {
	right: calc(var(--px)*176);
	top: calc(var(--px)*-24);
	width: calc(var(--px)*78);
	padding-block: calc(var(--px)*27);
}

.con04__area--mixed {
	right: calc(var(--px)*84);
	top: calc(var(--px)*30);
	width: calc(var(--px)*100);
	padding-block: calc(var(--px)*26);
}

.con04__area--special {
	left: calc(var(--px)*165);
	bottom: calc(var(--px)*21);
	width: calc(var(--px)*100);
	padding-block: calc(var(--px)*38);
}

.con04__steps {
	width: fit-content;
	margin-top: calc(var(--px)*40.56);
	margin-left: calc(var(--px)*28.83);
	gap: calc(var(--px)*3);
}

.con04__step--remote,
.con04__step--group,
.con04__step--field {
	width: calc(var(--px)*124);
	padding-block: calc(var(--px)*34);
	border-radius: 50%;
}

.con04__step--remote {
	background: #2e59b5;
}

.con04__step--group {
	background: #1c47a1;
}

.con04__step--field {
	margin-left: calc(var(--px)*1);
	background: #103a91;
}

.con04__step-arrow--first,
.con04__step-arrow--second {
	bottom: calc(var(--px)*48);
	width: calc(var(--px)*27);
	background: #0f0f0f;
	border-radius: 50%;
}

.con04__step-arrow--first {
	left: calc(var(--px)*112);
}

.con04__step-arrow--second {
	right: calc(var(--px)*113);
}

.con04__posters {
	width: fit-content;
	margin-top: calc(var(--px)*28.56);
	margin-left: calc(var(--px)*30.17);
	gap: calc(var(--px)*6);
}

.con04__card-poster:last-child {
	margin-left: calc(var(--px)*1);
}

/* IMG:AUTO con04 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con04__label {
    width: calc(var(--px)*170);
    aspect-ratio: 170 / 29;
}

.con04__panel-no-img {
    width: calc(var(--px)*27);
    aspect-ratio: 27 / 20;
}

.con04__card-photo {
    width: calc(var(--px)*327);
    aspect-ratio: 327 / 195;
}

.con04__price-value--brew {
    width: calc(var(--px)*137);
    aspect-ratio: 137 / 25;
}

.con04__price-value--americano {
    width: calc(var(--px)*136);
    aspect-ratio: 136 / 25;
}

.con04__price-value--takeout {
    width: calc(var(--px)*132);
    aspect-ratio: 132 / 25;
}

.con04__diagram-logo-img {
    width: calc(var(--px)*91);
    aspect-ratio: 91 / 41;
}

.con04__panel-no-img--02,
.con04__panel-no-img--03 {
    width: calc(var(--px)*30);
    aspect-ratio: 30 / 20;
}

.con04__card-photo--machine {
    width: calc(var(--px)*333);
    aspect-ratio: 333 / 189;
}

.con04__card-photo--matcha {
    width: calc(var(--px)*319);
    aspect-ratio: 319 / 200;
}

.con04__channel-label--hall {
    width: calc(var(--px)*44);
    aspect-ratio: 44 / 13;
}

.con04__channel-rate--hall {
    width: calc(var(--px)*53);
    aspect-ratio: 53 / 20;
}

.con04__channel-label--takeout {
    width: calc(var(--px)*86);
    aspect-ratio: 86 / 14;
}

.con04__channel-rate--takeout,
.con04__channel-rate--delivery {
    width: calc(var(--px)*52);
    aspect-ratio: 52 / 20;
}

.con04__channel-label--delivery {
    width: calc(var(--px)*83);
    aspect-ratio: 83 / 14;
}

.con04__card-photo--store {
    width: calc(var(--px)*378);
    aspect-ratio: 378 / 182;
}

.con04__card-photo--beans {
    width: calc(var(--px)*480);
    aspect-ratio: 480 / 194;
}

.con04__panel-no-img--04 {
    width: calc(var(--px)*31);
    aspect-ratio: 31 / 20;
}

.con04__card-photo--lens {
    width: calc(var(--px)*193);
    aspect-ratio: 193 / 186;
}

.con04__card-poster {
    width: calc(var(--px)*121);
    aspect-ratio: 121 / 176;
}
/* /IMG:AUTO con04 END */

/* FONT:AUTO con04 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con04__head {
    text-align: center;
    color: #0f0f0f;
}

.con04__title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--titleXL);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.14;
}

.con04__title-accent,
.con04__diagram-label-accent,
.con04__menubox-name--brand {
    color: #2752ad;
}

.con04__lead {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.46;
}

.con04__lead-strong {
    font-weight: 700;
}

.con04__panel.con04__panel--01,
.con04__panel.con04__panel--03,
.con04__panel.con04__panel--04 {
    text-align: center;
}

.con04__panel-title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--titleXS);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.25;
    text-align: center;
    color: #ffffff;
}

.con04__panel-title-accent,
.con04__menubox-callout-accent {
    color: #fef3a2;
}

.con04__card {
    font-family: var(--font-pretendard);
}

.con04__card-title {
    font-family: var(--font-pretendard);
    font-size: var(--subheadL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.43;
    color: #0f0f0f;
}

.con04__card-desc {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.53;
    color: #000000;
}

.con04__prices {
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: -0.07em;
    line-height: 1.56;
    color: #ffffff;
}

.con04__diagram {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--subheadS);
    font-weight: 800;
    letter-spacing: -0.07em;
    line-height: 1.41;
    color: #0f0f0f;
}

.con04__card-title.con04__card-title--tight {
    font-family: var(--font-pretendard);
    font-size: var(--subheadL);
    font-weight: 700;
    letter-spacing: -0.07em;
    line-height: 1.43;
    text-align: center;
    color: #000000;
}

.con04__card-desc.con04__card-desc--compact {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.56;
    text-align: center;
    color: #000000;
}

.con04__menubox-title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--bodyXL);
    font-weight: 800;
    letter-spacing: -0.07em;
    line-height: 1.4;
    text-align: center;
    color: #000000;
}

.con04__menubox-rows {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 700;
    letter-spacing: -0.07em;
    line-height: 1.56;
}

.con04__menubox-name {
    color: #b6b6b6;
}

.con04__menubox-callout-text {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--bodyXL);
    font-weight: 800;
    letter-spacing: -0.07em;
    line-height: 1.3;
    text-align: center;
    color: #ffffff;
}

.con04__cards {
    font-family: var(--font-pretendard);
    color: #000000;
}

.con04__card-desc.con04__card-desc--compact-tight {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 300;
    letter-spacing: -0.07em;
    line-height: 1.56;
    color: #000000;
}

.con04__lens-group {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--bodyL);
    font-weight: 700;
    letter-spacing: -0.07em;
    line-height: 1.33;
    color: #fef3a2;
}

.con04__steps {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--bodyXL);
    font-weight: 700;
    letter-spacing: -0.07em;
    line-height: 1.4;
    color: #ffffff;
}
/* /FONT:AUTO con04 END */

@media (max-width:599px) {
	.con04 {
		padding: 18.08vw 0 16.16vw;
	}

	.con04__label {
		width: 27.2vw;
	}

	.con04__title {
		margin-top: 4.96vw;
	}

	.con04__lead {
		margin-top: 3.68vw;
	}

	.con04__stack {
		width: 92vw;
		height: auto;
		margin-top: 3.632vw;
		padding-top: 5.28vw;
		overflow: visible;
	}

	.con04__panel--02,
	.con04__panel--03,
	.con04__panel--04 {
		position: static;
	}

	.con04__panel + .con04__panel {
		margin-top: 5.28vw;
	}

	/* 기본환산 10.4vw 는 배지 우변이 가운데정렬된 띠 제목의 잉크 시작(85.8px)에 닿았다 — PC 비(65/1440)로 다시 잡는다 */
	.con04__panel-no {
		left: 4.15vw;
		top: -5.28vw;
		width: 11.2vw;
		padding-block: 3.28vw;
	}

	.con04__panel-no-img {
		width: 4.32vw;
	}

	.con04__panel-no-img--02,
	.con04__panel-no-img--03 {
		width: 4.8vw;
	}

	.con04__panel-no-img--04 {
		width: 4.96vw;
	}

	.con04__panel-title {
		padding: 3.84vw 0 4.16vw;
	}

	.con04__cards {
		flex-direction: column;
	}

	.con04__card {
		padding: 5.6vw 3.7333vw;
	}

	/* 하단이 잘린 사진 4종은 카드 밑변에 붙인다 */
	.con04__card:has(.con04__card-photo),
	.con04__card:has(.con04__card-photo--matcha),
	.con04__card:has(.con04__card-photo--store),
	.con04__card:has(.con04__card-photo--beans) {
		padding-bottom: 0;
	}

	.con04__card + .con04__card {
		border-left: 0;
		border-top: 1px solid #ddd;
	}

	.con04__card-desc {
		margin-top: 1.792vw;
	}

	.con04__card-photo {
		width: 84vw;
		margin-top: 4vw;
	}

	.con04__prices {
		width: 84vw;
		margin-top: 6.24vw;
	}

	.con04__prices-row--pair {
		margin-top: -5.3223vw;
	}

	.con04__price {
		width: 43.9669vw;
		padding: 7.405vw 0 8.2149vw;
	}

	.con04__price-value--brew {
		width: 31.7025vw;
	}

	.con04__price-value--americano {
		width: 31.4711vw;
	}

	.con04__price-value--takeout {
		width: 30.5455vw;
	}

	.con04__price-value--brew,
	.con04__price-value--americano,
	.con04__price-value--takeout {
		margin-top: 1.2496vw;
	}

	.con04__diagram {
		width: 84vw;
		margin-top: 6.64vw;
	}

	.con04__diagram-label {
		/* TEXT-WIDTH: 다이어그램 노드 박스 — PC 115x76 고정 프레임의 등비 환산 */
		width: 23.6765vw;
		padding: 2.3676vw 0 3.1912vw;
		border-radius: 2.0588vw;
	}

	.con04__diagram-line {
		width: 5.3529vw;
		padding-block: 0.9265vw;
	}

	.con04__diagram-logo {
		width: 25.9412vw;
		padding-block: 8.75vw;
	}

	.con04__diagram-logo-img {
		width: 18.7353vw;
	}

	.con04__card-photo--machine {
		width: 84vw;
		margin-top: 6.3296vw;
		margin-inline: auto;
	}

	.con04__card-photo--matcha {
		width: 84vw;
		margin-top: 4.5696vw;
		margin-inline: auto;
	}

	.con04__menubox {
		width: 84vw;
		margin-top: 6.1696vw;
		margin-inline: auto;
		padding: 2.495vw 6.2376vw 5.6139vw;
		border-radius: 4.1584vw;
	}

	.con04__menubox-rows {
		margin-top: 3.9505vw;
	}

	.con04__menubox-row + .con04__menubox-row {
		margin-top: 2.703vw;
	}

	.con04__menubox-name,
	.con04__menubox-name--brand {
		width: 16.6337vw;
	}

	.con04__menubox-bar--rival,
	.con04__menubox-bar--brand {
		padding-block: 2.2871vw;
	}

	.con04__menubox-bar--rival {
		width: 54.4752vw;
	}

	.con04__menubox-bar--brand {
		width: 25.5743vw;
	}

	/* 타원 상단이 저가커피 바 하단(67) 아래로 내려가야 두 막대의 길이 차가 읽힌다 */
	.con04__menubox-callout {
		right: -1.1vw;
		bottom: -4.8vw;
		width: 35.3465vw;
		padding-block: 4.1584vw;
	}

	.con04__channels {
		width: 84vw;
		margin-top: 8.2496vw;
		margin-inline: auto;
	}

	.con04__channel--hall,
	.con04__channel--takeout,
	.con04__channel--delivery {
		width: 29.0139vw;
	}

	.con04__channel--hall {
		padding: 9.5933vw 0 9.1253vw;
	}

	.con04__channel--takeout {
		left: 27.376vw;
		padding: 9.3593vw 0 9.1253vw;
	}

	.con04__channel--delivery {
		padding: 9.3593vw 0 9.1253vw;
	}

	.con04__channel-label--hall {
		width: 10.2953vw;
	}

	.con04__channel-label--takeout {
		width: 20.1226vw;
	}

	.con04__channel-label--delivery {
		width: 19.4206vw;
	}

	.con04__channel-rate--hall {
		width: 12.4011vw;
	}

	.con04__channel-rate--takeout,
	.con04__channel-rate--delivery {
		width: 12.1671vw;
	}

	.con04__channel-rate--hall,
	.con04__channel-rate--takeout,
	.con04__channel-rate--delivery {
		margin-top: 2.5738vw;
	}

	.con04__card-photo--store {
		width: 84vw;
		margin-top: 7.4496vw;
		margin-inline: auto;
	}

	.con04__card-photo--beans {
		width: 84vw;
		margin-top: 5.5296vw;
		margin-inline: auto;
	}

	/* PC 와 같은 구도 — 손잡이 끝이 카드 좌측 밖으로 나가야 좌상단이 안 휑하다 */
	.con04__lens-group {
		width: 91.7754vw;
		margin-top: 6.8096vw;
		margin-left: -4.1108vw;
	}

	.con04__area--station {
		right: 33.651vw;
		top: -4.5888vw;
		width: 14.9135vw;
		padding-block: 5.1624vw;
	}

	.con04__area--mixed {
		right: 16.0607vw;
		top: 5.736vw;
		width: 19.1199vw;
		padding-block: 4.9712vw;
	}

	.con04__area--special {
		left: 31.5478vw;
		bottom: 4.0152vw;
		width: 19.1199vw;
		padding-block: 7.2656vw;
	}

	.con04__card-photo--lens {
		width: 36.9014vw;
	}

	.con04__steps {
		width: 84vw;
		margin-top: 6.4896vw;
		margin-inline: auto;
		gap: 0.6667vw;
	}

	.con04__step--remote,
	.con04__step--group,
	.con04__step--field {
		width: 27.5556vw;
		padding-block: 7.5556vw;
	}

	.con04__step-arrow--first,
	.con04__step-arrow--second {
		bottom: 10.6667vw;
		width: 6vw;
	}

	.con04__step-arrow--first {
		left: 24.8889vw;
	}

	.con04__step-arrow--second {
		right: 25.1111vw;
	}

	.con04__posters {
		width: 84vw;
		margin-top: 4.5696vw;
		margin-inline: auto;
		gap: 1.344vw;
	}

	.con04__card-poster {
		width: 27.104vw;
	}

}

/* /merge-build:con04 */
/* merge-build:con05 */
/* con05 — 기본기가 만드는 안정적인 매출 */
/* 모바일 계획: .con05_box 폭 100% · 카운터 3그룹 wrap 허용 · 슬라이드 폭 축소(slidesPerView auto 유지) · 손/컵 데코 축소 */

/* 컵이 시안대로 밴드 아래 20px 을 넘어 그려지도록 section{overflow:hidden} 을 푼다 — 대신 우측으로 새는 .con05__hand 는 자기 clip-path 가 막는다 */
.con05 {
	overflow: visible;
	z-index: 1; /* 뒤 섹션(con06)도 relative 라 DOM 순서로는 컵이 깔린다 — 섹션 순서는 못 바꾸는 자리 */
	padding-bottom: calc(var(--px)*71);
}

/* 카드 */
.con05_box {
	width: calc(var(--px)*1282);
	margin-top: calc(var(--px)*82);
}

.con05_box_iner {
	padding: calc(var(--px)*40) 0 calc(var(--px)*79);
}

.con05__emblem {
	gap: calc(var(--px)*14);
}

.con05__emblem-dot {
	width: calc(var(--px)*7);
	margin-top: calc(var(--px)*42);
	padding-top: calc(var(--px)*7);
	border-radius: 50%;
	background: #ffffff;
}

.con05__title {
	margin-top: calc(var(--px)*73);
}

.con05__desc {
	margin-top: calc(var(--px)*16);
}

/* 카운터 — 배지가 숫자판 상단 8px 을 덮는다(absolute 라 in-flow 형제보다 위에 칠해짐) */
.con05__counter {
	margin-top: calc(var(--px)*39);
	padding-top: calc(var(--px)*48);
}

.con05__badge {
	top: 0;
	z-index: 1; /* 등장 트윈의 opacity<1 이 static 인 숫자칸을 stacking 층으로 올려 DOM 뒤인 셀이 배지를 덮는다 */
	width: calc(var(--px)*190);
	padding-block: calc(var(--px)*12);
	border-radius: 50vw;
	background: #fef3a2;
	box-shadow: 0 calc(var(--px)*7) calc(var(--px)*24) rgba(52, 28, 15, 0.31);
}

.con05__counter-row {
	gap: calc(var(--px)*10);
}

.con05__counter-group {
	gap: calc(var(--px)*12);
}

.con05__counter-cell {
	width: calc(var(--px)*93);
	padding-block: calc(var(--px)*31) calc(var(--px)*34);
	border-radius: calc(var(--px)*10);
	background: #ffffff;
}

.con05__counter-digit {
	font-family: var(--font-nanumsquareneo);
	font-size: calc(var(--px)*89);
	font-weight: 900;
	line-height: 0.72;
	color: #0f0f0f;
}

.con05__glyph-comma {
	margin-bottom: calc(var(--px)*8);
	padding-left: calc(var(--px)*8);
	box-sizing: content-box;
}

.con05__caption {
	margin-top: calc(var(--px)*18);
}

/* 데코 */
.con05__hand {
	top: calc(var(--px)*3);
	right: calc(var(--px)*-145);
	clip-path: inset(0 calc(var(--px)*145) 0 0); /* 섹션 overflow 를 풀어 캔버스 밖 145px 이 가로 스크롤을 만든다 — 딱 그만큼만 잘라낸다 */
}

.con05__cup {
	z-index: 2; /* swiper 가 .con05__slides 에 z-index:1 로 스택 컨텍스트를 만듦 — DOM 뒤 형제라도 깔린다 */
	right: calc(var(--px)*610);
	bottom: calc(var(--px)*-91);
}

/* 매출 슬라이드 — 카피·폰트가 spec 정본에 없다(PSD 병합 래스터 · 고객사 CMS 등록분)라 con05 접두를 쓰지 않는다 */
.con05__slides {
	width: 100%;
	margin-top: calc(var(--px)*56);
}


/* ★ .swiper-slide 를 겹쳐 폭을 지킨다 — swiper CSS 가 섹션 CSS 뒤에 실려 .swiper-slide{width:100%} 가 같은 특이도로 이긴다 */
.store-slide.swiper-slide { /* margin-right 로 간격 — slidesPerView:auto 는 장 폭에 margin 을 포함해 재므로 spaceBetween 을 안 쓴다 */
	align-items: stretch; /* 공통 div.swiper-slide 의 center 를 되돌린다 — 자식이 shrink-to-fit 되면 아래 ellipsis 가 폭을 못 잡는다 */
	flex-shrink: 0;
	/* 매장명·라벨·금액은 고객사가 게시판에 등록해 길이를 못 정한다 — 한 줄이 카드 높이의 계약이라 넘치면 잘라 … 로 준다 */
	white-space: nowrap;
	width: calc(var(--px)*398);
	margin-right: calc(var(--px)*15);
	padding: calc(var(--px)*36) calc(var(--px)*20) calc(var(--px)*32);
	border: 1px solid #ffffff;
	font-family: var(--font-nanumsquareneo);
	font-size: var(--subheadM);
	letter-spacing: -0.05em;
	line-height: 1.2;
	color: #ffffff;
}

/* white-space 는 부모(.store-slide)가 소유 — 자르는 쪽은 비상속이라 각 줄에 건다 */
.store-slide__name,
.store-slide__label,
.store-slide__value {
	overflow: hidden;
	text-overflow: ellipsis;
}

.store-slide__label {
	margin-top: calc(var(--px)*8);
	font-family: var(--font-pretendard);
	font-size: var(--bodyL);
}

.store-slide__value {
	margin-top: calc(var(--px)*11);
	font-size: var(--titleS);
}

/* IMG:AUTO con05 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con05__emblem-logo {
    width: calc(var(--px)*164);
    aspect-ratio: 164 / 74;
}

.con05__glyph-comma {
    width: calc(var(--px)*22);
    aspect-ratio: 22 / 38;
}

.con05__hand {
    width: calc(var(--px)*777);
    aspect-ratio: 777 / 420;
}

.con05__cup {
    width: calc(var(--px)*577);
    aspect-ratio: 577 / 405;
}
/* /IMG:AUTO con05 END */

/* FONT:AUTO con05 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con05 {
    text-align: center;
}

.con05__title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--titleXL);
    font-weight: 900;
    letter-spacing: -0.0576em; /* OVR */
    line-height: 1.14;
    color: #ffffff;
}

.con05__title-accent {
    letter-spacing: -0.0443em; /* OVR */
    color: #fef3a2;
}

.con05__desc {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.46;
    color: #ffffff;
}

.con05__desc-strong {
    font-weight: 700;
}

.con05__badge {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--headM);
    font-weight: 800;
    letter-spacing: -0.0777em; /* OVR */
    line-height: 1.2;
    color: #2752ad;
}

.con05__caption {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 300;
    letter-spacing: -0.0633em; /* OVR */
    line-height: 1.67;
    color: #ffffff;
}
/* /FONT:AUTO con05 END */

@media (max-width: 599px) {
	.con05 {
		padding-bottom: 11.36vw;
	}

	/* 카드 배경 = CSS 재현(아치 생략) — 이미지 con05_02 는 HTML .pc 로 끈다 */
	.con05_box {
		width: 90vw;
		margin-top: 13.12vw;
		border-radius: 3.5vw;
		background: #2752ad;
		/* PC 는 카드 폭 1270 에 파랑 7px→노랑 3px 이라 「안쪽으로 들어온 선」으로 읽힌다 — 같은 비율(2px)로 줄이면 그냥 테두리가 돼서 여백 쪽을 키운다 */
		border: 1.6vw solid #2752ad;
		box-shadow: inset 0 0 0 1px #fef3a2;
	}

	.con05_box_iner {
		padding: 9vw 3vw 18vw;
	}

	.con05__emblem {
		gap: 2.24vw;
	}

	/* 엠블럼 락업 확대 — 점 크기·수직 위치도 로고 배율(26.24→34vw)만큼 같이 올린다 */
	.con05__emblem-dot {
		width: 1.62vw;
		margin-top: 9.8vw;
		padding-top: 1.62vw;
	}

	.con05__emblem-logo {
		width: 38vw;
	}

	.con05__title {
		margin-top: 6vw;
	}

	.con05__desc {
		margin-top: 2.56vw;
	}

	.con05__counter {
		margin-top: 6.24vw;
		padding-top: 8.1vw;
	}

	.con05__badge {
		width: auto;
		padding-block: 1.92vw;
		padding-inline: 4.5vw;
	}

	.con05__counter-row {
		gap: 1.2vw;
	}

	.con05__counter-group {
		gap: 1vw;
	}

	.con05__counter-cell {
		width: 8.4vw;
		padding-block: 2.93vw 3.22vw;
		border-radius: 0.95vw;
	}

	.con05__counter-digit {
		font-size: 8.05vw;
	}

	.con05__glyph-comma {
		width: 2.2vw;
		margin-bottom: 1.28vw;
		padding-left: 0.8vw;
	}

	.con05__caption {
		margin-top: 2.88vw;
	}

	/* 카드 안 텍스트를 비켜 오른쪽으로 밀되, 섹션 overflow 가 열려 있어 캔버스 밖으로 새는 만큼은 잘라낸다 */
	.con05__hand {
		width: 46vw;
		top: 4vw;
		right: -8vw;
		clip-path: inset(0 8vw 0 0);
	}

	/* 확대분(46→50vw)만큼 right·bottom 을 같이 줄여 가로 중심과 상단선을 고정한다 — 안 그러면 위로 자라 캡션을 덮는다 */
	.con05__cup {
		width: 50vw;
		right: 22.2vw;
		bottom: 29.85vw;
	}

	.con05__slides {
		margin-top: 16vw; /* 컵 받침과 슬라이드 첫 줄 사이 여유 — 카드 박스만 살짝 겹치고 글자는 안 덮게 */
	}


	.store-slide.swiper-slide {
		width: 68vw;
		margin-right: 3.2vw;
		padding: 5.76vw 3.2vw 5.12vw;
	}

	.store-slide__label {
		margin-top: 1.28vw;
	}

	.store-slide__value {
		margin-top: 1.76vw;
	}
}

/* /merge-build:con05 */
/* merge-build:con06 */
.con06 {
  background: #fff;
}

.con06_iner {
  padding-block: calc(var(--px)*66);
}

.con06__band {
  width: calc(var(--px)*1800);
  padding: calc(var(--px)*43) calc(var(--px)*39) calc(var(--px)*45) calc(var(--px)*43);
  border-radius: calc(var(--px)*50);
  background: #fef3a2;
}

.con06__stat {
  left: calc(var(--px)*36);
  top: calc(var(--px)*38);
  width: calc(var(--px)*225);
  padding-block: calc(var(--px)*47) calc(var(--px)*31);
  gap: calc(var(--px)*40);
  border-radius: calc(var(--px)*22);
  background: #fff;
}

.con06__stat-item {
  gap: calc(var(--px)*26);
}

.con06__stat-label {
  margin-block: calc(var(--px)*-26) calc(var(--px)*-27); /* line-box 75.11 − 잉크 23 흡수 — gap 26/40 이 잉크 간격 그대로 착지 */
}

.con06__stat-profit,
.con06__stat-margin {
  margin-top: calc(var(--px)*-14);
}

.con06__stat-line {
  width: calc(var(--px)*154);
  height: 1px;
  margin-top: calc(var(--px)*-19);
  background: #dcdcdc;
}

.con06__intro {
  left: 0;
  right: 0;
  top: calc(var(--px)*193);
  width: max-content;
  margin-inline: auto;
  gap: calc(var(--px)*32);
}

.con06__desc {
  margin-top: calc(var(--px)*-14); /* gap 32 는 잉크 간격 — title 아랫 leading + desc 윗 leading 흡수 */
}

.con06__panel {
  width: calc(var(--px)*549);
  padding: calc(var(--px)*18) calc(var(--px)*25) calc(var(--px)*33) calc(var(--px)*28); /* 상하 38 − caption/note line-box 의 half-leading */
  border-radius: calc(var(--px)*30);
  background: #fff;
}

/* 관리자가 켜는 표 가림 — 무슨 표인지는 남기고 수치만 덮는다(캡션·주석은 그대로) */
.con06__panel--blur .con06__table-head,
.con06__panel--blur .con06__table-body,
.con06__panel--blur .con06__table-total {
  filter: blur(calc(var(--px)*7));
  user-select: none;
  pointer-events: none;
}

/* 가린 동안만 뜨는 상담 유도 — 뷰포트가 아니라 런타임 상태 토글이라 display 를 여기서 다룬다 */
.con06__cta {
  display: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--px)*180);
  aspect-ratio: 1;
  background-color: #2752ad;
  border-radius: 50%;
  box-shadow: 0 0 0 5px #ffffff, 0 0 0 7px #2752ad; /* 흰 링을 두껍게 — 블러 위라 얇으면 원이 안 떨어져 보인다 */
  font-family: var(--font-nanumsquareneo);
  font-size: var(--bodyXL);
  font-weight: 800;
  line-height: 1.333;
  text-align: center;
  color: #ffffff;
  transition: background-color .25s ease-out, color .25s ease-out;
}

.con06__panel--blur .con06__cta { display: flex; }

@media (hover: hover) and (pointer: fine) {
  .con06__cta:hover {
    background-color: #ffffff;
    color: #2752ad;
  }
}

.con06__table-caption {
  padding-right: calc(var(--px)*33);
}

.con06__table-head {
  margin: calc(var(--px)*-13) calc(var(--px)*25) 0 calc(var(--px)*24); /* caption line-box 55.36 − 잉크 15 를 흡수 */
  padding-block: calc(var(--px)*2);
  background: #f8f7ef;
}

.con06__table-body {
  margin: calc(var(--px)*13) calc(var(--px)*25) 0 calc(var(--px)*24);
}

.con06__table-total {
  margin-top: calc(var(--px)*13);
  padding: calc(var(--px)*10) calc(var(--px)*25) calc(var(--px)*10) calc(var(--px)*24);
  background: #5e3f24;
}

.con06__table-note {
  margin-top: calc(var(--px)*9);
}

.con06__th-item,
.con06__table-item,
.con06__total-label {
  width: calc(var(--px)*125);
}

.con06__th-amount {
  width: calc(var(--px)*213);
}

.con06__table-amount,
.con06__total-amount {
  width: calc(var(--px)*213);
  padding-right: calc(var(--px)*54);
}

.con06__th-rate,
.con06__table-rate,
.con06__total-rate {
  width: calc(var(--px)*109);
}

/* IMG:AUTO con06 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con06__visual-media {
    width: calc(var(--px)*549);
    aspect-ratio: 549 / 572;
}

.con06__intro-label {
    width: calc(var(--px)*246);
    aspect-ratio: 246 / 52;
}
/* /IMG:AUTO con06 END */

/* FONT:AUTO con06 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con06__stat {
    font-family: var(--font-nanumsquareneo);
    text-align: center;
    color: #000000;
}

.con06__stat-label {
    font-size: var(--subheadM);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 3.13;
}

.con06__stat-profit,
.con06__stat-margin {
    font-size: var(--headL);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 2.04;
}

.con06__stat-profit-num,
.con06__stat-margin-num {
    font-size: var(--titleM);
    letter-spacing: -0.05em;
    line-height: 1.46;
    color: #5e3f24;
}

.con06__intro {
    text-align: center;
    color: #0f0f0f;
}

.con06__title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--titleXL);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.05;
}

.con06__title-strong {
    color: #5e3f24;
}

.con06__desc {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.46;
}

.con06__desc-strong {
    font-weight: 700;
}

.con06__table-caption {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 3.46;
    text-align: right;
    color: #000000;
}

.con06__table-head {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 2.77;
    text-align: center;
    color: #000000;
}

.con06__table-body {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 2.4;
    color: #000000;
}

.con06__table-item,
.con06__table-rate {
    text-align: center;
}

.con06__table-amount {
    text-align: right;
}

.con06__table-total {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--headM);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 2.13;
}

.con06__total-label {
    text-align: center;
    color: #ffffff;
}

.con06__total-amount {
    text-align: right;
    color: #ffffff;
}

.con06__total-rate {
    text-align: center;
    color: #fef3a2;
}

.con06__table-note {
    font-family: var(--font-suit);
    font-size: var(--bodyS);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1.5;
    color: #000000;
}
/* /FONT:AUTO con06 END */

@media (max-width:599px) {
  .con06 {
    background: #fef3a2;
  }

  /* --px 가 모바일에서 0.197 로 무너져 PC 7px 가림이 1.4px 로 떨어진다 — 글자가 그대로 읽혔다 */
  .con06__panel--blur .con06__table-head,
  .con06__panel--blur .con06__table-body,
  .con06__panel--blur .con06__table-total {
    filter: blur(1.6vw);
  }

  .con06__cta {
    width: 32vw;
  }

  .con06_iner {
    padding-block: 10.56vw;
  }

  .con06__band {
    flex-direction: column;
    width: 100%;
    padding-block: 0;
    padding-inline: 5vw;
    border-radius: 0;
    background: none;
    gap: 6.4vw;
  }

  .con06__visual-media {
    width: 90vw;
  }

  .con06__intro-label {
    width: 34.5265vw;
  }

  .con06__stat {
    left: 5.8889vw;
    top: 6.2222vw;
    width: 36.8889vw;
    padding-block: 7.52vw 4.96vw;
    gap: 6.4vw;
    border-radius: 3.52vw;
  }

  .con06__stat-item {
    gap: 4.16vw;
  }

  .con06__stat-label {
    margin-block: -4.16vw -4.32vw;
  }

  .con06__stat-profit,
  .con06__stat-margin {
    margin-top: -2.24vw;
  }

  .con06__stat-line {
    width: 25.2484vw;
    margin-top: -3.04vw;
  }

  .con06__intro {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    gap: 5.12vw;
    order: -1;
  }

  .con06__desc {
    margin-top: -2.24vw;
  }

  .con06__panel {
    width: 90vw;
    padding: 2.88vw 4vw 5.28vw 4.48vw;
    border-radius: 4.8vw;
  }

  .con06__table-caption {
    padding-right: 5.28vw;
  }

  .con06__table-head {
    margin: -2.08vw 4vw 0 3.84vw;
    padding-block: 0.32vw;
  }

  .con06__table-body {
    margin: 2.08vw 4vw 0 3.84vw;
  }

  .con06__table-total {
    margin-top: 2.08vw;
    padding: 1.6vw 4vw 1.6vw 3.84vw;
  }

  .con06__table-note {
    margin-top: 1.44vw;
  }

  .con06__th-item,
  .con06__table-item,
  .con06__total-label {
    width: 27.96%;
  }

  .con06__th-amount {
    width: 47.65%;
  }

  .con06__table-amount,
  .con06__total-amount {
    width: 47.65%;
    padding-right: 2vw;
  }

  .con06__th-rate,
  .con06__table-rate,
  .con06__total-rate {
    width: 24.38%;
  }
}

/* /merge-build:con06 */
/* merge-build:con07 */
.con07 {
    background: #2651ad;
}

.con07__track {
    width: max-content;
}

.con07__intro {
    flex-shrink: 0;
    width: calc(var(--px)*1905);
    padding-block: calc(var(--px)*322) calc(var(--px)*360.5625);
}

.con07__wordmark {
    top: calc(var(--px)*288); /* Independent overlap anchor; parent padding owns the copy flow. */
    pointer-events: none;
}

.con07__copy {
    gap: calc(var(--px)*15);
}

.con07__stores {
    flex-shrink: 0;
    margin-top: calc(var(--px)*171);
    gap: calc(var(--px)*44);
    padding-inline: calc(var(--px)*16);
}

.con07__store {
    flex-shrink: 0;
    padding-block: calc(var(--px)*11.821); /* Reserve the measured rotated card bounds. */
}

/* 카드 수가 게시판 등록물에 따라 변한다 — 시안에서 나온 값만으로 되풀이를 늦춘다.
   기울기는 3주기(--r1~r3), 세로 오프셋은 4주기(--s1~s4)라 조합이 12장까지 안 겹친다.
   s1 만 오프셋 없음이 정상이라 선언이 없다 — 지우거나 채우지 않는다 */
.con07__store--s2 {
    margin-top: calc(var(--px)*21);
}

.con07__store--s3 {
    padding-block: calc(var(--px)*7.96);
}

/* s4 는 시안 값 두 개를 겹친 조합 — 비워 두면 s1 과 같아져 4주기가 3가지로 주그러든다(실측: 4번째 카드가 1번째와 동일) */
.con07__store--s4 {
    margin-top: calc(var(--px)*21);
    padding-block: calc(var(--px)*7.96);
}

.con07__card {
    padding: calc(var(--px)*40) calc(var(--px)*44);
    background: #f4f4f4;
    border: 1px solid #dddddd;
    box-shadow: 0 0 0 rgb(0 0 0 / 0);
    transition: translate .25s ease-out, box-shadow .25s ease-out;
}

@media (hover: hover) and (pointer: fine) {
    .con07__card:hover {
        translate: 0 -8%; /* 카드에 rotate 가 걸려 transform 으로 주면 회전 좌표계에서 밀린다 */
        box-shadow: 0 8px 24px rgb(0 0 0 / .18);
    }
}

.con07__card--r1 {
    rotate: -3deg;
}

.con07__card--r2 {
    rotate: 3deg;
}

.con07__card--r3 {
    rotate: -2deg;
}

.con07__caption {
    margin-top: calc(var(--px)*30);
    gap: calc(var(--px)*12);
}

.con07__date {
    padding: calc(var(--px)*4) calc(var(--px)*12);
    background: #2752ad;
    border-radius: calc(var(--px)*16);
}

/* IMG:AUTO con07 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con07__wordmark {
    width: calc(var(--px)*972);
    aspect-ratio: 972 / 328;
}

.con07__store-image {
    width: calc(var(--px)*375);
    aspect-ratio: 375 / 315;
}
/* /IMG:AUTO con07 END */

/* FONT:AUTO con07 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con07 {
    text-align: center;
}

.con07__title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--titleXL);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.23;
}

.con07__title-line,
.con07__title-ending {
    color: #ffffff;
}

.con07__title-highlight {
    color: #fef3a2;
}

.con07__description {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    letter-spacing: -0.05em;
    line-height: 1.46;
    color: #ffffff;
}

.con07__description-line,
.con07__description-ending {
    font-weight: 300;
}

.con07__description-highlight {
    font-weight: 700;
}

.con07__date {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 1.2;  /* OVR psd:4.17 */
    color: #ffffff;
}

.con07__store-name {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--headL);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.3;  /* OVR psd:2.04 */
    color: #000000;
}
/* /FONT:AUTO con07 END */

@media (max-width: 599px) {
    .con07__track {
        flex-direction: column;
        align-items: stretch; /* column 전환으로 items-start 가 가로축이 돼 swiper 폭이 shrink-to-fit 로 폭주한다 */
        width: auto;
    }

    .con07__intro {
        width: auto;
        padding-block: 20vw 10vw;
    }

    .con07__wordmark {
        top: 17.5vw;
        width: 92vw;
    }

    .con07__copy {
        gap: 2.4vw;
        padding-inline: 6.4vw;
    }

    .con07__slider {
        width: 100%; /* swiper 기본 margin-inline:auto 가 flex item 의 stretch 를 막아 shrink-to-fit 으로 폭이 폭주한다 */
        margin-bottom: 18vw;
    }

    .con07__slide {
        padding-block: 2.4vw; /* 회전 카드의 bbox 가 슬라이드보다 커서 swiper 의 overflow:hidden 에 위아래가 잘린다 */
    }

    .con07__card {
        padding: 6.4vw 7.04vw;
    }

    .con07__store-image {
        width: 68vw;
    }

    .con07__caption {
        margin-top: 4.8vw;
        gap: 1.92vw;
    }

    .con07__date {
        padding: 0.64vw 1.92vw;
        border-radius: 2.56vw;
    }
}

/* /merge-build:con07 */
/* merge-build:con08 */
.con08_iner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: calc(var(--px)*128);
}

.con08__title {
    margin-top: calc(var(--px)*24);
}

.con08__desc {
    margin-top: calc(var(--px)*13);
}

/* 카드 폭에 프레임을 맞추고 화살표는 좌우로 빼낸다 — 모바일은 화살표를 카드 아래 행으로 */
.con08__player {
    width: calc(var(--px)*859);
    margin-top: calc(var(--px)*37);
}

.con08__slider {
    width: 100%;
}

.con08__facade {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: calc(var(--px)*30);
    overflow: hidden;
    background: #2752ad;
    cursor: pointer;
}

/* 네이티브 커서 숨김은 JS 가 클래스로 건다 — CSS 에 박으면 스크립트가 죽었을 때 커서가 사라진다 */
.con08__facade.is-cursor-on {
    cursor: none;
}

/* 추종은 GSAP transform, 등장은 안쪽 dot 의 transition — 속성 소유권 분리 */
.con08__cursor {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    will-change: transform;
}

.con08__cursor-dot {
    position: relative;
    display: block;
    width: calc(var(--px)*48);
    aspect-ratio: 1;
    margin: calc(var(--px)*-24) 0 0 calc(var(--px)*-24);
    border-radius: 50%;
    background: #2752ad;
    box-shadow: 0 0 0 calc(var(--px)*2) #fef3a2;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .2s ease-out, transform .25s cubic-bezier(.34, 1.4, .64, 1);
}

.con08__cursor-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    width: calc(var(--px)*15);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: #fff;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.con08__facade.is-cursor-on .con08__cursor-dot {
    opacity: 1;
    transform: scale(1);
}

.con08__facade iframe {
    position: absolute;
    top: 0;
    left: 0;
}

/* .btn_arr(z-index:2) 동반 — swiper 가 .swiper{z-index:1} 로 스택 컨텍스트를 만들어 DOM 뒤 형제가 밑으로 깔린다 */
.con08__nav {
    display: flex;
    justify-content: center;
    width: calc(var(--px)*83);
    padding-block: calc(var(--px)*14);
    border: 0;
    border-radius: 50%;
    background: #2752ad;
    box-shadow: 0 0 0 calc(var(--px)*2) #fef3a2, 0 0 0 calc(var(--px)*8) #2752ad;
    transition: background-color .25s ease-out, box-shadow .25s ease-out;
}

@media (hover: hover) and (pointer: fine) {
    .con08__nav:hover {
        background-color: color-mix(in srgb, #2752ad 85%, white);
        box-shadow: 0 0 0 calc(var(--px)*3) #fef3a2, 0 0 0 calc(var(--px)*8) #2752ad;
    }
}

.con08__nav:focus-visible {
    background-color: color-mix(in srgb, #2752ad 85%, white);
    box-shadow: 0 0 0 calc(var(--px)*3) #fef3a2, 0 0 0 calc(var(--px)*8) #2752ad;
}

.con08__nav--prev {
    left: calc(var(--px)*-118);
}

.con08__nav--next {
    right: calc(var(--px)*-113);
}

.con08__cup {
    right: calc(var(--px)*-69);
    bottom: calc(var(--px)*-33);
}

.con08__marquee {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: calc(var(--px)*114);
    background: #2752ad;
}

.con08__marquee-track {
    display: flex;
    flex-shrink: 0;
    margin-left: calc(var(--px)*-128);
}

.con08__marquee-tile {
    flex-shrink: 0;
}

/* IMG:AUTO con08 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con08__cup {
    width: calc(var(--px)*749);
    aspect-ratio: 749 / 493;
}

.con08__label {
    width: calc(var(--px)*144);
    aspect-ratio: 144 / 26;
}

.con08__facade-thumb {
    width: calc(var(--px)*858);
    aspect-ratio: 858 / 475;
}

.con08__nav-icon {
    width: calc(var(--px)*23);
    aspect-ratio: 23 / 20;
}

.con08__marquee-tile {
    width: calc(var(--px)*1101);
    aspect-ratio: 1101 / 80;
}
/* /IMG:AUTO con08 END */

/* FONT:AUTO con08 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con08 {
    text-align: center;
}

.con08__title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--titleXL);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.14;
    color: #0f0f0f;
}

.con08__title-accent {
    color: #2752ad;
}

.con08__desc {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.46;
    color: #00000f;
}

.con08__desc-em {
    font-weight: 700;
}
/* /FONT:AUTO con08 END */

@media (max-width: 599px) {
  .con08_iner {
    padding-top: 14.9333vw;
  }

  .con08__label {
    width: 23.04vw;
  }

  .con08__title {
    margin-top: 3.84vw;
  }

  .con08__desc {
    margin-top: 2.08vw;
  }

  /* 화살표를 카드 아래 한 행으로 흘린다 — slider 가 width:100% 라 줄을 통째 먹는다 */
  .con08__player {
    flex-wrap: wrap;
    width: 90vw;
    margin-top: 5.92vw;
    row-gap: 6vw;
    column-gap: 4vw;
  }

  .con08__facade {
    border-radius: 4.8vw;
  }

  /* PC 는 858px 고정 폭이라 모바일에선 카드(90vw)를 못 채운다 — 래퍼 폭만 덮고 aspect-ratio 는 유지 */
  .con08__facade-thumb {
    width: 100%;
  }

  .con08__nav {
    position: relative;
    width: 13.28vw;
    padding-block: 2.24vw;
    box-shadow: 0 0 0 0.32vw #fef3a2, 0 0 0 1.28vw #2752ad;
  }

  .con08__nav:focus-visible {
    box-shadow: 0 0 0 0.48vw #fef3a2, 0 0 0 1.28vw #2752ad;
  }

  .con08__nav--prev {
    left: auto;
  }

  .con08__nav--next {
    right: auto;
  }

  .con08__nav-icon {
    width: 3.68vw;
  }

  /* 가로 잘림·세로 마퀴 가림을 PC 비율(9.2% · 22.9%)에 맞춘다 — 기본 환산값은 둘 다 2배 넘게 먹었다 */
  .con08__cup {
    width: 48vw;
    right: -4.42vw;
    bottom: 5.6vw;
  }

  .con08__marquee {
    margin-top: 18.24vw;
  }

  .con08__marquee-track {
    margin-left: -20.48vw;
  }

  .con08__marquee-tile {
    width: 176.16vw;
  }
}

/* /merge-build:con08 */
/* merge-build:con09 */
.con09 {
  background: #f6f5ec;
}

.con09__head {
  margin-top: calc(var(--px)*139);
}

.con09__desc {
  margin-top: calc(var(--px)*10);
}

/* 모바일: stage 의 absol 3층(photo/divider/cards)을 해제해 photo → cards column 으로 접는다 */
.con09__stage {
  width: 100%;
  margin-top: calc(var(--px)*52);
}

.con09__photo {
  overflow: hidden;
  border-radius: calc(var(--px)*30);
  background: #f1f1f1;
}

.con09__divider {
  top: calc(var(--px)*332);
  bottom: calc(var(--px)*-77);
  left: calc(var(--px)*952);
  width: calc(var(--px)*1);
  background: #5e3f24;
}

.con09__cards {
  top: calc(var(--px)*65);
  right: calc(var(--px)*52);
  left: calc(var(--px)*52);
}

.con09__card {
  width: calc(var(--px)*460);
  padding-inline: calc(var(--px)*20);
  border-radius: calc(var(--px)*30);
  background-color: #5e3e25;
  background-image: repeating-linear-gradient(135deg, #5e3e25 0 calc(var(--px)*5.657), #614128 calc(var(--px)*5.657) calc(var(--px)*6.364), #65452c calc(var(--px)*6.364) calc(var(--px)*7.071), #66462d calc(var(--px)*7.071) calc(var(--px)*7.778), #64442b calc(var(--px)*7.778) calc(var(--px)*8.485), #604027 calc(var(--px)*8.485) calc(var(--px)*9.192), #5e3e25 calc(var(--px)*9.192) calc(var(--px)*10.607));
}

.con09__card-title {
  margin-top: calc(var(--px)*90);
}

.con09__card-body {
  margin-top: calc(var(--px)*22);
  margin-bottom: calc(var(--px)*89);
  gap: calc(var(--px)*30);
}

.con09__card-badge {
  bottom: calc(var(--px)*-33);
  width: calc(var(--px)*220);
  padding-block: calc(var(--px)*13);
  border-radius: 50vw;
  background: #fef3a2;
  box-shadow: 0 calc(var(--px)*6) calc(var(--px)*24) rgba(0, 0, 0, .17);
  white-space: nowrap;
}

.con09__note {
  margin-top: calc(var(--px)*99);
  margin-bottom: calc(var(--px)*108);
}

.con09__note-mark {
  --mark-w: 100%;
  background: linear-gradient(#fef3a2, #fef3a2) no-repeat left bottom / var(--mark-w, 100%) calc(var(--px)*19);
}

/* IMG:AUTO con09 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con09__photo {
    width: calc(var(--px)*1053);
    aspect-ratio: 1053 / 389;
}
/* /IMG:AUTO con09 END */

/* FONT:AUTO con09 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con09 {
    text-align: center;
}

.con09__head {
    color: #0f0f0f;
}

.con09__title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--titleXL);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.23;
}

.con09__title-accent,
.con09__note-mark {
    color: #5e3f24;
}

.con09__desc {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.46;
}

.con09__desc-strong {
    font-weight: 700;
}

.con09__card-title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--subheadL);
    font-weight: 800;
    letter-spacing: -0.07em;
    line-height: 1.36;
    color: #ffffff;
}

.con09__card-title-accent {
    color: #fef3a2;
}

.con09__card-body {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 300;
    letter-spacing: -0.07em;
    line-height: 1.5;
    color: #ffffff;
}

.con09__card-badge {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--headM);
    font-weight: 900;
    letter-spacing: -0.07em;
    line-height: 1.52;
    color: #5e3f24;
}

.con09__note {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--headL);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.33;
    color: #0f0f0f;
}
/* /FONT:AUTO con09 END */

@media (max-width: 599px) {
  .con09_iner {
    padding-inline: 6vw;
  }

  /* 기본 환산은 PC px 을 그대로 옮겨 상단 여백 비중이 7.3% → 22% 가 된다 — 대역 직행 56px (R69) */
  .con09__head {
    margin-top: 14.9333vw;
  }

  .con09__desc {
    margin-top: 1.6vw;
  }

  .con09__stage {
    flex-direction: column;
    align-items: center;
    margin-top: 8.32vw;
  }

  /* 원본비 2.707 이면 88vw 에서 122px 로 납작하다 — cover 로 좌우 여백 9% 만 먹고 높이를 키운다 */
  .con09__photo {
    width: 88vw;
    aspect-ratio: 11 / 5;
    border-radius: 4.8vw;
  }

  /* 전역 img{height:auto} 라 래퍼만 키우면 cover 가 안 걸리고 아래에 배경색 띠가 남는다 */
  .con09__photo img {
    height: 100%;
  }

  .con09__cards {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    flex-direction: column;
    align-items: center;
    gap: 12vw;
    /* 카드 사이 시각 간격(gap 45px − 배지 돌출 19.8px ≈ 25px)에 맞춘 스텝 24px */
    margin-top: 6.4vw;
  }

  .con09__card {
    width: 88vw;
    padding-inline: 3.2vw;
    border-radius: 4.8vw;
    background-image: repeating-linear-gradient(135deg, #5e3e25 0 0.9051vw, #614128 0.9051vw 1.0182vw, #65452c 1.0182vw 1.1314vw, #66462d 1.1314vw 1.2445vw, #64442b 1.2445vw 1.3576vw, #604027 1.3576vw 1.4707vw, #5e3e25 1.4707vw 1.6971vw);
  }

  .con09__card-title {
    margin-top: 14.4vw;
  }

  .con09__card-body {
    margin-top: 3.52vw;
    margin-bottom: 14.24vw;
    gap: 4.8vw;
  }

  .con09__card-badge {
    bottom: -5.28vw;
    width: 35.2vw;
    padding-block: 2.08vw;
  }

  .con09__note {
    margin-top: 15.84vw;
    margin-bottom: 12.8vw;
  }

  .con09__note-mark {
    background-size: var(--mark-w, 100%) 3.04vw;
  }
}

/* /merge-build:con09 */
/* merge-build:con10 */
/* con10 — 좌측 카피 + 우측 사진 스택(absol) + 하단 원두 카드 슬라이드
   모바일 전환 의도: .con10__visual 을 흐름으로 되돌려 카피 아래에 놓고, 카드는 폭 100% 1장 */

/* 모눈 배경 — 세로 15 / 가로 22.5 간격 1px 선(시안 실측). 이미지가 아닌 패턴이라 CSS 소유 */
.con10 {
  background-color: #fff;
  background-image:
    repeating-linear-gradient(90deg, #f2f2f2 0 1px, transparent 1px calc(var(--px) * 15)),
    repeating-linear-gradient(0deg, #f4f4f4 0 1px, transparent 1px calc(var(--px) * 22.5));
  background-position: calc(var(--px) * 2) calc(var(--px) * 4);
}

.con10_iner {
  padding-left: calc(var(--px) * 232);
  padding-bottom: calc(var(--px) * 105);
}

.con10__intro {
  margin-top: calc(var(--px) * 240);
}

.con10__desc {
  gap: calc(var(--px) * 32);
  margin-top: calc(var(--px) * 24);
  margin-left: calc(var(--px) * -2);
}

/* 사진 스택 — 카드 판과 겹치므로 흐름에서 뺀다 */
/* overflow: 말린 뒷면이 photo 밖으로 나가므로 자르는 책임이 여기로 올라왔다 — 없으면 peel 최대에서 캔버스를 102px 넘겨 가로 스크롤이 생긴다 */
.con10__visual {
  overflow: hidden;
  top: calc(var(--px) * 101);
  right: calc(var(--px) * 230);
  width: calc(var(--px) * 650);
}

.con10__photo {
  overflow: hidden;
  margin-top: calc(var(--px) * 36);
  width: calc(var(--px) * 650);
  height: calc(var(--px) * 730); /* HEIGHT: 겹쳐 쌓인 사진 2장이 전부 absol 이라 흐름 자식이 높이를 못 만든다 */
}

.con10__photo-bean {
  left: calc(var(--px) * -9);
  bottom: calc(var(--px) * -2);
}

.con10__photo-pouch {
  left: calc(var(--px) * 126);
  top: calc(var(--px) * -46);
  touch-action: pan-y; /* 가로 드래그는 봉투가 먹고 세로 스크롤은 페이지에 넘긴다 */
  cursor: grab;
  user-select: none; /* 끄는 동안 사진이 선택 반전되는 것 방지 */
}

/* 네이티브 이미지 드래그가 뜨면 pointermove 가 끊겨 들추다 만다 */
.con10__photo-pouch img { -webkit-user-drag: none; }

.con10__photo-pouch:active { cursor: grabbing; }

/* peel 2겹은 부모가 서로 다르다 — main 은 photo 안(잘려야 함), flap 은 photo 밖(클립을 덮어야 함). --peel·--tilt 는 양쪽에 같이 걸린다 */
.con10__pouch-peel,
.con10__flap-inner {
  --tilt: -12deg; /* 음수 = 접힘선이 \ 방향(상단이 덜 걷힘) — 라이브러리 기본 +10deg 는 반대로 기울어 클립 왼쪽이 비었다 */
  width: 100%;
  height: 100%;
}

/* pouch 좌표를 visual 기준으로 옮긴 값 — photo margin-top 36 + pouch top -46 = -10 */
.con10__pouch-flap {
  left: calc(var(--px) * 126);
  top: calc(var(--px) * -10);
  width: calc(var(--px) * 658);
  aspect-ratio: 658 / 823;
  pointer-events: none; /* --peel 0 이면 clip-path 로 안 보여도 히트영역은 남아 아래 pouch 의 드래그를 가로챈다 */
  /* 앞면은 photo 의 overflow 에 상하가 잘리는데 뒷면은 photo 밖이라 823 전체가 나온다 — 같은 경계를 여기서 준다 */
  /* 좌우는 안 자른다 — 접힌 뒷면은 photo 오른쪽 밖까지 넘어가는 게 정상이다 */
  clip-path: inset(calc(var(--px) * 46) 0 calc(var(--px) * 47) 0);
}

/* 라이브러리 기본 뒷면(brightness 1.3)은 이 사진의 하늘 부분이 균일한 밝은 회색이 돼 여백처럼 보인다 */
.con10__pouch-flap .peel-flap img {
  filter: grayscale(1) brightness(0.62) contrast(1.1);
}

/* 앞뒤 클립 경계가 같은 값인데도 반올림이 갈려 접힘선에 흰 실선이 뜬다 — 겹침 1px 은 앞면이 낸다 */
/* 뒷면에 주면 --peel 0 에서 잘려야 할 1px 이 남아 pouch 왼쪽 바깥에 어두운 세로선이 선다 */
.con10__pouch-peel .peel-main {
  clip-path: inset(0 0 0 calc(var(--fold) - 1px));
}

.con10__clip {
  top: 0;
  right: calc(var(--px) * 42);
}

.con10__slider {
  margin-top: calc(var(--px) * 103);
}

.con10__cards.swiper {
  width: calc(var(--px) * 880);
  height: calc(var(--px) * 344);
}

/* 행은 카드 루트가 아니라 안쪽 겹이 소유한다 — swiper-bundle 의 .swiper-slide{display:block} 이 뒤에 로드돼 루트의 display 를 덮는다 */
.con10__card-inner {
  gap: calc(var(--px) * 44);
  padding: calc(var(--px) * 46) calc(var(--px) * 49) calc(var(--px) * 44) calc(var(--px) * 53);
}

.con10__card--blend {
  background: #bbc6d8;
  --con10-line: #1e3050;
}

.con10__card--gayo {
  background: #ccbfae;
  --con10-line: #2c2825;
}

.con10__card--supremo {
  background: #b8c9d3;
  --con10-line: #182b38;
}

.con10__card--aricha {
  background: #d5ccb0;
  --con10-line: #3b3222;
}

.con10__card--decaf {
  background: #b3cec6;
  --con10-line: #1b3530;
}

.con10__card--shb {
  background: #ccbaac;
  --con10-line: #35251f;
}

.con10__card-body {
  flex: 1 1 0;
  min-width: 0;
}

.con10__card-head {
  margin-top: calc(var(--px) * 11);
}

.con10__card-line {
  height: 1px;
  margin-top: calc(var(--px) * 32);
  background: var(--con10-line);
}

.con10__card-desc-blend,
.con10__card-desc-gayo,
.con10__card-desc-supremo,
.con10__card-desc-aricha,
.con10__card-desc-decaf,
.con10__card-desc-shb {
  margin-top: calc(var(--px) * 59);
}

/* 값은 전부 링 바깥선 기준이다 — 옛 CSS 버튼은 box-shadow 8px 가 border-box 밖으로 나가 gap 28·padding 10 이 필요했다 */
.con10__nav {
  gap: calc(var(--px) * 12);
  margin-top: calc(var(--px) * 16);
  padding-right: calc(var(--px) * 2);
}

/* 타원·이중 링·화살표가 한 자산이다 — 버튼은 껍데기만 남긴다 */
.con10__nav-btn {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* span 은 inline 이라 IMG:AUTO 의 width 가 안 먹는다 */
.con10__nav-face {
  display: block;
  transition: transform 0.25s ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .con10__nav-btn:hover .con10__nav-face {
    transform: scale(1.08);
  }
}

.con10__nav-btn:active .con10__nav-face {
  transform: scale(0.96);
  transition-duration: 0.15s;
}

/* IMG:AUTO con10 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con10__photo-bean {
    width: calc(var(--px)*710);
    aspect-ratio: 710 / 736;
}

.con10__photo-pouch {
    width: calc(var(--px)*658);
    aspect-ratio: 658 / 823;
}

.con10__clip {
    width: calc(var(--px)*36);
    aspect-ratio: 36 / 131;
}

.con10__thumb-blend {
    width: calc(var(--px)*155);
    aspect-ratio: 155 / 254;
}

.con10__name-blend {
    width: calc(var(--px)*279);
    aspect-ratio: 279 / 24;
}

.con10__thumb-gayo,
.con10__thumb-aricha,
.con10__thumb-shb {
    width: calc(var(--px)*156);
    aspect-ratio: 156 / 255;
}

.con10__name-gayo {
    width: calc(var(--px)*281);
    aspect-ratio: 281 / 24;
}

.con10__thumb-supremo {
    width: calc(var(--px)*154);
    aspect-ratio: 154 / 253;
}

.con10__name-supremo {
    width: calc(var(--px)*353);
    aspect-ratio: 353 / 24;
}

.con10__name-aricha {
    width: calc(var(--px)*335);
    aspect-ratio: 335 / 24;
}

.con10__thumb-decaf {
    width: calc(var(--px)*153);
    aspect-ratio: 153 / 250;
}

.con10__name-decaf {
    width: calc(var(--px)*298);
    aspect-ratio: 298 / 24;
}

.con10__name-shb {
    width: calc(var(--px)*264);
    aspect-ratio: 264 / 23;
}

.con10__nav-face {
    width: calc(var(--px)*99);
    aspect-ratio: 99 / 64;
}
/* /IMG:AUTO con10 END */

/* FONT:AUTO con10 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con10__intro {
    color: #0f0f0f;
}

.con10__title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--titleXL);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.14;
}

.con10__title-em {
    color: #2752ad;
}

.con10__desc {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.46;
}

.con10__desc-em,
.con10__card-em-blend,
.con10__card-em-gayo,
.con10__card-em-supremo,
.con10__card-em-aricha,
.con10__card-em-decaf,
.con10__card-em-shb {
    font-weight: 700;
}

.con10__cards-track {
    font-family: var(--font-pretendard);
    font-weight: 300;
}

.con10__card-kr-blend {
    font-size: var(--bodyXL);
    letter-spacing: -0.05em;
    line-height: 1.5;
    text-align: right;
    color: #1e3050;
}

.con10__card-desc-blend {
    font-size: var(--headS);
    letter-spacing: -0.05em;
    line-height: 1.46;
    color: #1e3050;
}

.con10__card-kr-gayo {
    font-size: var(--bodyXL);
    letter-spacing: -0.05em;
    line-height: 1.5;
    text-align: right;
    color: #2c2825;
}

.con10__card-desc-gayo {
    font-size: var(--headS);
    letter-spacing: -0.05em;
    line-height: 1.46;
    color: #2c2825;
}

.con10__card-kr-supremo {
    font-size: var(--bodyXL);
    letter-spacing: -0.05em;
    line-height: 1.5;
    text-align: right;
    color: #182b38;
}

.con10__card-desc-supremo {
    font-size: var(--headS);
    letter-spacing: -0.05em;
    line-height: 1.46;
    color: #182b38;
}

.con10__card-kr-aricha {
    font-size: var(--bodyXL);
    letter-spacing: -0.05em;
    line-height: 1.5;
    text-align: right;
    color: #3b3222;
}

.con10__card-desc-aricha {
    font-size: var(--headS);
    letter-spacing: -0.05em;
    line-height: 1.46;
    color: #3b3222;
}

.con10__card-kr-decaf {
    font-size: var(--bodyXL);
    letter-spacing: -0.05em;
    line-height: 1.5;
    text-align: right;
    color: #1b3530;
}

.con10__card-desc-decaf {
    font-size: var(--headS);
    letter-spacing: -0.05em;
    line-height: 1.46;
    color: #1b3530;
}

.con10__card-kr-shb {
    font-size: var(--bodyXL);
    letter-spacing: -0.05em;
    line-height: 1.5;
    text-align: right;
    color: #35251f;
}

.con10__card-desc-shb {
    font-size: var(--headS);
    letter-spacing: -0.05em;
    line-height: 1.46;
    color: #35251f;
}
/* /FONT:AUTO con10 END */

@media (max-width: 599px) {
  .con10_iner {
    align-items: center;
    padding-left: 6vw;
    padding-right: 6vw;
    padding-bottom: 17.0667vw;
  }

  /* PC 240px 은 우측 사진 스택 상단에 맞춘 값이라 흐름으로 접히는 모바일엔 근거가 없다 — con08·09 와 같은 56px (R69) */
  .con10__intro {
    margin-top: 14.9333vw;
  }

  .con10__desc {
    gap: 5.12vw;
    margin-top: 3.84vw;
    margin-left: 0;
  }

  /* PC 는 우측 열이라 카피와 나란했지만 모바일은 desc 바로 아래로 붙는다 — 흐름이 된 만큼 간격을 준다 */
  .con10__visual {
    position: relative;
    top: auto;
    right: auto;
    width: 88vw;
    margin-top: 6.4vw;
  }

  .con10__photo {
    width: 100%;
    height: 98.8308vw; /* HEIGHT: bean·pouch 가 전부 absol 이라 흐름 자식이 높이를 못 만든다 (PC 650:730 비율 유지) */
  }

  .con10__photo-bean {
    width: 96.1231vw;
    left: -1.2185vw;
    bottom: -0.2708vw;
  }

  .con10__photo-pouch {
    width: 89.0831vw;
    left: 17.0585vw;
    top: -6.2277vw;
  }

  .con10__clip {
    width: 5.76vw;
    right: 5.6862vw;
  }

  /* photo margin-top 은 모바일에서 재정의가 없어 calc(var(--px)*36)=1.8898vw 다 — 거기에 pouch top -6.2277vw 를 더한 값 */
  .con10__pouch-flap {
    left: 17.0585vw;
    top: -4.3379vw;
    width: 89.0831vw;
    /* pouch 높이 111.4159vw 중 photo(98.8308vw) 밖으로 나가는 위 6.2277 · 아래 6.3574 */
    clip-path: inset(6.2277vw 0 6.3574vw 0);
  }

  /* PC 103px 은 좌카피·우사진 2단 아래로 내려오는 간격이라, 1단으로 접히는 모바일엔 그만큼이 필요없다 */
  /* 풀블리드 — 부모가 align-items:center 라 100vw 는 _iner 좌우 패딩(6vw)만큼 균등하게 넘쳐 화면 끝에 닿는다 */
  .con10__slider {
    width: 100vw;
    margin-top: 10.6667vw;
  }

  .con10__cards.swiper {
    width: 100%;
    height: auto;
  }

  /* .swiper-slide{height:100%} 가 특이도 동률에서 나중 로드로 이겨 stretch 를 막았다 — 장마다 높이가 달랐던 원인 */
  .con10__card.swiper-slide {
    height: auto;
  }

  .con10__card-inner {
    flex-direction: column;
    align-items: center;
    gap: 7.04vw;
    padding: 7.36vw 7.84vw 7.04vw;
  }

  .con10__card-body {
    align-items: center;
  }

  .con10__card-head {
    flex-direction: column;
    align-items: center;
    margin-top: 1.76vw;
  }

  .con10__card-kr-blend,
  .con10__card-kr-gayo,
  .con10__card-kr-supremo,
  .con10__card-kr-aricha,
  .con10__card-kr-decaf,
  .con10__card-kr-shb {
    text-align: center;
  }

  .con10__card-line {
    width: 100%;
    margin-top: 5.12vw;
  }

  .con10__card-desc-blend,
  .con10__card-desc-gayo,
  .con10__card-desc-supremo,
  .con10__card-desc-aricha,
  .con10__card-desc-decaf,
  .con10__card-desc-shb {
    margin-top: 9.44vw;
  }

  .con10__thumb-blend,
  .con10__thumb-gayo,
  .con10__thumb-supremo,
  .con10__thumb-aricha,
  .con10__thumb-decaf,
  .con10__thumb-shb {
    width: 38vw;
  }

  .con10__name-blend {
    width: 44.64vw;
  }

  .con10__name-gayo {
    width: 44.96vw;
  }

  .con10__name-supremo {
    width: 56.48vw;
  }

  .con10__name-aricha {
    width: 53.6vw;
  }

  .con10__name-decaf {
    width: 47.68vw;
  }

  .con10__name-shb {
    width: 42.24vw;
  }

  .con10__nav {
    justify-content: center;
    gap: 4.48vw;
    margin-top: 3.84vw;
    padding-right: 0;
  }

  .con10__nav-face {
    width: 15.84vw;
  }
}

/* /merge-build:con10 */
/* merge-build:con11 */
.con11_iner {
    padding-bottom: calc(var(--px)*99);
}

.con11__band {
    width: 100%;
    background: #fef3a3;
}

/* 타일 로컬 993 이 화면 x0 에 오도록 — 자산이 원본 띠의 x228 부터 잘린 1주기라 위상을 되돌린다 */
.con11__band-track {
    flex-shrink: 0;
    margin-left: calc(var(--px)*-993);
}

.con11__band-tile {
    flex-shrink: 0;
}

/* 타이틀이 제품 아치 위에 겹치는데 h2 는 reading order 상 앞이라 DOM 순서로는 못 이긴다 */
.con11__title {
    z-index: 1;
    margin-top: calc(var(--px)*162);
}

/* 카테고리 2열 + 중앙 제품 — 모바일은 flex-direction:column 으로 제품 아래 4열 정렬 */
.con11__showcase {
    width: 100%;
    margin-top: calc(var(--px)*-61);
}

.con11__cats {
    flex: 1 1 0;
    margin-bottom: calc(var(--px)*332);
}

/* 바깥 여백은 첫/끝 항목이 든다 — flex-basis:0 인 열에 padding 을 주면 그만큼 열폭이 커져 중앙 제품이 밀린다 */
.con11__cats--start {
    gap: calc(var(--px)*139);
}

.con11__cats--end {
    gap: calc(var(--px)*129);
    justify-content: flex-end;
}

/* 아이콘 높이가 제각각이라 라벨 하단 정렬은 부모 items-end 가, 아이콘 간격은 각 항목의 gap 이 소유 */
.con11__cat {
    gap: calc(var(--px)*35);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    opacity: 0.2;
    transition: opacity .3s ease-out;
}

@media (hover: hover) and (pointer: fine) {
    .con11__cat:not(.is-active):hover {
        opacity: 0.5;
        transition-duration: .2s;
    }
}

.con11__cat.is-active {
    opacity: 1;
}

.con11__cat--milkbru {
    gap: calc(var(--px)*20);
    margin-left: calc(var(--px)*111);
}

.con11__cat--softicecream {
    gap: calc(var(--px)*29);
    margin-right: calc(var(--px)*100);
}

.con11__arch {
    top: calc(var(--px)*20);
    right: calc(var(--px)*-20);
    bottom: calc(var(--px)*-20);
    left: calc(var(--px)*20);
    border-radius: calc(var(--px)*314) calc(var(--px)*314) 0 0;
    background: #fef3a2;
}

/* 제품사진 4장 crossfade — 첫 장이 flow 로 높이를 소유하고 나머지는 그 위에 겹친다 */
.con11__photo img {
    opacity: 0;
    transform: scale(1.02);
    transition: opacity .35s ease-out, transform .35s ease-out;
}

.con11__photo img:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
}

.con11__photo img.is-active {
    opacity: 1;
    transform: none;
}

/* 안쪽 흰 1px 선 = 6px 안으로 들어간 inset 링 두 겹 */
.con11__panel {
    display: grid;
    width: calc(var(--px)*485);
    margin-top: calc(var(--px)*-122);
    padding: calc(var(--px)*44) calc(var(--px)*24) calc(var(--px)*45);
    background: #2752ad;
    box-shadow: inset 0 0 0 calc(var(--px)*6) #2752ad, inset 0 0 0 calc(var(--px)*7) #ffffff;
}

/* 4벌을 같은 셀에 겹쳐 높이는 최대값이 소유 — 교체해도 패널이 리플로우되지 않는다 */
.con11__panel-body {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity .35s ease-out;
}

.con11__panel-body.is-active {
    opacity: 1;
}

/* 초점이 맞춰지듯 — 위치 이동이 없어 제품사진 crossfade 와 부딪히지 않는다 */
.con11__panel-body .con11__panel-title,
.con11__panel-body .con11__panel-desc {
    filter: blur(calc(var(--px)*6));
    transform: scale(1.04);
    transition: filter .35s ease-out, transform .35s ease-out;
}

/* 제목이 먼저 잡히고 설명이 따라온다 */
.con11__panel-body .con11__panel-desc {
    transition-delay: .06s;
}

.con11__panel-body.is-active .con11__panel-title,
.con11__panel-body.is-active .con11__panel-desc {
    filter: none;
    transform: none;
}

.con11__panel-desc {
    margin-top: calc(var(--px)*16);
}

/* IMG:AUTO con11 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con11__band-tile {
    width: calc(var(--px)*1101);
    aspect-ratio: 1101 / 80;
}

.con11__title {
    width: calc(var(--px)*585);
    aspect-ratio: 585 / 174;
}

.con11__cat-icon--milkbru {
    width: calc(var(--px)*75);
    aspect-ratio: 75 / 123;
}

.con11__cat-label--milkbru {
    width: calc(var(--px)*102);
    aspect-ratio: 102 / 17;
}

.con11__cat-icon--tangerinebru {
    width: calc(var(--px)*76);
    aspect-ratio: 76 / 92;
}

.con11__cat-label--tangerinebru {
    width: calc(var(--px)*178);
    aspect-ratio: 178 / 17;
}

.con11__photo {
    width: calc(var(--px)*628);
    aspect-ratio: 628 / 720;
}

.con11__cat-icon--tiramisu {
    width: calc(var(--px)*106);
    aspect-ratio: 106 / 92;
}

.con11__cat-label--tiramisu {
    width: calc(var(--px)*108);
    aspect-ratio: 108 / 17;
}

.con11__cat-icon--softicecream {
    width: calc(var(--px)*60);
    aspect-ratio: 60 / 106;
}

.con11__cat-label--softicecream {
    width: calc(var(--px)*190);
    aspect-ratio: 190 / 17;
}
/* /IMG:AUTO con11 END */

/* FONT:AUTO con11 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con11 {
    text-align: center;
    color: #ffffff;
}

.con11__panel-title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--headM);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.15;
}

.con11__panel-desc {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.5;
}
/* /FONT:AUTO con11 END */

@media (max-width:599px) {
    .con11_iner {
        padding-bottom: 14vw;
    }

    .con11__band-track {
        margin-left: 0;
    }

    .con11__band-tile {
        width: 165.15vw;
    }

    .con11__title {
        width: 72vw;
        margin-top: 12vw;
    }

    .con11__showcase {
        flex-direction: column;
        align-items: center;
        margin-top: -7.5vw;
    }

    .con11__product {
        order: -1;
        width: 100%;
    }

    .con11__photo {
        width: 78vw;
    }

    .con11__arch {
        top: 3.2vw;
        right: -3.2vw;
        bottom: -3.2vw;
        left: 3.2vw;
        border-radius: 39vw 39vw 0 0;
    }

    .con11__panel {
        width: 86vw;
        margin-top: -15.1529vw;
        padding: 7.04vw 3.84vw 7.2vw;
        box-shadow: inset 0 0 0 4px #2752ad, inset 0 0 0 5px #ffffff;
    }

    .con11__panel-desc {
        margin-top: 2.56vw;
    }

    /* --px 를 그대로 두면 blur 가 1.2px 로 무너져 초점 효과가 안 보인다 */
    .con11__panel-body .con11__panel-title,
    .con11__panel-body .con11__panel-desc {
        filter: blur(1.6vw);
    }

    .con11__cats {
        flex: none;
        width: 100%;
        gap: 8vw;
        margin-bottom: 0;
    }

    .con11__cats--start {
        justify-content: center;
        margin-top: 10vw;
    }

    .con11__cats--end {
        justify-content: center;
        margin-top: 8vw;
    }

    .con11__cat {
        gap: 5.6vw;
        width: 40vw;
    }

    .con11__cat--milkbru {
        gap: 3.2vw;
        margin-left: 0;
    }

    .con11__cat--softicecream {
        gap: 4.64vw;
        margin-right: 0;
    }

    .con11__cat-icon--milkbru {
        width: 12vw;
    }

    .con11__cat-label--milkbru {
        width: 16.32vw;
    }

    .con11__cat-icon--tangerinebru {
        width: 12.16vw;
    }

    .con11__cat-label--tangerinebru {
        width: 28.48vw;
    }

    .con11__cat-icon--tiramisu {
        width: 16.96vw;
    }

    .con11__cat-label--tiramisu {
        width: 17.28vw;
    }

    .con11__cat-icon--softicecream {
        width: 9.6vw;
    }

    .con11__cat-label--softicecream {
        width: 30.4vw;
    }
}

/* /merge-build:con11 */
/* merge-build:con12 */
.con12 {
    padding-block: calc(var(--px)*119) calc(var(--px)*66);
    overflow: hidden;

    & .con12__heading { gap: calc(var(--px)*10); }
    & .con12__title { padding-right: calc(var(--px)*4); }
    & .con12__description { padding-right: calc(var(--px)*2); }
    & .con12__menu { width: calc(var(--px)*1562); margin-top: calc(var(--px)*51); }
    & .con12__tabs { border-radius: calc(var(--px)*30); overflow: hidden; }
    & .con12__tab-pattern {
        inset: 0;
        background: repeating-linear-gradient(90deg, transparent 0 calc(var(--px)*18), #ffffff66 calc(var(--px)*18) calc(var(--px)*19), transparent calc(var(--px)*19) calc(var(--px)*20));
    }
    & .con12__tab-list { gap: calc(var(--px)*110); padding-block: calc(var(--px)*33.5); }
    & .con12__tab { padding: 0; border: 0; background: transparent; letter-spacing: inherit; cursor: pointer; }
    & .con12__tab.is-active .con12__tab-label { background: #2752ad; color: #fef3a2; }
    & .con12__panel { margin-top: calc(var(--px)*15); padding: calc(var(--px)*71) calc(var(--px)*118) calc(var(--px)*57); border-radius: calc(var(--px)*30); background: #ffffff; }
    & .con12__panel:not(.is-active) { display: none; }
    & .con12__slider { width: 100%; }
    /* swiper-bundle 의 .swiper-slide{display:block} 이 뒤에 로드돼 유틸 .flex 를 덮는다 — 행 소유를 섹션 셀렉터로 올린다 */
    /* height:auto 는 .swiper-slide{height:100%} 를 걷어 flex stretch 를 되살린다 — 사진 없는 카드가 형제 높이를 따라간다 */
    & .con12__card { display: flex; flex-direction: column; height: auto; min-width: 0; border: 1px solid #dddddd; }
    & .con12__photo { overflow: hidden; }
    /* 업로드 사진의 원본 비율이 카드 프레임 높이를 바꾸지 않도록 분리한다. */
    & .con12__photo > img { inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
    /* 사진 박스와 같은 프레임 — flex:1 이면 사진 없는 카드끼리 모였을 때 기준 높이가 사라져 무너진다 */
    & .con12__empty-media { width: 100%; aspect-ratio: 433 / 314; }
    /* 메뉴명은 고객사가 직접 등록해 길이를 못 정한다 — 한 줄 넘으면 잘라 카드 높이를 지킨다 */
    /* 메뉴명은 고객사가 등록해 길이를 못 정한다 — 한 줄이 카드 높이의 계약이라 넘치면 잘라 … 로 준다 */
    & .con12__card-name { padding-block: calc(var(--px)*23); padding-inline: calc(var(--px)*20); border-top: 1px solid #dddddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* 등록 글이 없는 분류 — 높이는 카드 한 장(미디어 314 + 이름 78)을 그대로 잡아 탭 전환에 패널이 안 튄다 */
    & .con12__empty { min-height: calc(var(--px)*394); font-family: var(--font-pretendard); font-size: var(--subheadM); font-weight: 700; letter-spacing: -0.05em; color: #999999; }
    & .con12__navigation { gap: calc(var(--px)*13); margin-top: calc(var(--px)*26); }
    /* GSAP 은 .con12__nav 의 transform(등장 pop)을 소유한다 — hover/active 는 안쪽 겹의 transform 만 건드린다 */
    & .con12__nav { padding: 0; border: 0; background: transparent; transition: box-shadow .2s ease-out; }
    & .con12__nav-surface--prev,
    & .con12__nav-surface--next { transition: transform .25s ease-out; }
    & .con12__nav:focus-visible { outline: 0; box-shadow: 0 0 0 3px #2752ad; }
    & .con12__nav--prev:active .con12__nav-surface--prev,
    & .con12__nav--next:active .con12__nav-surface--next { transform: scale(.96); transition-duration: .15s; }
    /* 배지 여백은 활성 여부와 무관하게 늘 잡아둔다 — 활성일 때만 주면 전환마다 탭 폭이 바뀌어 줄이 밀린다 */
    & .con12__tab-label { padding-inline: calc(var(--px)*7.5); padding-block: max(0px, (calc(var(--px)*33) - 1lh)/2); transition: color .2s ease-out, background-color .2s ease-out; }

    @media (hover: hover) and (pointer: fine) {
        & .con12__nav--prev:hover .con12__nav-surface--prev,
        & .con12__nav--next:hover .con12__nav-surface--next { transform: scale(1.06); }
        & .con12__tab:not(.is-active):hover .con12__tab-label { color: #2752ad; }
    }
}

/* IMG:AUTO con12 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con12__photo {
    width: 100%;  /* OVR spec:calc(var(--px)*433) */
    aspect-ratio: 433 / 314;  /* OVR */
}

.con12__nav-surface--prev {
    width: calc(var(--px)*110);
    aspect-ratio: 110 / 74;
}

.con12__nav-arrow {
    width: calc(var(--px)*23);
    aspect-ratio: 23 / 20;
}

.con12__nav-surface--next {
    width: calc(var(--px)*110);
    aspect-ratio: 110 / 75;
}
/* /IMG:AUTO con12 END */

/* FONT:AUTO con12 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con12 {
    text-align: center;
}

.con12__title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--titleXL);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.2;
}

.con12__title-main {
    color: #ffffff;
}

.con12__title-accent,
.con12__tab-label--brewing {
    color: #fef3a2;
}

.con12__description {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    letter-spacing: -0.05em;
    line-height: 1.46;
    color: #ffffff;
}

.con12__description-intro,
.con12__description-end {
    font-weight: 300;
}

.con12__description-emphasis {
    font-weight: 700;
}

.con12__tab-list {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--headS);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.34;
}

.con12__tab-label {
    color: #0f0f0f;
}

.con12__cards {
    font-family: var(--font-pretendard);
    font-size: var(--subheadM);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.29;
    color: #000000;
}
/* /FONT:AUTO con12 END */

@media (max-width: 599px) {
    .con12 {
        padding-block: 15vw 8.3vw;
    }

    .con12_iner {
        padding-left: 6vw;
        padding-right: 6vw;
    }

    .con12 .con12__heading { gap: 1.6vw; }
    .con12 .con12__title { padding-right: 0.64vw; }
    .con12 .con12__description { padding-right: 0.32vw; }

    .con12 .con12__menu {
        width: 100%;
        margin-top: 8.16vw;
    }

    .con12 .con12__tabs { border-radius: 4.8vw; }

    .con12 .con12__tab-pattern {
        background: repeating-linear-gradient(90deg, transparent 0 2.88vw, #ffffff66 2.88vw 3.04vw, transparent 3.04vw 3.2vw);
    }

    .con12 .con12__tab-list {
        flex-wrap: wrap;
        gap: 2vw 8vw; /* 4탭(309.5px)이 컨테이너 330px 에 들어가버려 3+2 로 끊으려면 열 간격이 30px 이상이어야 한다 */
        padding-block: 3.2vw;
    }

    .con12 .con12__tab-label {
        padding-inline: 1.2vw;
        padding-block: max(0px, (5.28vw - 1lh)/2);
    }

    /* 좌우 패딩을 0 으로 — 패딩이 남으면 옆 카드가 그 안쪽에서 잘려 보인다(카드는 slidesPerView 로 노출) */
    .con12 .con12__panel {
        margin-top: 2.4vw;
        padding: 9vw 0 8vw;
        border-radius: 4.8vw;
    }

    .con12 .con12__card-name { padding-block: 3.68vw; }

    .con12 .con12__empty { min-height: 72vw; }

    .con12 .con12__navigation {
        gap: 2.08vw;
        margin-top: 4.16vw;
    }

    .con12 .con12__nav-surface--prev,
    .con12 .con12__nav-surface--next { width: 17.6vw; }

    .con12 .con12__nav-arrow { width: 3.68vw; }
}

/* /merge-build:con12 */
/* merge-build:con13 */
/* con13 — 매장 전경 풀블리드 1장(정적) + 모션 종료상태 DOM(파란 면·종이질감·축소 사진·카피) */
.con13 {
  background: #2752ad;
  padding-block: calc(var(--px)*4) calc(var(--px)*1);
}

/* 모션 종료상태 전용 — 초기 숨김. 표시·트윈은 js/sections/ani_con13.js 소유 */
.con13__paper,
.con13__caption {
  opacity: 0;
}

.con13__paper {
  left: 0;
  top: 0;
}

/* relative — 형제 .con13__paper 가 absolute 라 static 이면 종이질감 밑으로 깔린다 */
/* 모션에서 이 프레임이 520x656 으로 줄고 사진이 fill 0.30 로 어두워진다(검정면 노출) */
.con13__frame {
  overflow: hidden;
  background: #000;
}

.con13__photo {
  flex-shrink: 0;
}

.con13__caption {
  justify-content: center;
  align-items: center;
  gap: calc(var(--px)*30);
}

.con13__headline {
  width: fit-content;
  padding-block: calc(var(--px)*15.5);
  padding-inline: calc(var(--px)*20);
}

/* 형광펜 그어지듯 좌→우로 그려지는 층이라 타이틀과 별개 요소여야 한다 */
/* .con13__title 의 .relative — 형제 .con13__marker 가 absolute 라 static 이면 형광면 밑으로 깔린다 */
.con13__marker {
  inset: 0;
  background: #fef3a2;
  transform-origin: left center;
}

/* 모바일: 풀블리드 사진은 그대로, 카피 그룹만 폭·간격 축소 */

/* IMG:AUTO con13 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con13__paper,
.con13__photo {
    width: calc(var(--px)*1905);
    aspect-ratio: 1905 / 1000;
}

.con13__eng {
    width: calc(var(--px)*1050);
    aspect-ratio: 1050 / 75;
}
/* /IMG:AUTO con13 END */

/* FONT:AUTO con13 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con13__title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--displayM);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1;
    text-align: center;
    color: #2752ad;
}
/* /FONT:AUTO con13 END */

@media (max-width:599px) {
  /* PC 는 핀 스크롤이라 카피가 사진 위에 겹치지만 모바일은 핀이 없어 세로 흐름으로 푼다 */
  .con13__stage {
    flex-direction: column;
    gap: 0;
  }

  .con13__photo {
    width: 100vw;
    aspect-ratio: 4 / 3;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  }

  /* 코어 img 의 height:auto 를 덮어야 object-fit:cover 가 4:3 래퍼를 채운다 */
  .con13__photo img {
    height: 100%;
  }

  /* 마스크로 사진이 투명해진 자리에 PC 의 검정 면이 비친다 */
  .con13__frame {
    background: transparent;
  }

  /* 흐름으로 풀면 PC 의 풀커버 세로중앙이 주던 하단 여백이 사라져 카피가 섹션 바닥에 닿는다 */
  .con13__caption {
    position: static;
    width: 100%;
    height: auto;
    opacity: 1;
    gap: 4.8vw;
    padding-bottom: 12.8vw;
  }

  .con13__headline {
    padding-block: 2.48vw;
    padding-inline: 3.2vw;
  }

  .con13__title {
    font-size: var(--titleM);
  }

  .con13__eng {
    width: 72vw;
  }
}

/* /merge-build:con13 */
/* merge-build:con14 */
/* con14 — 인테리어 타입 2행(BASIC/PREMIUM). 모바일: 각 행을 column 으로 접고 슬라이더는 전폭 bleed */

.con14_iner {
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--px) * 53);
}

.con14__head {
  display: grid;
  grid-template-columns: calc(var(--px) * 518) calc(var(--px) * 318) 1fr;
  align-items: start;
  margin-top: calc(var(--px) * 182);
  padding-left: calc(var(--px) * 288);
}

.con14__head-line {
  height: 1px;
  margin-top: calc(var(--px) * 63);
  background: #dddddd;
}

.con14__head-desc {
  margin-top: calc(var(--px) * 17);
  padding-left: calc(var(--px) * 68);
}

.con14__row {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
}

.con14__row--basic {
  margin-top: calc(var(--px) * 171);
}

.con14__row--premium {
  margin-top: calc(var(--px) * 93);
}

/* 행 배경띠 — 사진이 위아래로 46 씩 넘치므로 행 높이는 슬라이더가 만들고 띠는 inset 으로만 잡는다.
   슬라이더(.swiper 가 z-index:1)와 패널(.relative)이 DOM 뒤라 띠 위로 올라온다 */
.con14__row-band {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--px) * 46);
  bottom: calc(var(--px) * 46);
  background: #e9edf6;
}

/* .swiper 계열 셀렉터를 겹쳐 쓴다 — swiper-bundle.min.css 가 섹션 CSS 보다 뒤에 실려 동점이면 번들이 이긴다 */
.con14__slider.swiper {
  flex-shrink: 0;
  width: calc(var(--px) * 1668);
  margin-inline: 0;
}

.con14__slider--basic.swiper {
  margin-left: calc(var(--px) * -616);
}

.con14__slides {
  gap: calc(var(--px) * 28);
}

.con14__slide.swiper-slide {
  width: calc(var(--px) * 820);
}

.con14__panel {
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--px) * 16);
}

.con14__panel--basic {
  flex: 1 1 auto;
  padding-left: calc(var(--px) * 161);
}

.con14__panel--premium {
  flex: 0 0 auto;
  align-items: flex-end;
  width: calc(var(--px) * 856);
  padding-right: calc(var(--px) * 162);
}

.con14__basic-title {
  margin-top: calc(var(--px) * 97);
}

.con14__premium-title {
  margin-top: calc(var(--px) * 105);
}

.con14__basic-desc {
  margin-top: calc(var(--px) * 21);
}

.con14__premium-desc {
  margin-top: calc(var(--px) * 21);
}

/* IMG:AUTO con14 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con14__slide-media {
    width: calc(var(--px)*820);
    aspect-ratio: 820 / 522;
}

.con14__basic-mark {
    width: calc(var(--px)*247);
    aspect-ratio: 247 / 60;
}

.con14__premium-mark {
    width: calc(var(--px)*382);
    aspect-ratio: 382 / 59;
}
/* /IMG:AUTO con14 END */

/* FONT:AUTO con14 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con14 {
    color: #0f0f0f;
}

.con14__head-title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--titleXL);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.23;
}

.con14__head-title-accent {
    color: #2752ad;
}

.con14__head-desc {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.46;
}

.con14__head-desc-strong,
.con14__basic-desc-strong,
.con14__premium-desc-strong {
    font-weight: 700;
}

.con14__basic-title,
.con14__premium-title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--subheadL);
    font-weight: 800;
    letter-spacing: -0.07em;
    line-height: 1.36;
}

.con14__basic-desc,
.con14__premium-desc {
    font-family: var(--font-suit);
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.07em;
    line-height: 1.5;
}

.con14__panel.con14__panel--premium {
    text-align: right;
}
/* /FONT:AUTO con14 END */

@media (max-width: 599px) {
  .con14_iner {
    padding-bottom: 12.8vw;
  }

  .con14__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 14.9333vw;
    padding-inline: 6.4vw;
  }

  .con14__head-line {
    width: 17.0667vw;
    margin-top: 10.6667vw;
  }

  .con14__head-desc {
    margin-top: 3.2vw;
    padding-left: 0;
  }

  .con14__row {
    flex-direction: column;
  }

  .con14__row--basic {
    margin-top: 12.8vw;
  }

  .con14__row--premium {
    margin-top: 0;
  }

  .con14__row-band {
    top: 47.6vw;
    bottom: 0;
  }

  .con14__slider.swiper {
    order: 1;
    width: 100%;
  }

  .con14__slider--basic.swiper {
    margin-left: 0;
  }

  .con14__slides {
    gap: 4.2667vw;
  }

  .con14__slide.swiper-slide {
    width: 82vw;
  }

  .con14__slide-media {
    width: 82vw;
  }

  .con14__panel {
    order: 2;
    align-items: center;
    padding-top: 8.5333vw;
    padding-bottom: 8.5333vw;
    padding-inline: 6.4vw;
  }

  .con14__panel.con14__panel--premium {
    width: auto;
    text-align: center;
  }

  .con14__basic-mark {
    width: 33vw;
  }

  .con14__premium-mark {
    width: 51vw;
  }

  .con14__basic-title,
  .con14__premium-title {
    margin-top: 6.4vw;
  }

  .con14__basic-desc,
  .con14__premium-desc {
    margin-top: 3.2vw;
  }
}

/* /merge-build:con14 */
/* merge-build:con15 */
.con15 {
    padding: calc(var(--px)*49) 0 calc(var(--px)*65);
    background-color: #fff;
}

/* 모바일: 패널 폭 100%, 본문 <br> 해제, CTA 폭 자동 */
.con15__panel {
    width: calc(var(--px)*1682);
}

.con15__panel-body {
    padding: calc(var(--px)*139) 0 calc(var(--px)*126);
}

.con15__desc {
    margin-top: calc(var(--px)*17);
}

.con15__cta {
    width: calc(var(--px)*310);
    margin-top: calc(var(--px)*44);
    padding-block: calc(var(--px)*26);
    border-radius: 50vw;
    background-color: #fef3a2;
    transition: transform .25s ease-out, background-color .25s ease-out, box-shadow .25s ease-out;
}

@media (hover: hover) and (pointer: fine) {
    .con15__cta:hover {
        transform: translateY(-8%);
        background-color: color-mix(in srgb, #fef3a2 88%, black);
        box-shadow: 0 6px 18px rgb(0 0 0 / .18);
    }
}

.con15__cta:focus-visible {
    transform: translateY(-8%);
    background-color: color-mix(in srgb, #fef3a2 88%, black);
    box-shadow: 0 6px 18px rgb(0 0 0 / .18);
}

/* FONT:AUTO con15 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con15 {
    text-align: center;
}

.con15__title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--titleM);
    font-weight: 800;
    letter-spacing: -0.0843em; /* OVR */
    line-height: 1.51;
    color: #ffffff;
}

.con15__title-accent {
    color: #fef3a2;
}

.con15__desc {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.46;
    color: #ffffff;
}

.con15__cta {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--subheadM);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.25;
    color: #2752ad;
}
/* /FONT:AUTO con15 END */

@media (max-width:599px) {
    .con15 {
        padding: 0;
    }

    .con15__panel {
        width: 88%;
        border-radius: 8.5333vw;
        overflow: hidden;
    }

    .con15__panel-body {
        padding: 14.9333vw 6.4vw 12.8vw;
    }

    .con15__desc {
        margin-top: 3.2vw;
    }

    .con15__cta {
        width: 49.6vw;
        margin-top: 6.4vw;
        padding-block: 4.2667vw;
    }
}

/* /merge-build:con15 */
/* merge-build:con16 */
/* 피드 = Swiper loop 스트립. 시안의 잘려나가는 6장 모양을 유지하며 전체를 돌린다 */
.con16 {
  background-color: #fff;

  .con16_iner {
    padding-top: calc(var(--px)*66);
    padding-bottom: calc(var(--px)*106);
    padding-right: calc(var(--px)*3);
  }

  .con16__lead {
    margin-top: calc(var(--px)*13);
  }

  /* 번들이 섹션 CSS 뒤에 실려 동점이면 지므로 .swiper 를 겹쳐 쓴다 — 폭이 트랙을 따라 커지면 centeredSlides 가 어긋난다 */
  .con16__feed.swiper {
    width: 100%;
    margin-top: calc(var(--px)*51);
  }

  /* 폭은 안쪽 래퍼가 소유한다 — 번들 .swiper-slide{width:100%} 를 겹친 셀렉터로 이긴다 */
  .con16__feed-slide.swiper-slide {
    width: auto;
    padding-right: calc(var(--px)*42); /* 슬라이드 간격 — margin 은 중앙정렬 게이트 축이라 padding 으로 낸다 */
  }

  /* 등록 건수가 가변이라 IMG:AUTO 가 못 내는 폭 — 시안 타일 317x411 을 손CSS 가 소유한다 */
  .con16__feed-item {
    display: block; /* 링크가 등록된 항목은 a 로 렌더된다 */
    width: calc(var(--px)*317);
    aspect-ratio: 317 / 411;
    overflow: hidden;
  }

  a.con16__feed-item:focus-visible {
    outline: calc(var(--px)*3) solid #2752ad;
    outline-offset: calc(var(--px)*3);
  }

  /* 등록 이미지가 타일보다 작아도 박스를 채운다 — 코어 img{height:auto} 를 덮는 자리 */
  .con16__feed-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* 타원·이중 링·화살표가 한 자산이다 — 버튼은 껍데기만 남긴다 */
  .con16__nav-btn {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: transform .15s ease-out;
  }

  /* 모바일 전용 화살표라 hover 없이 눌림만 */
  .con16__nav-btn:active {
    transform: scale(.92);
  }

  /* span 은 inline 이라 IMG:AUTO 의 width 가 안 먹는다 */
  .con16__nav-face {
    display: block;
  }

  .con16__cta {
    margin-top: calc(var(--px)*48);
    width: calc(var(--px)*310);
    padding-block: calc(var(--px)*26);
    border-radius: calc(var(--px)*41);
    background-color: #2752ad;
    transition: background-color .25s ease-out, transform .25s ease-out, box-shadow .2s ease-out;
  }

  @media (hover: hover) and (pointer: fine) {
    .con16__cta:hover {
      background-color: color-mix(in srgb, #2752ad 90%, black);
      transform: translateY(-6%);
    }
  }

  .con16__cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 calc(var(--px)*4) color-mix(in srgb, #2752ad 35%, white);
  }
}

/* IMG:AUTO con16 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con16__nav-face {
    width: calc(var(--px)*99);
    aspect-ratio: 99 / 64;
}
/* /IMG:AUTO con16 END */

/* FONT:AUTO con16 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con16 {
    text-align: center;
}

.con16__title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--titleXL);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.23;
    color: #000000;
}

.con16__title-accent {
    color: #2752ad;
}

.con16__lead {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.46;
    color: #000000;
}

.con16__lead-strong {
    font-weight: 700;
}

.con16__cta {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--subheadM);
    font-weight: 800;
    letter-spacing: -0.0601em; /* OVR */
    line-height: 1.25;
    color: #ffffff;
}
/* /FONT:AUTO con16 END */

@media (max-width: 599px) {
  .con16 {
    .con16_iner {
      padding-top: 12.8vw;
      padding-bottom: 17.0667vw;
      padding-inline: 5.3333vw;
    }

    .con16__lead {
      margin-top: 2.1333vw;
    }

    /* 스트립은 화면 끝까지 흐른다 — 번들 .swiper{margin-inline:auto} 를 이기려 겹쳐 쓴다 */
    .con16__feed.swiper {
      width: 100vw;
      margin-top: 8.5333vw;
      margin-inline: -5.3333vw;
    }

    .con16__feed-slide.swiper-slide {
      padding-right: 6.4vw;
    }

    .con16__feed-item {
      width: 66.6667vw;
    }

    .con16__nav {
      gap: 3.2vw;
      margin-top: 4.2667vw;
    }

    .con16__nav-face {
      width: 16vw;
    }

    .con16__cta {
      margin-top: 8.5333vw;
      width: 50.5vw;
      padding-block: 4.2667vw;
      border-radius: 6.4vw;
    }
  }
}

/* /merge-build:con16 */
/* merge-build:con17 */
.con17_iner {
    padding: calc(var(--px)*116) calc(var(--px)*173) calc(var(--px)*118) calc(var(--px)*229);
    gap: calc(var(--px)*180);
}
.con17__intro {
    flex: 1 1 0;
    min-width: 0;
    padding-top: calc(var(--px)*138);
}
.con17__title {
    margin-top: calc(var(--px)*14);
}
.con17__description {
    margin-top: calc(var(--px)*11);
}
.con17__stats {
    flex: 0 0 auto;
    gap: calc(var(--px)*37);
}
.con17__column {
    width: calc(var(--px)*420);
    gap: calc(var(--px)*39);
}
.con17__column--experience {
    padding-top: calc(var(--px)*64);
    gap: calc(var(--px)*41);
}
.con17__card {
    background: #ffffff;
    border-radius: calc(var(--px)*30);
    box-shadow: 0 0 0 1px #5e3f24, 0 0 0 calc(var(--px)*6) #ffffff;
    padding-inline: calc(var(--px)*20);
    transition: box-shadow .25s ease-out;
}
@media (hover: hover) and (pointer: fine) {
    .con17__card:hover {
        box-shadow: 0 0 0 1px #5e3f24, 0 0 0 calc(var(--px)*6) #ffffff, 0 calc(var(--px)*14) calc(var(--px)*30) rgb(0 0 0 / .18);
    }
}
.con17__card--experience {
    padding-top: calc(var(--px)*69);
    padding-bottom: calc(var(--px)*53);
    gap: calc(var(--px)*18);
}
.con17__card--stores {
    padding-top: calc(var(--px)*69);
    padding-bottom: calc(var(--px)*53);
    gap: calc(var(--px)*11);
}
.con17__card--brand {
    padding-top: calc(var(--px)*64);
    padding-bottom: calc(var(--px)*58);
    gap: calc(var(--px)*18);
}
.con17__card--platform {
    padding-top: calc(var(--px)*62);
    padding-bottom: calc(var(--px)*61);
    gap: calc(var(--px)*18);
}
.con17__eatz {
    right: calc(var(--px)*-72);
    top: calc(var(--px)*-7);
    pointer-events: none;
}

/* IMG:AUTO con17 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con17__years-image {
    width: calc(var(--px)*209);
    aspect-ratio: 209 / 29;
}

.con17__stores-image {
    width: calc(var(--px)*116);
    aspect-ratio: 116 / 36;
}

.con17__ranking-image {
    width: calc(var(--px)*82);
    aspect-ratio: 82 / 29;
}

.con17__members-image {
    width: calc(var(--px)*86);
    aspect-ratio: 86 / 28;
}

.con17__eatz {
    width: calc(var(--px)*149);
    aspect-ratio: 149 / 149;
}
/* /IMG:AUTO con17 END */

/* FONT:AUTO con17 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con17__eyebrow {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--headL);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.2;  /* OVR psd:2.17 */
    color: #ffffff;
}

.con17__title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--titleXL);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.23;
}

.con17__brand {
    color: #fef3a2;
}

.con17__title-copy {
    color: #ffffff;
}

.con17__description {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    letter-spacing: -0.05em;
    line-height: 1.46;
    color: #ffffff;
}

.con17__description-lead,
.con17__description-end,
.con17__copy-regular {
    font-weight: 300;
}

.con17__description-emphasis,
.con17__copy-bold {
    font-weight: 700;
}

.con17__stats {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    letter-spacing: -0.07em;
    line-height: 1.5;
    text-align: center;
    color: #0f0f0f;
}
/* /FONT:AUTO con17 END */

@media (max-width:599px) {
    .con17_iner {
        flex-direction: column;
        align-items: stretch;
        padding: 14.9333vw 4.2667vw 12.8vw;
        gap: 10.6667vw;
    }
    .con17__intro {
        flex: none;
        padding-top: 0;
    }
    .con17__title {
        margin-top: 2.1333vw;
    }
    .con17__description {
        margin-top: 2.1333vw;
    }
    .con17__stats {
        flex-direction: column;
        gap: 6.4vw;
    }
    .con17__column,
    .con17__column--experience {
        width: 100%;
        gap: 6.4vw;
    }
    .con17__column--experience {
        padding-top: 0;
    }
    .con17__card {
        border-radius: 5.3333vw;
        box-shadow: 0 0 0 1px #5e3f24, 0 0 0 1.0667vw #ffffff;
        padding: 6.4vw 3.2vw 6.4vw;
        gap: 3.2vw;
    }
    .con17__card--stores {
        gap: 1.6vw;
    }
    .con17__years-image {
        width: 46.7867vw;
    }
    .con17__stores-image {
        width: 25.9677vw;
    }
    .con17__ranking-image {
        width: 18.3565vw;
    }
    .con17__members-image {
        width: 19.2519vw;
    }
    .con17__eatz {
        width: 20.2667vw;
        right: -3.2vw;
        top: -2.6667vw;
    }
}

/* /merge-build:con17 */
/* merge-build:con18 */
.con18 {
    padding-block: calc(var(--px)*59) calc(var(--px)*20.22);
}
.con18_iner {
    width: calc(var(--px)*1804);
    border-radius: calc(var(--px)*50);
    overflow: hidden;
}
.con18__intro {
    padding-block: calc(var(--px)*111.45) calc(var(--px)*82.84);
    padding-inline: 0 calc(var(--px)*5);
    gap: calc(var(--px)*4.47);
}
.con18__description {
    margin-top: calc(var(--px)*10.49);
}
.con18__cards {
    gap: 1px; /* 시안의 카드 사이 1px 밝은 선 — 컨테이너 bg_img 가 그 틈으로 비친다 */
}
.con18__card {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    &:focus-visible {
        outline: 2px solid #5e3f24;
        outline-offset: -2px;
    }
}
.con18__default {
    padding-block: calc(var(--px)*98) calc(var(--px)*97);
    gap: calc(var(--px)*32);
    transition: opacity .28s ease-out, visibility 0s linear 0s;
}
.con18__medallion {
    width: calc(var(--px)*104);
    padding-block: calc(var(--px)*32.5);
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 1px 16px rgba(254, 243, 162, .77);
}
.con18__card--logistics {
    & .con18__medallion { padding-block: calc(var(--px)*29.5); }
}
.con18__card--marketing {
    & .con18__default { padding-block: calc(var(--px)*99) calc(var(--px)*96); padding-inline: 0 calc(var(--px)*4); }
    & .con18__medallion { padding-block: calc(var(--px)*32); }
}
.con18__hover {
    inset: 0;
    gap: calc(var(--px)*12.11);
    padding: calc(var(--px)*20);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease-out, visibility 0s linear .28s;
    &.con18__hover--operations { padding-right: calc(var(--px)*26); }
    &.con18__hover--marketing { padding-right: calc(var(--px)*24); }
    &.con18__hover--logistics { gap: calc(var(--px)*14.11); padding-top: calc(var(--px)*26); }
    &.con18__hover--operations,
    &.con18__hover--marketing {
        gap: calc(var(--px)*17.11);
        padding-bottom: calc(var(--px)*21);
    }
}
.con18__card:is(:hover, :focus-within) {
    & .con18__default {
        opacity: 0;
        visibility: hidden;
        transition: opacity .28s ease-out, visibility 0s linear .28s;
    }
    & .con18__hover {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }
}

/* IMG:AUTO con18 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con18__truck-image {
    width: calc(var(--px)*46);
    aspect-ratio: 46 / 45;
}

.con18__document-image {
    width: calc(var(--px)*35);
    aspect-ratio: 35 / 39;
}

.con18__flame-image {
    width: calc(var(--px)*37);
    aspect-ratio: 37 / 40;
}
/* /IMG:AUTO con18 END */

/* FONT:AUTO con18 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con18 {
    text-align: center;
}

.con18__eyebrow {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--headL);
    font-weight: 800;
    letter-spacing: -0.0551em;  /* OVR psd:-0.05em */
    line-height: 2.17;
    color: #0f0f0f;
}

.con18__title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--titleXL);
    font-weight: 900;
    letter-spacing: -0.0478em;  /* OVR psd:-0.05em */
    line-height: 1.14;
}

.con18__title-lead {
    color: #5e3f24;
}

.con18__title-end {
    color: #0f0f0f;
}

.con18__description {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    letter-spacing: -0.05em;
    line-height: 1.46;
    color: #0f0f0f;
}

.con18__description-lead,
.con18__logistics-copy-lead,
.con18__operations-copy-lead,
.con18__marketing-copy-lead {
    font-weight: 700;
}

.con18__description-end,
.con18__logistics-copy-end,
.con18__operations-copy-end,
.con18__marketing-copy-end {
    font-weight: 300;
}

.con18__card-title,
.con18__hover-title,
.con18__operations-hover-title,
.con18__marketing-hover-title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--headL);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.33;
}

.con18__logistics-lead,
.con18__logistics-hover-lead,
.con18__operations-lead,
.con18__operations-hover-lead,
.con18__marketing-emphasis,
.con18__marketing-hover-emphasis {
    color: #fef3a2;
}

.con18__logistics-end,
.con18__logistics-hover-end,
.con18__operations-end,
.con18__operations-hover-end,
.con18__marketing-lead,
.con18__marketing-end,
.con18__marketing-hover-lead,
.con18__marketing-hover-end {
    color: #ffffff;
}

.con18__card-copy {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    letter-spacing: -0.07em;
    line-height: 1.46;
    color: #ffffff;
}
/* /FONT:AUTO con18 END */

@media (max-width: 599px) {
    .con18 {
        padding-block: 0;
    }
    .con18_iner {
        width: 100%;
        border-radius: 0;
    }
    .con18__intro {
        padding-block: 17.0667vw 12.8vw;
        padding-inline: 5.3333vw;
        gap: 0.5333vw;
    }
    .con18__description {
        margin-top: 1.6vw;
    }
    .con18__cards {
        flex-direction: column;
    }
    .con18__card {
        flex: none;
        width: 100%;
        min-height: 64vw;
    }
    .con18__default {
        padding-block: 14.9333vw;
        gap: 5.3333vw;
    }
    .con18__medallion {
        width: 17.0667vw;
        padding-block: 5.3333vw;
    }
    .con18__card--logistics {
        & .con18__medallion { padding-block: 4.2667vw; }
    }
    .con18__card--marketing {
        & .con18__default { padding-block: 14.9333vw; padding-inline: 0; }
        & .con18__medallion { padding-block: 5.3333vw; }
    }
    .con18__hover {
        gap: 2.1333vw;
        padding: 3.2vw 5.3333vw;
        &.con18__hover--operations { padding-right: 5.3333vw; }
        &.con18__hover--marketing { padding-right: 5.3333vw; }
        &.con18__hover--logistics { gap: 2.1333vw; padding-top: 4.2667vw; }
        &.con18__hover--operations,
        &.con18__hover--marketing { gap: 3.2vw; padding-bottom: 3.2vw; }
    }
    .con18__truck-image { width: 7.5487vw; }
    .con18__document-image { width: 5.7436vw; }
    .con18__flame-image { width: 6.0718vw; }
    /* 모바일 상태축 = .is-active 단일 — PC hover/focus 규칙을 구체성으로 무효화 */
    .con18 .con18_iner .con18__content .con18__cards .con18__card {
        &:not(.is-active) {
            & .con18__default { opacity: 1; visibility: visible; }
            & .con18__hover { opacity: 0; visibility: hidden; }
        }
        &.is-active {
            & .con18__default { opacity: 0; visibility: hidden; transition: opacity .28s ease-out, visibility 0s linear .28s; }
            & .con18__hover { opacity: 1; visibility: visible; transition-delay: 0s; }
        }
    }
}

/* /merge-build:con18 */
/* merge-build:con19 */
.con19__deco-pencil {
    left: calc(var(--px)*-119);
    bottom: calc(var(--px)*-34);
}

.con19__deco-note {
    right: calc(var(--px)*-334);
    bottom: calc(var(--px)*-94);
}

.con19__title {
    margin-top: calc(var(--px)*149);
    padding-right: calc(var(--px)*6);
}

.con19__desc {
    margin-top: calc(var(--px)*12);
}

.con19__cards {
    margin-top: calc(var(--px)*55);
    gap: calc(var(--px)*50);
}

.con19__card {
    width: calc(var(--px)*500);
    padding: 0 calc(var(--px)*36) calc(var(--px)*29);
    background-color: #2752ad;
    background-image: linear-gradient(to right, #345eb7 calc(var(--px)*1), transparent calc(var(--px)*1)),
                      linear-gradient(to bottom, #345eb7 calc(var(--px)*1), transparent calc(var(--px)*1));
    background-size: calc(var(--px)*15) calc(var(--px)*15);
    background-position: calc(var(--px)*8) calc(var(--px)*13);
    box-shadow: 0 calc(var(--px)*10) calc(var(--px)*9) rgba(0, 0, 0, .17);
}

.con19__tape--remote,
.con19__tape--classroom,
.con19__tape--field {
    top: calc(var(--px)*-33);
}

.con19__tape-peel {
    width: 100%;
    height: 100%;
}

.con19__card-day {
    margin-top: calc(var(--px)*42);
    padding-right: calc(var(--px)*3);
}

.con19__card-title {
    margin-top: calc(var(--px)*12);
    padding-right: calc(var(--px)*3);
}

.con19__card-panel {
    align-self: stretch;
    margin-top: calc(var(--px)*22);
    padding-top: calc(var(--px)*40);
    background: #fff;
    border: 1px solid #dddddd;
    border-radius: calc(var(--px)*30);
}

.con19__card-badge {
    padding: 0 calc(var(--px)*16);
    background: #fef3a2;
    border: 1px solid #e0d47b;
    border-radius: 50vw;
}

.con19__card-place + .con19__card-badge {
    margin-top: calc(var(--px)*30);
}

.con19__card-place {
    margin-top: calc(var(--px)*12);
}

.con19__card-note {
    margin-top: calc(var(--px)*12);
    margin-bottom: calc(var(--px)*25);
}

.con19__footnote {
    margin-top: calc(var(--px)*31);
    margin-bottom: calc(var(--px)*136);
}

/* IMG:AUTO con19 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con19__deco-pencil {
    width: calc(var(--px)*447);
    aspect-ratio: 447 / 908;
}

.con19__deco-note {
    width: calc(var(--px)*758);
    aspect-ratio: 758 / 900;
}

.con19__tape--remote {
    width: calc(var(--px)*178);
    aspect-ratio: 178 / 59;
}

.con19__tape--classroom {
    width: calc(var(--px)*147);
    aspect-ratio: 147 / 59;
}

.con19__tape--field {
    width: calc(var(--px)*153);
    aspect-ratio: 153 / 60;
}
/* /IMG:AUTO con19 END */

/* FONT:AUTO con19 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con19 {
    text-align: center;
}

.con19__title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--titleXL);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.23;
    color: #0f0f0f;
}

.con19__title-accent {
    color: #2752ad;
}

.con19__desc {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.46;
    color: #0f0f0f;
}

.con19__card-day {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 700;
    letter-spacing: -0.07em;
    line-height: 1.73;
    color: #ffffff;
}

.con19__card-title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--headL);
    font-weight: 800;
    letter-spacing: -0.07em;
    line-height: 1.27;
    color: #ffffff;
}

.con19__card-panel {
    font-family: var(--font-pretendard);
}

.con19__card-badge {
    font-size: var(--bodyL);
    font-weight: 700;
    letter-spacing: -0.07em;
    line-height: 1.78; /* OVR */
    color: #2752ad;
}

.con19__card-place {
    font-size: var(--bodyXL);
    font-weight: 700;
    letter-spacing: -0.07em;
    line-height: 1.5;
    color: #000000;
}

.con19__card-note {
    font-size: var(--bodyXL);
    font-weight: 300;
    letter-spacing: -0.07em;
    line-height: 1.5;
    color: #000000;
}

.con19__footnote {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 300;
    letter-spacing: -0.07em;
    line-height: 1.5;
    color: #000000;
}
/* /FONT:AUTO con19 END */

@media (max-width:599px) {
    .con19_iner {
        padding-inline: 5.3333vw;
    }

    .con19__deco-pencil {
        width: 40vw;
        left: -12vw;
        bottom: 44vw;
    }

    .con19__deco-note {
        width: 45vw;
        right: -20vw;
        bottom: 56vw;
    }

    .con19__title {
        margin-top: 14.9333vw;
        padding-right: 1.0667vw;
    }

    .con19__desc {
        margin-top: 2.1333vw;
    }

    .con19__cards {
        flex-direction: column;
        align-items: center;
        margin-top: 8.5333vw;
        gap: 8.5333vw;
    }

    .con19__card {
        width: 88vw;
        padding: 0 5.3333vw 4.2667vw;
        background-image: linear-gradient(to right, #345eb7 1px, transparent 1px),
                          linear-gradient(to bottom, #345eb7 1px, transparent 1px);
        background-size: 2.1333vw 2.1333vw;
        background-position: 1.0667vw 2.1333vw;
        box-shadow: 0 1.6vw 1.6vw rgba(0, 0, 0, .17);
    }

    .con19__tape--remote,
    .con19__tape--classroom,
    .con19__tape--field {
        top: -5.3333vw;
    }

    .con19__tape--remote {
        width: 31.2vw;
    }

    .con19__tape--classroom {
        width: 25.7708vw;
    }

    .con19__tape--field {
        width: 26.8472vw;
    }

    .con19__card-day {
        margin-top: 6.4vw;
        padding-right: 0.5333vw;
    }

    .con19__card-title {
        margin-top: 2.1333vw;
        padding-right: 0.5333vw;
    }

    .con19__card-panel {
        margin-top: 3.2vw;
        padding-top: 6.4vw;
        border-radius: 5.3333vw;
    }

    .con19__card-badge {
        padding: 0 2.1333vw;
    }

    .con19__card-place + .con19__card-badge {
        margin-top: 5.3333vw;
    }

    .con19__card-place {
        margin-top: 2.1333vw;
    }

    .con19__card-note {
        margin-top: 2.1333vw;
        margin-bottom: 4.2667vw;
    }

    .con19__footnote {
        margin-top: 5.3333vw;
        margin-bottom: 12.8vw;
    }
}

/* /merge-build:con19 */
/* merge-build:con20 */
.con20 {
	background-color: #2752ad;
}

.con20_iner {
	padding: calc(var(--px)*113) 0 calc(var(--px)*29);
}

.con20__title {
	margin-top: calc(var(--px)*20);
}

.con20__panel {
	width: calc(var(--px)*1680);
	margin: calc(var(--px)*42) auto 0;
	padding: calc(var(--px)*90) calc(var(--px)*120) calc(var(--px)*46);
	border-radius: calc(var(--px)*50);
	background-color: #ffffff;
}

.con20__panel-title {
	gap: calc(var(--px)*24);
}

/* 카드열 + 금화 데코(좌우로 열 밖까지 삐져나옴) 공통 앵커 */
.con20__benefits {
	margin-top: calc(var(--px)*37);
}

.con20__cards {
	gap: calc(var(--px)*15);
}

.con20__card {
	overflow: hidden;
	width: calc(var(--px)*470);
	min-height: calc(var(--px)*350); /* HEIGHT: 시안 카드 3장 고정 350 — 콘텐츠 높이가 카드마다 달라 등높이가 안 나온다 */
	border-radius: calc(var(--px)*30);
	background-color: #0c0c11;
}

.con20__card-glow {
	left: 0;
	bottom: 0;
}

/* 카드 광채(absolute) 위로 올리는 콘텐츠 층 */
.con20__card-body {
	flex: 1;
	padding: calc(var(--px)*36) calc(var(--px)*20) calc(var(--px)*36);
}

.con20__card-label {
	padding: calc(var(--px)*10) calc(var(--px)*34);
	border-radius: calc(var(--px)*25);
	background-color: #2752ad;
}

.con20__card-amount {
	flex: 1;
	margin-top: calc(var(--px)*12);
}

.con20__card-amount-note {
	margin-top: calc(var(--px)*11);
}

.con20__card-desc {
	margin-top: 0;
}

.con20__coin-left {
	left: calc(var(--px)*-106);
	top: calc(var(--px)*35);
}

.con20__coin-right {
	right: calc(var(--px)*-88);
	bottom: calc(var(--px)*51);
}

/* padding 으로 상단 여백을 만들어 자식 margin 상쇄를 막는다(선물상자 앞판이 유일한 흐름 자식) */
.con20__gift {
	margin-top: calc(var(--px)*57);
	padding-top: calc(var(--px)*169);
}

.con20__gift-back {
	right: calc(var(--px)*442);
	bottom: 0;
}

.con20__gift-bubble {
	left: calc(var(--px)*498);
	top: calc(var(--px)*13);
}

.con20__gift-star-white {
	left: calc(var(--px)*510);
	top: 0;
}

.con20__gift-bead-left {
	left: calc(var(--px)*421);
	top: calc(var(--px)*28);
}

.con20__gift-star-right {
	right: calc(var(--px)*392);
	top: calc(var(--px)*29);
}

.con20__gift-star-left {
	left: calc(var(--px)*337);
	top: calc(var(--px)*105);
}

.con20__gift-spring-right {
	right: calc(var(--px)*352);
	top: calc(var(--px)*125);
}

.con20__gift-spring-left {
	left: calc(var(--px)*386);
	bottom: calc(var(--px)*79);
}

.con20__gift-star-small {
	right: calc(var(--px)*335);
	bottom: calc(var(--px)*89);
}

.con20__gift-bead-right {
	right: calc(var(--px)*434);
	bottom: calc(var(--px)*59);
}

.con20__notice {
	width: calc(var(--px)*689);
	margin: calc(var(--px)*58) auto 0;
	padding: calc(var(--px)*23) calc(var(--px)*49) calc(var(--px)*38);
	border: 1px solid #dddddd;
	border-radius: calc(var(--px)*30);
	background-color: #f6f9ff;
}

.con20__notice-list {
	margin-top: calc(var(--px)*11);
	white-space: pre-wrap;
}

/* 선물 장식 부유 — 주기·시작을 흩어 8개가 한 몸처럼 움직이지 않게 한다 */
.con20__gift-star-white img { animation-duration: 2.6s; }
.con20__gift-bead-left img { animation-duration: 3s; animation-delay: .45s; }
.con20__gift-star-right img { animation-duration: 2.4s; animation-delay: .9s; }
.con20__gift-star-left img { animation-duration: 2.8s; animation-delay: .3s; }
.con20__gift-spring-right img { animation-duration: 3.2s; animation-delay: .75s; }
.con20__gift-spring-left img { animation-duration: 2.5s; animation-delay: 1.15s; }
.con20__gift-star-small img { animation-duration: 2.9s; animation-delay: .6s; }
.con20__gift-bead-right img { animation-duration: 3.4s; animation-delay: .2s; }

/* IMG:AUTO con20 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con20__logotype {
    width: calc(var(--px)*248);
    aspect-ratio: 248 / 54;
}

.con20__card-glow {
    width: calc(var(--px)*470);
    aspect-ratio: 470 / 205;
}

.con20__coin-left {
    width: calc(var(--px)*138);
    aspect-ratio: 138 / 132;
}

.con20__coin-right {
    width: calc(var(--px)*136);
    aspect-ratio: 136 / 97;
}

.con20__gift-back {
    width: calc(var(--px)*516);
    aspect-ratio: 516 / 274;
}

.con20__gift-bubble {
    width: calc(var(--px)*444);
    aspect-ratio: 444 / 242;
}

.con20__gift-front {
    width: calc(var(--px)*551);
    aspect-ratio: 551 / 187;
}

.con20__gift-star-white {
    width: calc(var(--px)*63);
    aspect-ratio: 63 / 59;
}

.con20__gift-bead-left,
.con20__gift-bead-right {
    width: calc(var(--px)*26);
    aspect-ratio: 26 / 26;
}

.con20__gift-star-right {
    width: calc(var(--px)*52);
    aspect-ratio: 52 / 49;
}

.con20__gift-star-left {
    width: calc(var(--px)*68);
    aspect-ratio: 68 / 69;
}

.con20__gift-spring-right {
    width: calc(var(--px)*79);
    aspect-ratio: 79 / 96;
}

.con20__gift-spring-left {
    width: calc(var(--px)*70);
    aspect-ratio: 70 / 58;
}

.con20__gift-star-small {
    width: calc(var(--px)*36);
    aspect-ratio: 36 / 24;
}
/* /IMG:AUTO con20 END */

/* FONT:AUTO con20 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con20__title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--titleXL);
    font-weight: 900;
    letter-spacing: -0.0412em; /* OVR */
    line-height: 1.23;
    text-align: center;
    color: #ffffff;
}

.con20__title-accent {
    color: #fef3a2;
}

.con20__panel-title {
    font-family: var(--font-nanumsquareneo);
    font-size: calc(var(--px)*50);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.3;
    text-align: center;
    color: #0f0f0f;
}

.con20__panel-title-star {
    font-size: var(--subheadM);
    letter-spacing: -0.05em;
    line-height: 2.71;
    color: #2752ad;
}

.con20__cards {
    text-align: center;
}

.con20__card-label {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--subheadM);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.25;
    color: #ffffff;
}

.con20__card-amount-value.con20__card-amount-value--fee {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--titleXL);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
    color: #fef3a2;
}

.con20__card-desc {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.56;
    color: #ffffff;
}

.con20__card-amount {
    font-family: var(--font-nanumsquareneo);
    color: #fef3a2;
}

.con20__card-amount-value.con20__card-amount-value--interest {
    font-size: var(--titleS);
    font-weight: 900;
    letter-spacing: -0.0164em; /* OVR */
    line-height: 1;
}

.con20__card-amount-note {
    font-size: var(--subheadM);
    font-weight: 700;
    letter-spacing: -0.0577em; /* OVR */
    line-height: 1.25;
}

.con20__card-amount-value.con20__card-amount-value--support {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--titleS);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.13;
    color: #fef3a2;
}

.con20__notice {
    font-family: var(--font-pretendard);
}

.con20__notice-title {
    font-size: var(--bodyXL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.5;
    text-align: center;
    color: #000000;
}

.con20__notice-list {
    font-size: var(--bodyM);
    font-weight: 300;
    letter-spacing: -0.1213em; /* OVR */
    line-height: 1.455; /* OVR */
    color: #646464;
}
/* /FONT:AUTO con20 END */

@media (max-width:599px) {
	.con20_iner {
		padding: 17.0667vw 0 4.2667vw;
	}

	.con20__logotype {
		width: 32vw;
	}

	.con20__title {
		margin-top: 3.2vw;
	}

	.con20__panel {
		width: 91.4667vw;
		margin: 6.4vw auto 0;
		padding: 8.5333vw 4.2667vw 4.2667vw;
		border-radius: 8.5333vw;
	}

	.con20__panel-title {
		gap: 4.2667vw;
		font-size: 8vw;
	}

	.con20__benefits {
		margin-top: 6.4vw;
	}

	.con20__cards {
		flex-direction: column;
		gap: 3.2vw;
	}

	.con20__card {
		width: 100%;
		min-height: auto;
		border-radius: 4.2667vw;
	}

	.con20__card-glow {
		width: 100%;
	}

	.con20__card-body {
		padding: 5.3333vw 4.2667vw;
	}

	.con20__card-label {
		padding: 1.6vw 5.3333vw;
		border-radius: 4.2667vw;
	}

	.con20__card-amount {
		margin-top: 2.1333vw;
	}

	.con20__card-desc {
		margin-top: 3.2vw;
	}

	.con20__card-amount-note {
		margin-top: 1.6vw;
	}

	.con20__coin-left {
		width: 24.3vw;
		left: -18.6667vw;
		top: -4.2667vw;
	}

	.con20__coin-right {
		width: 24vw;
		right: -15.4667vw;
		bottom: -8.5333vw;
	}

	/* 선물 그룹은 패널 좌우 여백을 상쇄해 full-bleed 100vw 로 비례축소(×0.130208) */
	.con20__gift {
		width: 100vw;
		margin-inline: -8.5333vw;
		margin-top: 8.5333vw;
		padding-top: 22.0052vw;
	}

	.con20__gift-back {
		width: 67.1875vw;
		right: 13.9323vw;
	}

	.con20__gift-bubble {
		width: 57.8125vw;
		left: 20.9635vw;
		top: 1.6927vw;
	}

	.con20__gift-front {
		width: 71.7448vw;
	}

	.con20__gift-star-white {
		width: 8.2031vw;
		left: 22.526vw;
	}

	.con20__gift-bead-left,
	.con20__gift-bead-right {
		width: 3.3854vw;
	}

	.con20__gift-bead-left {
		left: 10.9375vw;
		top: 3.6458vw;
	}

	.con20__gift-star-right {
		width: 6.7708vw;
		right: 7.4219vw;
		top: 3.776vw;
	}

	.con20__gift-star-left {
		width: 8.8542vw;
		left: 0;
		top: 13.6719vw;
	}

	.con20__gift-spring-right {
		width: 10.2865vw;
		right: 2.2135vw;
		top: 16.276vw;
	}

	.con20__gift-spring-left {
		width: 9.1146vw;
		left: 6.3802vw;
		bottom: 10.2865vw;
	}

	.con20__gift-star-small {
		width: 4.6875vw;
		right: 0;
		bottom: 11.5885vw;
	}

	.con20__gift-bead-right {
		right: 12.8906vw;
		bottom: 7.6823vw;
	}

	.con20__notice {
		width: 100%;
		margin-top: 8.5333vw;
		padding: 3.2vw 4.2667vw 6.4vw;
		border-radius: 4.2667vw;
	}

	.con20__notice-list {
		margin-top: 1.6vw;
		font-size: 3.2vw;
	}
}

/* /merge-build:con20 */
/* merge-build:con21 */
/* con21 — 개설 비용(표) + 개설 절차(2열 스텝) */
/* 모바일: 표는 폭 100% + 열 % 재배분, .con21__step-row 는 flex-col(화살표 90도) */

.con21 {
  padding-block: calc(var(--px)*28) calc(var(--px)*115);
  background: #2752ad;
}

.con21_box {
  width: calc(var(--px)*1680);
  margin-inline: auto;
  padding-bottom: calc(var(--px)*70);
  background: #ffffff;
  border-radius: calc(var(--px)*50);
}

.con21__inner {
  display: flex;
  flex-direction: column;
  width: calc(var(--px)*1000);
  margin-inline: calc(var(--px)*337) calc(var(--px)*343);
}

.con21__title--cost { margin-top: calc(var(--px)*100); }
.con21__title--steps { margin-top: calc(var(--px)*112); }

.con21__tabs {
  margin-top: calc(var(--px)*39);
  gap: calc(var(--px)*15);
}

.con21__tab {
  width: calc(var(--px)*199);
  padding-block: calc(var(--px)*19);
  border: 1px solid #dddddd;
  background: #ffffff;
  cursor: pointer;
}

.con21__tab--active {
  border-color: #2752ad;
  background: #2752ad;
}

.con21__panel { display: none; }

.con21__panel--active { display: block; }

.con21__unit { margin-top: calc(var(--px)*15); }

.con21__table {
  width: calc(var(--px)*1000);
  margin-top: calc(var(--px)*6);
  table-layout: fixed;
  border-collapse: collapse;
}

.con21__col-cat,
.con21__col-item,
.con21__col-amount { width: calc(var(--px)*200); }

.con21__col-note { width: calc(var(--px)*400); }

.con21__th-cat,
.con21__th-amount,
.con21__th-note,
.con21__cat,
.con21__item,
.con21__amount,
.con21__note-cell,
.con21__note-cell-alt {
  border: 1px solid #dddddd;
  vertical-align: middle;
}

.con21__th-cat,
.con21__th-amount,
.con21__th-note {
  padding-block: calc(var(--px)*15);
  background: #d9e4fb;
}

.con21__th-cat,
.con21__th-amount { border-right-color: #ffffff; }

.con21__cat,
.con21__item,
.con21__amount {
  padding-block: calc(var(--px)*9.5) calc(var(--px)*13.5);
  background: #ffffff;
}

.con21__note-cell {
  padding-block: calc(var(--px)*10.5) calc(var(--px)*12.5);
  background: #ffffff;
}

.con21__note-cell-alt {
  padding-block: calc(var(--px)*9.5) calc(var(--px)*13.5);
  background: #ffffff;
}

.con21__stamp {
  right: calc(var(--px)*-19);
  z-index: 1; /* 비고 셀이 인라인편집(site-text-editor.css) 대상이라 admin 화면에선 relative 가 돼, DOM 뒤인 그 셀이 셀 밖으로 나온 스탬프 우측을 덮는다 */
  width: calc(var(--px)*84);
  padding-block: calc(var(--px)*6.5);
  background: #0f0f0f;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #0f0f0f;
}

/* 끈 뱃지는 관리자 화면에만 렌더된다 — opacity 는 .animate-blk 키프레임이 쓰고 있어 filter 로 흐린다 */
.con21__stamp:not(.con21__stamp--on) { filter: opacity(0.3); }

/* 금액 취소선은 뱃지가 켜진 행에만 — 클래스 토글만으로 미리보기가 양방향으로 맞는다 */
.con21__amount-box:has(.con21__stamp--on) .con21__amount-old { text-decoration: line-through; }

/* data-st-toggle 은 admin 일 때만 붙는다 — 방문자 화면엔 포인터가 안 걸린다 */
.con21__stamp[data-st-toggle] { cursor: pointer; }

.con21__notes { margin-top: calc(var(--px)*11); }

.con21__steps {
  display: flex;
  flex-direction: column;
  margin-top: calc(var(--px)*29);
  gap: calc(var(--px)*7);
}

.con21__step-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--px)*29);
}

/* 카드·화살표의 .relative 가 이 absol 보다 DOM 뒤라 위에 깔린다 — 순서 바꾸면 띠가 카드를 덮는다 */
.con21__step-band {
  top: calc(var(--px)*23);
  right: calc(var(--px)*29);
  bottom: calc(var(--px)*23);
  left: calc(var(--px)*34);
  background: #fef3a2;
  opacity: .4;
}

.con21__step {
  display: flex;
  align-items: center;
  width: calc(var(--px)*400);
  min-height: calc(var(--px)*120);
  padding-left: calc(var(--px)*34);
  gap: calc(var(--px)*61);
  background: #f6f9ff;
  border: 1px solid #2752ad;
}

.con21__step-divider {
  top: calc(var(--px)*30);
  bottom: calc(var(--px)*30);
  left: calc(var(--px)*116);
  width: calc(var(--px)*4);
  background: #2752ad;
}

.con21__cta-wrap { margin-top: calc(var(--px)*56); }

.con21__cta {
  width: calc(var(--px)*276);
  padding-block: calc(var(--px)*22.5);
  background: #2752ad;
  border-radius: calc(var(--px)*38);
  transition: background-color .25s ease-out, transform .25s ease-out, box-shadow .2s ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .con21__cta:hover {
    background-color: color-mix(in srgb, #2752ad 90%, black);
    transform: translateY(-6%);
  }
}

.con21__cta:focus-visible {
  outline: none;
  background-color: color-mix(in srgb, #2752ad 90%, black);
  transform: translateY(-6%);
  box-shadow: 0 0 0 calc(var(--px)*4) color-mix(in srgb, #2752ad 35%, white);
}

.con21__icecream {
  right: calc(var(--px)*-88);
  bottom: calc(var(--px)*-70);
}

/* IMG:AUTO con21 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con21__step-shape {
    width: calc(var(--px)*52);
    aspect-ratio: 52 / 37;
}

.con21__step-num--01 {
    width: calc(var(--px)*18);
    aspect-ratio: 18 / 14;
}

.con21__step-arrow {
    width: calc(var(--px)*18);
    aspect-ratio: 18 / 16;
}

.con21__step-num--02,
.con21__step-num--03,
.con21__step-num--04,
.con21__step-num--05,
.con21__step-num--06 {
    width: calc(var(--px)*21);
    aspect-ratio: 21 / 14;
}

.con21__step-num--07 {
    width: calc(var(--px)*20);
    aspect-ratio: 20 / 14;
}

.con21__step-num--08 {
    width: calc(var(--px)*22);
    aspect-ratio: 22 / 14;
}

.con21__icecream {
    width: calc(var(--px)*503);
    aspect-ratio: 503 / 701;
}
/* /IMG:AUTO con21 END */

/* FONT:AUTO con21 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con21__title.con21__title--cost,
.con21__title.con21__title--steps {
    font-family: var(--font-nanumsquareneo);
    font-size: calc(var(--px)*50);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.3;
    text-align: center;
    color: #0f0f0f;
}

.con21__tabs {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--headS);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.36;
    text-align: center;
}

.con21__tab.con21__tab--active {
    color: #ffffff;
}

.con21__tab {
    color: #0f0f0f;
}

.con21__unit {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 300;
    letter-spacing: -0.07em;
    line-height: 1.38;
    text-align: right;
    color: #646464;
}

.con21__table {
    text-align: center;
}

.con21__th-cat,
.con21__th-note {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 3;
    color: #000000;
}

.con21__th-amount {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.11;
    color: #000000;
}

.con21__cat,
.con21__item {
    font-family: var(--font-pretendard);
    font-size: var(--subheadS);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.53;  /* OVR */
    color: #0f0f0f;
}

.con21__amount-old,
.con21__note-cell,
.con21__amount,
.con21__amount-sum {
    font-family: var(--font-pretendard);
    font-size: var(--subheadS);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.53;  /* OVR */
    color: #0f0f0f;
}

.con21__stamp {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--bodyL);
    font-weight: 800;
    letter-spacing: -0.07em;
    line-height: 1.44;
    color: #fef3a2;
}

.con21__note-cell-alt {
    font-family: var(--font-pretendard);
    font-size: var(--subheadS);
    font-weight: 300;
    letter-spacing: -0.061em; /* OVR */
    line-height: 1.53;
    color: #0f0f0f;
}

.con21__notes {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 300;
    letter-spacing: -0.112em; /* OVR */
    line-height: 1.4375; /* OVR */
    color: #646464;
}

.con21__steps {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--bodyXL);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.5;
    color: #000000;
}

.con21__cta {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--subheadM);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.25;
    text-align: center;
    color: #ffffff;
}
/* /FONT:AUTO con21 END */

@media (max-width: 599px) {
  .con21 { padding-block: 4.2667vw 17.0667vw; }

  .con21_box {
    width: 92vw;
    padding-bottom: 10.6667vw;
    border-radius: 8.5333vw;
  }

  .con21__inner {
    width: auto;
    margin-inline: 4.2667vw;
  }

  .con21__title.con21__title--cost,
  .con21__title.con21__title--steps { font-size: var(--titleS); }

  .con21__title--cost { margin-top: 10.6667vw; }
  .con21__title--steps { margin-top: 12.8vw; }

  .con21__tabs {
    margin-top: 6.4vw;
    gap: 2.1333vw;
  }

  .con21__tab {
    width: 38vw;
    padding-block: 3.2vw;
  }

  .con21__unit { margin-top: 2.1333vw; }

  .con21__table {
    width: 100%;
    margin-top: 1.0667vw;
  }

  .con21__col-cat { width: 16%; }
  .con21__col-item { width: 20%; }
  .con21__col-amount { width: 22%; }
  .con21__col-note { width: 42%; }

  .con21__th-cat,
  .con21__th-amount,
  .con21__th-note,
  .con21__cat,
  .con21__item,
  .con21__amount,
  .con21__note-cell,
  .con21__note-cell-alt {
    padding-block: 1.6vw;
    padding-inline: 1.0667vw;
    line-height: 1.4;
  }

  .con21__cat,
  .con21__item,
  .con21__amount,
  .con21__amount-old,
  .con21__amount-sum,
  .con21__note-cell,
  .con21__note-cell-alt { font-size: var(--bodyXS); }

  .con21__stamp {
    right: -6.4vw;
    width: 13.3333vw;
    padding-block: 1.0667vw;
    font-size: var(--bodyXS);
  }

  .con21__notes {
    margin-top: 1.6vw;
    font-size: 3.2vw; /* con20 .con20__notice-list 와 같은 각주 크기로 맞춤 */
    letter-spacing: -0.07em; /* PC OVR -0.112em 은 1905 폭 대조용 — 모바일은 spec 원값 */
    line-height: 1.533;
  }

  /* PC 는 row(2스텝) 뒤 띠였지만 1열에선 카드 사이만 드러나 교대로 끊긴다 — 띠(.pc)를 접고 steps 전체에 같은 톤을 깐다 */
  .con21__steps {
    position: relative;
    align-items: center;
    margin-top: 4.2667vw;
    gap: 4.2667vw;
  }

  /* 카드보다 안쪽으로 들어간 띠 — .con21__step-row 가 relative 라 DOM 뒤로서 카드가 위에 깔린다 */
  .con21__steps::before {
    content: "";
    position: absolute;
    inset: 0 4.2667vw;
    background: color-mix(in srgb, #fef3a2 40%, #ffffff);
  }

  .con21__step-row {
    flex-direction: column;
    width: 100%;
    gap: 4.2667vw;
  }

  .con21__step {
    width: 100%;
    min-height: 19.2vw;
    padding-left: 5.3333vw;
    gap: 8.5333vw;
  }

  .con21__step-divider {
    top: 4.2667vw;
    bottom: 4.2667vw;
    left: 17.0667vw;
    width: 0.5333vw;
  }

  .con21__step-shape { width: 8.5333vw; }
  .con21__step-num--01 { width: 2.88vw; }
  .con21__step-num--02,
  .con21__step-num--03,
  .con21__step-num--04,
  .con21__step-num--05,
  .con21__step-num--06 { width: 3.36vw; }
  .con21__step-num--07 { width: 3.2vw; }
  .con21__step-num--08 { width: 3.52vw; }

  .con21__step-arrow {
    width: 4.2667vw;
    transform: rotate(90deg);
  }

  .con21__cta-wrap { margin-top: 8.5333vw; }

  .con21__cta {
    width: 44vw;
    padding-block: 3.2vw;
    border-radius: 6.4vw;
  }

  .con21__icecream {
    right: -6.4vw;
    bottom: -8.5333vw;
    width: 24vw;
  }
}

/* /merge-build:con21 */
/* merge-build:con22 */
/* 모바일에서는 목록 폭과 행 좌우 패딩을 축소하고 답변을 자연 개행한다. */
.con22 {
    padding-block: calc(var(--px)*133) calc(var(--px)*64.06);
    background: #fff;
    & .con22_iner { width: calc(var(--px)*1320); }
    & .con22__heading { gap: calc(var(--px)*32); padding-right: calc(var(--px)*6); }
    & .con22__list {
        margin-top: calc(var(--px)*57);
        border-block: 2px solid #5e3f24;
    }
    & .con22__item {
        border-bottom: 1px solid #ddd;
        &[hidden] { display: none; }
        /* 뒤 항목이 페이징으로 숨으면 그 앞 행이 시각적 마지막이 된다 */
        &:not(:has(~ .con22__item:not([hidden]))) { border-bottom: 0; }
        &[open] .con22__chevron { transform: rotate(180deg); }
        &:not([open]) > .con22__answer { display: none; }
    }
    & .con22__question {
        padding: calc(var(--px)*19) calc(var(--px)*58) calc(var(--px)*19) calc(var(--px)*71);
        gap: calc(var(--px)*22);
        cursor: pointer;
        list-style: none;
        transition: color .2s ease-out;
        &::-webkit-details-marker { display: none; }
        @media (hover: hover) and (pointer: fine) {
            &:hover { color: #5e3f24; }
        }
    }
    & .con22__badge {
        width: calc(var(--px)*34);
        padding-block: calc(var(--px)*9.5);
        flex-shrink: 0;
        border-radius: 50%;
        background: #5e3f24;
    }
    & .con22__chevron { margin-left: auto; flex-shrink: 0; transition: transform .25s ease-out; }
    & .con22__answer {
        padding: calc(var(--px)*20) calc(var(--px)*72) calc(var(--px)*26);
        gap: calc(var(--px)*25);
        border-top: 1px solid #ddd;
        background: #f5f5ed;
        & .con22__badge { padding-block: calc(var(--px)*10); }
    }
    & .con22__pagination { margin-top: calc(var(--px)*44); padding-right: calc(var(--px)*10); gap: calc(var(--px)*21.74); }
    & .con22__page-current {
        width: calc(var(--px)*27);
        border-radius: 50%;
        background: #5e3f24;
    }
}

/* IMG:AUTO con22 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con22__eyebrow {
    width: calc(var(--px)*163);
    aspect-ratio: 163 / 32;
}

.con22__q {
    width: calc(var(--px)*14);
    aspect-ratio: 14 / 15;
}

.con22__chevron {
    width: calc(var(--px)*15);
    aspect-ratio: 15 / 9;
}

.con22__a {
    width: calc(var(--px)*12);
    aspect-ratio: 12 / 14;
}
/* /IMG:AUTO con22 END */

/* FONT:AUTO con22 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con22__title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--titleXL);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.05;
    text-align: center;
}

.con22__title-base {
    color: #0f0f0f;
}

.con22__title-accent {
    color: #5e3f24;
}

.con22__list {
    font-family: var(--font-pretendard);
    color: #000000;
}

.con22__question-text {
    font-size: var(--bodyXL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.5;
}

.con22__answer-text {
    font-size: var(--bodyL);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.67;
}

.con22__pagination {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    letter-spacing: 0em;
    line-height: 1.5;  /* OVR psd:1.67 */
    text-align: center;
}

.con22__page-current {
    font-weight: 700;
    color: #ffffff;
}

.con22__page-rest {
    font-weight: 300;
    color: #000000;
}
/* /FONT:AUTO con22 END */

@media (max-width:599px) {
    .con22 {
        padding-block: 17.0667vw 12.8vw;
        & .con22_iner { width: 100%; padding-inline: 5.3333vw; }
        & .con22__heading { gap: 5.3333vw; padding-right: 0; }
        & .con22__list { margin-top: 8.5333vw; }
        & .con22__question { padding: 4.2667vw 0; gap: 3.2vw; }
        & .con22__badge { width: 5.3333vw; padding-block: 1.5238vw; }
        & .con22__answer {
            padding: 4.2667vw 0 5.3333vw;
            gap: 3.2vw;
            & .con22__badge { padding-block: 1.7333vw; }
        }
        & .con22__pagination { margin-top: 6.4vw; padding-right: 0; gap: 3.2vw; }
        & .con22__page-current { width: 5.3333vw; }
    }

    .con22__eyebrow { width: 32vw; }
    .con22__q { width: 2.1333vw; }
    .con22__chevron { width: 3.2vw; }
    .con22__a { width: 1.6vw; }
}

/* /merge-build:con22 */
/* merge-build:con23 */
.con23_iner {
	padding-top: calc(var(--px)*72);
	padding-bottom: calc(var(--px)*61);
}

.con23_box {
	position: relative;
	width: calc(var(--px)*1800);
}

.con23__title {
	margin-top: calc(var(--px)*193);
}

.con23__desc {
	margin-top: calc(var(--px)*16);
}

.con23__prompt {
	margin-top: calc(var(--px)*32);
}

.con23__cta {
	margin-top: calc(var(--px)*40);
	margin-bottom: calc(var(--px)*165);
	width: calc(var(--px)*310);
	padding-block: calc(var(--px)*26);
	border-radius: calc(var(--px)*41);
	background: #fef3a2;
	transition: background-color .25s ease-out, transform .25s ease-out, box-shadow .25s ease-out;
}

@media (hover: hover) and (pointer: fine) {
	.con23__cta:hover {
		background-color: #ffffff;
		transform: translateY(-8%);
		box-shadow: 0 6px 20px rgb(0 0 0 / .18);
	}
}

.con23__cta:focus-visible {
	background-color: #ffffff;
	transition-duration: .2s;
}

.con23__tape--left .v-peel,
.con23__tape--right .v-peel {
	width: 100%;
	height: 100%;
}

.con23__paper--left {
	left: calc(var(--px)*-8);
	top: calc(var(--px)*120);
}

.con23__tape--left {
	left: calc(var(--px)*372);
	top: calc(var(--px)*79);
}

.con23__paper--right {
	right: calc(var(--px)*-7);
	bottom: calc(var(--px)*106);
}

.con23__tape--right {
	right: calc(var(--px)*421);
	bottom: calc(var(--px)*300);
}

/* IMG:AUTO con23 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con23__paper--left {
    width: calc(var(--px)*576);
    aspect-ratio: 576 / 369;
}

.con23__tape--left {
    width: calc(var(--px)*225);
    aspect-ratio: 225 / 149;
}

.con23__paper--right {
    width: calc(var(--px)*576);
    aspect-ratio: 576 / 332;
}

.con23__tape--right {
    width: calc(var(--px)*184);
    aspect-ratio: 184 / 210;
}
/* /IMG:AUTO con23 END */

/* FONT:AUTO con23 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con23 {
    text-align: center;
}

.con23__title {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--titleXL);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.23;
    color: #ffffff;
}

.con23__title-em {
    color: #fef3a2;
}

.con23__desc {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.46;
    color: #ffffff;
}

.con23__prompt {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.46;
    color: #ffffff;
}

.con23__cta {
    font-family: var(--font-nanumsquareneo);
    font-size: var(--subheadM);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.25;
    color: #2752ad;
}
/* /FONT:AUTO con23 END */

@media (max-width:599px) {
	.con23_iner {
		padding-top: 14.9333vw;
		padding-bottom: 12.8vw;
	}

	.con23_box {
		width: 91.4667vw;
		border-radius: 8.5333vw; /* 카드 라운드가 배경 png 에 구워져 있어 세로로 길어진 모바일에선 cover 가 그 모서리를 잘라낸다 */
		overflow: hidden;
	}

	.con23__title {
		margin-top: 32vw;
	}

	.con23__desc {
		margin-top: 4.2667vw;
	}

	.con23__prompt {
		margin-top: 6.4vw;
	}

	.con23__cta {
		margin-top: 8.5333vw;
		margin-bottom: 32vw;
		width: 49.6vw;
		padding-block: 4.2667vw;
		border-radius: 6.4vw;
	}

	/* 종이 2종 +25%. 테이프는 종이 모서리에 걸친 한 세트라 같은 배율로 폭·위치를 따라간다 */
	.con23__paper--left {
		width: 65vw;
		left: 0;
		top: 8.5333vw;
	}

	.con23__tape--left {
		width: 25.3333vw;
		left: 42.8667vw;
		top: 4.8267vw;
	}

	.con23__paper--right {
		width: 65vw;
		right: 0;
		bottom: 6.4vw;
	}

	.con23__tape--right {
		width: 21.3333vw;
		right: 48.3vw;
		bottom: 23.92vw;
	}
}

/* /merge-build:con23 */
/* merge-build:hero */
/* .header_spacer(78) 를 되물린다 — hero 는 fixed 헤더 밑으로 파고드는 화면이고(영상 top:-78),
   문서 0 에서 시작해야 핀이 스크롤 0 에 바로 걸린다. 헤더가 불투명 흰색이라 보이는 그림은 불변 */
.hero {
  margin-top: calc(var(--px) * -78);
  background-color: var(--primary);
}

/* 화면 2장 가로 트랙 — 화면2 는 초기에 뷰포트 밖(오른쪽). 가로 이동 transform 은 애니 phase 소유 */
.hero__screen {
  flex: 0 0 100%;
}

/* 핀 동안 다음 섹션이 밑에 비치지 않게 두 화면 다 뷰포트를 채운다 — 형제가 stretch 라 브랜드 화면도 따라온다 */
.hero__screen--video {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.hero__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* HEIGHT: 풀화면 전환 — 시안 941 고정 대신 화면을 채우고 object-fit 이 크롭을 소유한다 */
  object-fit: cover;
}

/* 트랙에서 화면1 과 맞닿아 구분선의 left:-24 bleed 가 영상 우측에 흰 선으로 새 나간다 — 화면 안에서 자른다 */
.hero__screen--brand {
  justify-content: center;
  overflow: hidden;
  background-color: #2752ad;
  text-align: center;
  letter-spacing: -0.05em;
  color: #fff;
}

/* 좌우로 화면 밖까지 나가는 구분선 — 노란 판 뒤에 깔려야 해서 트리 선두인 ::before 가 소유한다 */
.hero__screen--brand::before {
  content: "";
  position: absolute;
  top: calc(50% + var(--px) * 54); /* 화면 높이가 100vh 로 바뀌어 절대 427 이 콘텐츠를 놓친다 — 중앙정렬된 그룹 기준 오프셋 */
  left: calc(var(--px) * -24);
  width: calc(var(--px) * 1952);
  height: 1px;
  background-color: rgba(255, 255, 255, .5);
}

.hero__title {
  margin-top: calc(var(--px) * 124);
  font-family: var(--font-nanumsquareneo);
  font-size: var(--displayM);
  font-weight: 900;
  line-height: 1.2;
}

.hero__title-em {
  color: #fef3a2;
}

/* .relative 는 위 ::before 구분선보다 나중에 칠하려는 것(둘 다 z-index:auto → 트리 순서로 결정) */
/* 안이 video 라 IMG:AUTO 가 폭·비율을 못 만든다 — 여기가 소유자다 */
.hero__panel {
  width: calc(var(--px) * 742);
  aspect-ratio: 742 / 416;
  margin-top: calc(var(--px) * 30);
}

.hero__panel-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__copy {
  margin-top: calc(var(--px) * 29);
  font-family: var(--font-pretendard);
  font-size: var(--headS);
  font-weight: 300;
  line-height: 1.45;
}

/* 장식 주전자도 중앙정렬된 그룹을 따라간다 — 화면 변 기준으로 두면 뷰포트 높이마다 판과 어긋난다 */
.hero__kettle-lead {
  top: calc(50% - var(--px) * 78);
  left: calc(var(--px) * 505);
}

.hero__kettle-trail {
  top: calc(50% + var(--px) * 179);
  right: calc(var(--px) * 533);
}

/* IMG:AUTO hero */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.hero__kettle-lead {
    width: calc(var(--px)*99);
    aspect-ratio: 99 / 107;
}

.hero__kettle-trail {
    width: calc(var(--px)*97);
    aspect-ratio: 97 / 86;
}
/* /IMG:AUTO hero END */


@media (max-width: 599px) {
  /* 모바일은 핀이 없고 세로 스택이라 헤더 아래에서 시작한다 */
  .hero {
    margin-top: 0;
  }

  .hero_iner {
    flex-direction: column;
  }

  /* column 에서 flex-basis 100% 는 높이로 해석된다 */
  .hero__screen {
    flex: 0 0 auto;
  }

  /* 모바일은 핀이 없어 풀화면 근거가 없다 — PC 의 100vh 를 되돌리고 시안 비율로 */
  .hero__screen--video {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  /* 모바일은 세로 스택이라 옆으로 샐 화면1 이 없다 — 구분선 bleed 를 자르지 않는다 */
  .hero__screen--brand {
    padding: 19.84vw 6vw 18.56vw;
    overflow: visible;
  }

  .hero__screen--brand::before {
    top: 69.4551vw;
    left: -6vw;
    width: 112vw;
  }

  .hero__title {
    margin-top: 0;
  }

  .hero__panel {
    width: 88vw;
    margin-top: 4.8vw;
  }

  .hero__copy {
    margin-top: 4.64vw;
  }

  .hero__kettle-lead {
    width: 11.7412vw;
    top: 53.8001vw;
    left: 0;
  }

  .hero__kettle-trail {
    width: 11.504vw;
    top: 83.4496vw;
    right: 0.3073vw;
  }
}

/* /merge-build:hero */