@charset "UTF-8";

/* merge-build.js 산출물 — 납품 시 css/sections/*.css 전량이 이 아래로 합쳐진다. 손으로 쓰지 않는다(CLAUDE.md 원칙 14). */
/* merge-build:con02 */
.con02 {
	overflow-x: clip;
	overflow-y: visible;
	background-color: #ffffff;
	padding-top: calc(var(--px) * 175);
}

/* 모바일: layout 의 grid 중첩을 풀어 stage → points 세로 스택, points 는 1열 */
.con02__layout {
	display: grid;
	margin-top: calc(var(--px) * 29.44);

	.con02__stage,
	.con02__points {
		grid-area: 1 / 1;
	}
}

/* .front 유틸의 z-index:10 을 이 섹션에서만 푼다 — 그 컨텍스트가 con02 내용을 한 층으로 묶어, 아래로 bleed 한 크림패널까지 con03 배경 아치 위로 올렸다. 풀면 패널은 아치 밑(layer6 트리순), 도넛은 z:1 로 아치 위가 된다 */
.con02 .con02_iner {
	z-index: auto;
}

.con02__stage {
	width: calc(var(--px) * 650);
}

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

.con02__arch {
	z-index: 1; /* con03 .bg_img 가 섹션 위로 bleed 해 링 뒷장을 덮음 — donuts(z:1, DOM 뒤)보다는 밑 */
	bottom: calc(var(--px) * 3);
	left: calc(var(--px) * -36);
}

/* 마지막 도넛이 섹션 아래로 23px 흘러 — 높이 체인에서 그만큼 뺀다 */
.con02__donuts {
	z-index: 1; /* 아래로 23px bleed 한 도넛3 이 con03 배경 아치 위에 와야 함 — 크림패널(.con02__panel)은 반대로 아치 밑이 맞아 섹션째 올리지 않는다 */
	padding-top: calc(var(--px) * 65);
	gap: calc(var(--px) * 69);
	margin-bottom: calc(var(--px) * -23);
}

/* 3D 도넛 1개가 세 자리를 스크롤로 지나간다 — y 는 ani_con02 가 소유, 폭 = 최대 도넛(386) + 회전 여유 */
.con02__donut3d {
	top: 0;
	left: 50%;
	width: calc(var(--px) * 540);
	aspect-ratio: 1 / 1;
	margin-left: calc(var(--px) * -270);
	pointer-events: none;

	/* 맨 아래 자리에 선 뒤에만 드래그 회전 — 터치는 세로 스크롤을 브라우저에 남긴다 */
	&.is-grab {
		pointer-events: auto;
		cursor: grab;
		touch-action: pan-y;
	}

	&.is-dragging {
		cursor: grabbing;
	}
}

/* 3D 링 뒷장 — 앞장(.con03__ring3d)과 같은 764×300 프레임으로 겹치도록 박스 밖으로 확장 */
.con02__ring3d {
	top: calc(var(--px) * -16);
	left: calc(var(--px) * -20.5);
	width: calc(var(--px) * 764);
	aspect-ratio: 764 / 300;
	pointer-events: none;
}

.con02__arch.is-3d img {
	visibility: hidden;
}

.con02__donuts.is-3d .con02__donut img {
	visibility: hidden;
}

.con02__points {
	display: grid;
	grid-template-columns: calc(var(--px) * 505) 1fr calc(var(--px) * 510);
	grid-template-rows: auto auto auto;
	align-content: start;
}

.con02__point--taste {
	grid-row: 1;
	grid-column: 3;
	margin-top: calc(var(--px) * 81);
}

.con02__point--share {
	grid-row: 2;
	grid-column: 1;
	margin-top: calc(var(--px) * 96);
}

.con02__point--value {
	grid-row: 3;
	grid-column: 3;
	margin-top: calc(var(--px) * 160.12);
}

.con02__point-num {
	width: calc(var(--px) * 32);
	padding-block: calc(var(--px) * 13.5);
	border-radius: calc(var(--px) * 16);
	background-color: var(--secondary);
}

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

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

/* 원형 이미지 커서 — 좌표는 ani_con02 가 소유, 등장·교체는 클래스 토글 */
.con02.is-cursor .con02__point {
	cursor: none;
}

.con02__cursor {
	position: fixed;
	z-index: 2; /* donuts·arch(z:1) 위 — 커서가 섹션 내 모든 층을 덮어야 함 */
	top: 0;
	left: 0;
	pointer-events: none;
}

.con02__cursor-inner {
	display: grid;
	width: calc(var(--px) * 247);
	aspect-ratio: 1 / 1;
	transform: scale(0);
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.con02__cursor.is-show .con02__cursor-inner {
	transform: scale(1);
}

.con02__cursor-img {
	grid-area: 1 / 1;
	opacity: 0;
	transition: opacity 0.35s ease;

	&.is-on {
		opacity: 1;
	}
}

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

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

.con02__donut.con02__donut--side {
    width: calc(var(--px)*386);
    aspect-ratio: 386 / 152;
}

.con02__donut.con02__donut--angle {
    width: calc(var(--px)*376);
    aspect-ratio: 376 / 301;
}

.con02__donut.con02__donut--top {
    width: calc(var(--px)*374);
    aspect-ratio: 374 / 371;
}

.con02__cursor-img.con02__cursor-img--taste,
.con02__cursor-img.con02__cursor-img--share,
.con02__cursor-img.con02__cursor-img--value {
    width: calc(var(--px)*247);
    aspect-ratio: 247 / 247;
}
/* /IMG:AUTO con02 END */

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

.con02__title-accent {
    color: #166938;
}

.con02__point-num {
    font-family: var(--font-anton);
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: 0.025em;
    line-height: 1;
    text-align: center;
    color: #ffffff;
}

.con02__point-title.con02__point-title--taste,
.con02__point-title.con02__point-title--share,
.con02__point-title.con02__point-title--value {
    font-family: var(--font-suit);
    font-size: var(--titleXS);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.82;
    text-align: center;
    color: #000000;
}

.con02__point-accent.con02__point-accent--taste,
.con02__point-accent.con02__point-accent--share,
.con02__point-accent.con02__point-accent--value {
    color: #cf152d;
}

.con02__point-desc {
    font-family: var(--font-suit);
    font-size: var(--subheadM);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.36;
    color: #000000;
}

.con02__point-desc.con02__point-desc--right {
    font-family: var(--font-suit);
    font-size: var(--subheadM);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.36;
    text-align: right;
    color: #000000;
}
/* /FONT:AUTO con02 END */

/* INK:AUTO con02 */
.con02__point-title.con02__point-title--value { margin-top: calc(var(--px) * -5.03); margin-bottom: calc(var(--px) * -15.02); } /* base 10,0 */
.con02__point-title.con02__point-title--taste { margin-top: calc(var(--px) * -4.03); margin-bottom: calc(var(--px) * -15.02); } /* base 10,0 */
.con02__point-title.con02__point-title--share { margin-top: calc(var(--px) * -4.03); margin-bottom: calc(var(--px) * -15.02); } /* base 10,0 */
.con02__title-accent { margin-top: calc(var(--px) * -4.27); margin-bottom: calc(var(--px) * -16.72); } /* base 0,0 */
.con02__point-accent.con02__point-accent--share { margin-top: calc(var(--px) * -15.03); margin-bottom: calc(var(--px) * 3.03); } /* base 0,0 */
.con02__point-accent.con02__point-accent--value { margin-top: calc(var(--px) * -15.03); margin-bottom: calc(var(--px) * 3.03); } /* base 0,0 */
.con02__point-accent.con02__point-accent--taste { margin-top: calc(var(--px) * -14.03); margin-bottom: calc(var(--px) * 3.03); } /* base 0,0 */
.con02__point-desc.con02__point-desc--right { margin-top: calc(var(--px) * 31.04); margin-bottom: calc(var(--px) * -4.93); } /* base 36,0 */
.con02__point-desc { margin-top: calc(var(--px) * 31.04); margin-bottom: calc(var(--px) * -4.93); } /* base 36,0 */
.con02__title { margin-top: calc(var(--px) * -4.27); margin-bottom: calc(var(--px) * -5.27); } /* base 0,0 */
/* /INK:AUTO con02 END */

@media (max-width:599px) {
	.con02 { padding-top: 21.3333vw; }
	.con02__title { font-size: var(--titleXL); margin-block: 0; }
	.con02__layout { margin-top: 8.5333vw; }
	.con02__layout .con02__points { grid-area: 1 / 1; }
	.con02__layout .con02__stage { grid-area: 2 / 1; width: 66vw; margin-top: 10.6667vw; }
	.con02__panel { width: 66vw; }
	.con02__arch { width: 73.4123vw; bottom: 0.3046vw; left: -3.6554vw; }
	.con02__donuts { padding-top: 6.6vw; gap: 7.0062vw; margin-bottom: -2.3354vw; }
	.con02__donut.con02__donut--side { width: 39.1938vw; }
	.con02__donut.con02__donut--angle { width: 38.1785vw; }
	.con02__donut.con02__donut--top { width: 37.9754vw; }
	.con02__donut3d { width: 54.8308vw; margin-left: -27.4154vw; }
	.con02__ring3d { top: -1.6246vw; left: -2.0816vw; width: 77.5758vw; }
	.con02__points { display: flex; flex-direction: column; gap: 3.2vw; padding-inline: 5.3333vw; }
	.con02__point.con02__point--taste, .con02__point.con02__point--share, .con02__point.con02__point--value { margin-top: 0; align-items: center; padding: 6.4vw 4.2667vw; border-radius: 4.2667vw; background-color: color-mix(in srgb, var(--tertiary) 45%, white); }
	.con02__point-num { width: 7.4667vw; padding-block: 3.2vw; border-radius: 4.2667vw; }
	.con02__point .con02__point-title { margin-top: 2.1333vw; margin-bottom: 0; line-height: 1.4; }
	.con02__point .con02__point-desc { margin-top: 1.6vw; margin-bottom: 0; }
	.con02__point .con02__point-desc--right { text-align: center; }
}

/* /merge-build:con02 */
/* merge-build:con03 */
.con03 {
	background-color: #ffffff;
	overflow-x: clip;
	overflow-y: visible;
}

/* 아치가 PSD 상 섹션 위로 76px 올라가 con02 하단에 걸친다 — 자산도 878 로 굽고 그만큼 끌어올린다 */
.con03 .bg_img {
	top: calc(var(--px) * -76);
	height: calc(var(--px) * 878);
}

.con03_iner {
	padding-top: calc(var(--px) * 245);
}

/* 모바일: 섹션 위로 넘긴 bleed 를 풀고 intro 위 흐름으로 내린다 */
.con03__logotype {
	top: calc(var(--px) * -48);
	left: 0;
	right: 0;
}

/* 3D 링 앞장 — 뒷장(.con02__ring3d)과 같은 764×300 프레임, 두 박스 top 차 86 만큼 위로 */
.con03__ring3d {
	top: calc(var(--px) * -102);
	left: calc(var(--px) * -20.5);
	width: calc(var(--px) * 764);
	aspect-ratio: 764 / 300;
	pointer-events: none;
}

.con03__logotype.is-3d img {
	visibility: hidden;
}

.con03__lead {
margin-top: calc(var(--px) * 34);
}

.con03__statement {
	margin-top: calc(var(--px) * 29);
}

.con03__marquee {
	margin-top: calc(var(--px) * 121);
	padding-top: calc(var(--px) * 33);
	padding-bottom: calc(var(--px) * 32);
	border-top: 1px solid #000000;
	background-color: var(--primary);
	overflow: hidden;
}

/* v-marquee-half 가 붙을 겹 — 2세트 복제 + translateX(-50%) */
.con03__marquee-track {
	width: max-content;
	margin-left: calc(var(--px) * -10);
}

.con03__marquee-set {
	flex-shrink: 0;
}

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

.con03__plate {
    width: calc(var(--px)*209);
    aspect-ratio: 209 / 130;
}

.con03__marquee-set {
    width: calc(var(--px)*1980);
    aspect-ratio: 1980 / 44;
}
/* /IMG:AUTO con03 END */

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

.con03__lead {
    font-size: var(--headS);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.67;
}

.con03__statement {
    font-size: var(--titleXL);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.22;
}

.con03__statement-accent {
    color: #f5e6c1;
}
/* /FONT:AUTO con03 END */

/* INK:AUTO con03 */
.con03__lead { margin-top: calc(var(--px) * 23.12); margin-bottom: calc(var(--px) * -9.87); } /* base 34,0 */
.con03__statement-accent { margin-top: calc(var(--px) * -8); margin-bottom: calc(var(--px) * -9); } /* base 0,0 */
.con03__statement { margin-top: calc(var(--px) * 21); margin-bottom: calc(var(--px) * -7); } /* base 29,0 */
/* /INK:AUTO con03 END */

@media (max-width:599px) {
	.con03 .bg_img { top: -7.7173vw; height: 192.1773vw; }
	.con03_iner { padding-top: 24.8773vw; }
	.con03__logotype { top: -4.8738vw; width: 73.4123vw; }
	.con03__ring3d { top: -10.357vw; left: -2.0816vw; width: 77.5758vw; }
	.con03__plate { width: 40vw; }
	.con03__intro { padding-inline: 5.3333vw; }
	.con03__lead { margin-top: 3.2vw; margin-bottom: -1.6vw; }
	.con03__statement { font-size: var(--titleXS); margin-top: 3.2vw; margin-bottom: -1.0667vw; }
	.con03__statement-accent { margin-top: 0; margin-bottom: 0; }
	.con03__marquee { margin-top: 17.0667vw; padding-top: 5.3333vw; padding-bottom: 5.3333vw; }
	.con03__marquee-track { margin-left: -1.6vw; }
	.con03__marquee-set { width: 320vw; }
}

/* /merge-build:con03 */
/* merge-build:con04 */
/* con04 — HOT NOW 네온 + 크림 패널 + 컨베이어 벨트 */
/* 모바일 전환 시: 네온·패널은 폭 100% 로, .con04__intro 는 absolute 해제해 패널 위 flow 로 접는다 */

.con04 {
	background-color: #000000;
}

.con04__bg {
	opacity: 0.2; /* 네온 점등 모션이 0.2→0.35 로 올린다 — 자산에 굽지 않음 */
}

.con04_iner {
	padding-top: calc(var(--px)*76);
}

.con04__panel {
	width: calc(var(--px)*1701);
	margin-top: calc(var(--px)*55);
	margin-left: auto;
	margin-right: calc(var(--px)*92); /* 우측 앵커 — 아래 con05 도로(right 기준)와 clientWidth 1906~1920 에서도 같은 x */
}

.con04__road {
	right: calc(var(--px)*317);
	bottom: 0;
}

.con04__belt {
	right: calc(var(--px)*-177);
	bottom: calc(var(--px)*60);
}

.con04__conveyor {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	clip-path: inset(-100vh 0 -100vh 0);
	pointer-events: none;
}

.con04__track {
	bottom: calc(var(--px)*292);
	left: calc(var(--px)*-45);
	gap: calc(var(--px)*30);
}

.con04__track.v-marquee-half-rev {
	animation-duration: 14s; /* main/index.html 이 vweb-anim.css 를 섹션 CSS 뒤에 재로드해 특이도로 이김 */
}

.con04__donut {
	flex-shrink: 0;
}

.con04__video {
	right: calc(var(--px)*115);
	bottom: calc(var(--px)*221);
	width: calc(var(--px)*400); /* video 라 IMG:AUTO 가 소유하지 않음 */
	aspect-ratio: 1 / 1;
}

.con04__video-media {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%; /* RADIUS: 원형 poster 컷과 같은 원 마스크 */
	object-fit: cover;
	transition: opacity .35s ease-out, transform .35s ease-out;
}

/* 커서 대체 — 래퍼 transform 은 ani_con04 의 커서 추적이 소유 */
@media (hover: hover) and (min-width: 600px) {
	.con04__belt { cursor: none; }
	.con04__video { top: 0; right: auto; bottom: auto; left: 0; pointer-events: none; }
	.con04__video-media { opacity: 0; transform: scale(.6); }
	.con04__panel.is-video-on .con04__video-media { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.con04__track { animation: none; }
	.con04__video-media { transition: none; }
}

.con04__intro {
	top: calc(var(--px)*676);
	right: 0;
	left: 0;
}

.con04__headline {
	margin-top: calc(var(--px)*34);
}

.con04__desc {
	margin-top: calc(var(--px)*44);
}

.con04__desc-tail {
	display: block;
	margin-top: calc(var(--px)*32);
}

.con04__neon img {
	animation: con04-flicker 4s infinite steps(1, end);
}

@keyframes con04-flicker {
	0%, 100% { opacity: 1; }
	31% { opacity: 0.3; }
	33% { opacity: 1; }
	35% { opacity: 0.6; }
	37% { opacity: 1; }
	72% { opacity: 0.15; }
	74% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.con04__neon img { animation: none; }
}

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

.con04__panel-bg {
    width: calc(var(--px)*1701);
    aspect-ratio: 1701 / 996;
}

.con04__road {
    width: calc(var(--px)*1018);
    aspect-ratio: 1018 / 336;
}

.con04__belt {
    width: calc(var(--px)*2075);
    aspect-ratio: 2075 / 329;
}

.con04__donut {
    width: calc(var(--px)*106);
    aspect-ratio: 106 / 71;
}

.con04__brand {
    width: calc(var(--px)*157);
    aspect-ratio: 157 / 55;
}
/* /IMG:AUTO con04 END */

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

.con04__headline {
    font-size: var(--displayM);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.07;
}

.con04__headline-accent {
    color: #cf152d;
}

.con04__desc {
    font-size: var(--subheadM);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.46;
}
/* /FONT:AUTO con04 END */

/* INK:AUTO con04 */
.con04__headline-accent { margin-top: calc(var(--px) * -5.27); margin-bottom: calc(var(--px) * -16.72); } /* base 0,0 */
.con04__desc { margin-top: calc(var(--px) * 37.94); margin-bottom: calc(var(--px) * 7.2); } /* base 44,0 */
.con04__desc-tail { margin-top: calc(var(--px) * 25.94); margin-bottom: calc(var(--px) * -6.04); } /* base 32,0 */
.con04__headline { margin-top: calc(var(--px) * 29.73); margin-bottom: calc(var(--px) * -5.27); } /* base 34,0 */
/* /INK:AUTO con04 END */

@media (max-width:599px) {
	.con04_iner { display: flex; flex-direction: column; padding-top: 12.8vw; }
	.con04__neon { order: 1; width: 60vw; }
	.con04__intro {
		order: 2;
		position: relative;
		top: auto;
		right: auto;
		left: auto;
		margin-top: 8.5333vw;
		padding: 10.6667vw 6.4vw 21.8667vw; /* 하단 = 패널 겹침 17.6vw + 16px */
		border-radius: 17.6vw 17.6vw 0 0;
		background: linear-gradient(to bottom, rgb(251,238,206), rgb(254,247,229));
	}
	.con04 { overflow-x: clip; }
	/* 패널 자산 대신 intro 그라디언트 끝색을 이어 붙이고 벨트는 1.3배로 키워 영상 쪽에 맞춘다 */
	.con04__panel { order: 3; width: 130vw; height: 50vw; margin-top: -17.6vw; margin-left: -26.5381vw; background-color: rgb(254,247,229); }
	.con04__belt { right: -13.5273vw; bottom: 4.5855vw; width: 158.5832vw; }
	.con04__track { bottom: 22.3163vw; left: 0.9314vw; gap: 2.1334vw; }
	.con04__donut { width: 13.3333vw; }
	.con04__video { right: 8.7889vw; bottom: 16.8901vw; width: 30.5703vw; }
	.con04__brand { width: 30vw; }
	.con04__headline { margin-top: 4.2667vw; margin-bottom: 0; }
	.con04__headline-accent { margin-top: 0; margin-bottom: 0; }
	.con04__desc { margin-top: 4.2667vw; margin-bottom: 0; }
	.con04__desc-tail { margin-top: 3.2vw; margin-bottom: 0; }
}

/* /merge-build:con04 */
/* merge-build:con05 */
.con05 {
	background-color: #fef7e5;
}

.con05_iner {
	padding-bottom: calc(var(--px)*1148);
}

.con05__head {
	margin: calc(var(--px)*204) 0 0 calc(var(--px)*232);
	text-transform: uppercase;
}

.con05__road {
	top: calc(var(--px)*-336);
	right: calc(var(--px)*409);
}

.con05__milestone--1937 {
	top: calc(var(--px)*336);
	right: calc(var(--px)*105);
	width: calc(var(--px)*378);
}

.con05__milestone--40s50s {
	top: calc(var(--px)*417);
	left: calc(var(--px)*445);
	width: calc(var(--px)*542);
}

.con05__milestone--60s70s {
	top: calc(var(--px)*739);
	left: calc(var(--px)*111);
	width: calc(var(--px)*309);
}

.con05__milestone--80s90s {
	top: calc(var(--px)*924);
	right: calc(var(--px)*233);
	width: calc(var(--px)*447);
}

.con05__milestone--80s90s .con05__milestone-title {
	word-spacing: calc(var(--px)*-1);
}

.con05__milestone--today {
	top: calc(var(--px)*1221);
	left: calc(var(--px)*641);
	width: calc(var(--px)*356);
}

.con05__era {
	width: calc(var(--px)*144);
	border-radius: calc(var(--px)*17);
	background-color: var(--primary);
}

.con05__era--date {
	width: calc(var(--px)*180);
}

.con05__era--today {
	background-color: var(--secondary);
}

.con05__milestone-title {
	margin-top: calc(var(--px)*21.5);
}

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

.con05__photo-slot {
	width: calc(var(--px)*135);
	height: calc(var(--px)*135); /* HEIGHT: 사진 미삽입 플레이스홀더 — 자식 콘텐츠가 없어 높이를 만들 게 없다 */
	border-radius: 50%;

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 50%;
		background-color: #303030;
		opacity: .102;
	}
}

.con05__photo-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.con05__photo-slot--40s50s {
	top: calc(var(--px)*591);
	right: calc(var(--px)*858);
}

.con05__photo-slot--60s70s {
	top: calc(var(--px)*681);
	left: calc(var(--px)*470);
}

.con05__photo-slot--80s90s {
	top: calc(var(--px)*892);
	right: calc(var(--px)*760);
}

.con05__photo-slot--today {
	top: calc(var(--px)*1170);
	right: calc(var(--px)*716);
}

.con05__photo {
	top: calc(var(--px)*273);
	right: calc(var(--px)*525);
}

.con05__donut {
	top: calc(var(--px)*106);
	right: calc(var(--px)*685);
}

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

.con05__photo {
    width: calc(var(--px)*159);
    aspect-ratio: 159 / 159;
}

.con05__donut {
    width: calc(var(--px)*146);
    aspect-ratio: 146 / 98;
}
/* /IMG:AUTO con05 END */

/* FONT:AUTO con05 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con05__head {
    font-family: var(--font-anton);
    font-size: calc(var(--px)*70.39);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.1;
    color: #000000;
}

.con05__head-accent {
    color: #166938;
}

.con05__milestone.con05__milestone--1937,
.con05__milestone.con05__milestone--40s50s,
.con05__milestone.con05__milestone--60s70s,
.con05__milestone.con05__milestone--80s90s,
.con05__milestone.con05__milestone--today {
    font-family: var(--font-suit);
}

.con05__era.con05__era--date,
.con05__era,
.con05__era.con05__era--today {
    font-size: var(--bodyL);
    font-weight: 700;
    letter-spacing: 0em;
    line-height: 1.89;  /* OVR */
    text-align: center;
    color: #ffffff;
}

.con05__milestone-title {
    font-size: var(--headM);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1;
    color: #000000;
}

.con05__milestone-desc {
    font-size: var(--bodyXL);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.4;
    color: #000000;
}

.con05__milestone-desc.con05__milestone-desc--right {
    font-size: var(--bodyXL);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.4;
    text-align: right;
    color: #000000;
}
/* /FONT:AUTO con05 END */

/* INK:AUTO con05 */
.con05__head-accent { margin-top: calc(var(--px) * -7.71); margin-bottom: calc(var(--px) * -36.29); } /* base 0,0 */
.con05__head { margin-top: calc(var(--px) * 196.29); margin-bottom: calc(var(--px) * -7.7); } /* base 204,0 */
.con05__milestone-desc.con05__milestone-desc--right { margin-top: calc(var(--px) * 18.5); margin-bottom: calc(var(--px) * -4.5); } /* base 23,0 */
.con05__milestone-desc { margin-top: calc(var(--px) * 18.5); margin-bottom: calc(var(--px) * -4.5); } /* base 23,0 */
.con05__milestone-title { margin-top: calc(var(--px) * 20.5); margin-bottom: calc(var(--px) * -1); } /* base 21.5,0 */
/* /INK:AUTO con05 END */

@media (max-width:599px) {
	.con05_iner { align-items: center; gap: 4.2667vw; padding: 0 5.3333vw 21.3333vw; }
	.con05__head { order: 1; margin: 17.0667vw 0 -1.021vw; font-size: 9.3333vw; /* PC 70.39px 가 토큰 밖이라 --px 로 1/5 붕괴 — con04 헤드라인과 같은 35px */ }
	.con05__head-accent { margin-top: -1.0223vw; margin-bottom: -4.8118vw; }
	.con05__photo { order: 2; position: relative; top: auto; right: auto; width: 42vw; }
	.con05__milestone--1937 { order: 3; }
	.con05__photo-slot--40s50s { order: 4; }
	.con05__milestone--40s50s { order: 5; }
	.con05__photo-slot--60s70s { order: 6; left: auto; }
	.con05__milestone--60s70s { order: 7; }
	.con05__photo-slot--80s90s { order: 8; }
	.con05__milestone--80s90s { order: 9; }
	.con05__photo-slot--today { order: 10; }
	.con05__milestone--today { order: 11; }
	.con05__milestone { position: relative; top: auto; width: auto; align-items: center; margin-bottom: 8.5333vw; }
	.con05__milestone--1937, .con05__milestone--80s90s { right: auto; }
	.con05__milestone--40s50s, .con05__milestone--60s70s, .con05__milestone--today { left: auto; }
	.con05__milestone--80s90s .con05__milestone-title { word-spacing: normal; }
	.con05__photo-slot { position: relative; top: auto; width: 42vw; height: 42vw; /* HEIGHT: 사진 미삽입 플레이스홀더 — 자식 콘텐츠가 없어 높이를 만들 게 없다 */ }
	.con05__photo-slot--40s50s, .con05__photo-slot--80s90s, .con05__photo-slot--today { right: auto; }
	.con05__era { width: 23.04vw; border-radius: 3.2vw; }
	.con05__era--date { width: 28.8vw; }
	.con05__milestone-title { margin-top: 3.2vw; margin-bottom: -0.16vw; }
	.con05__milestone-desc, .con05__milestone-desc.con05__milestone-desc--right { margin-top: 3.2vw; margin-bottom: -0.72vw; }
	.con05__milestone-desc.con05__milestone-desc--right { text-align: center; }
}

/* /merge-build:con05 */
/* merge-build:con06 */
.con06 {
  overflow-x: clip;
  overflow-y: visible;
  padding-bottom: calc(var(--px)*40);
  background-color: #fef7e5;
  z-index: 1; /* 도넛 스택이 섹션 아래로 152px 흘러 다음 섹션 위에 놓여야 한다 — DOM 순서로는 못 이김 */
}

.con06_box {
  width: calc(var(--px)*1858);
  aspect-ratio: 1858 / 915;
  border-radius: calc(var(--px)*60);
  overflow: hidden;
  background-color: #000000;
}

.con06_box_iner {
  height: 100%;
  padding-left: calc(var(--px)*208);
}

.con06__dim {
  left: calc(var(--px)*930);
  right: 0;
  top: calc(var(--px)*279);
  bottom: calc(var(--px)*280);
  background: rgba(0, 0, 0, .549);
}

.con06__divider {
  left: calc(var(--px)*928);
  top: 0;
  bottom: calc(var(--px)*15);
  width: 1px;
  background: #fef7e5;
  opacity: .149;
}

/* 모바일: intro / states 2열 → flex-direction:column 1열 */
.con06__intro {
  flex: 0 0 calc(var(--px)*1035);
}

.con06__title {
  margin-top: calc(var(--px)*226);
}

.con06__notice {
  margin-top: auto;
  margin-bottom: calc(var(--px)*121);
}

/* 활성 슬라이드 중심 = 암막(.con06__dim 279~635) 중심 457 — 슬롯 간격 320 유지하려 높이 866 을 위아래 24.5 로 가운데 둠 */
.con06__slider {
  flex: 1 1 0;
  margin-block: calc(var(--px)*24.5);
}

.con06__slider .con06__state {
  display: flex; /* swiper-bundle 의 .swiper-slide{display:block} 이 뒤에 로드돼 .flex 를 이김 */
  justify-content: center;
  transition: opacity .5s ease-out;
}

.con06__state:not(.swiper-slide-active) {
  opacity: .2;
}

/* 아이콘·설명을 0fr↔1fr 로 접어 활성 전환 때 제목이 튀지 않고 미끄러지게 (display:none 은 즉시 사라져 시프트) */
.con06__state-fold {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .6s ease-out, opacity .5s ease-out;
}

.con06__state:not(.swiper-slide-active) .con06__state-fold {
  grid-template-rows: 0fr;
  opacity: 0;
}

.con06__state-fold-inner {
  min-height: 0;
  overflow: hidden; /* BFC — 안쪽 margin 까지 접힘 높이에 포함 */
}

.con06__state-icon {
  margin-bottom: calc(var(--px)*13);
}

.con06__state-desc {
  margin-top: calc(var(--px)*32);
}

.con06__stack {
  left: calc(var(--px)*572);
  bottom: calc(var(--px)*-192);
  z-index: 10; /* .front(z:10) 인 .con06_box_iner 뒤에 그려져야 도넛이 암막·구분선 위로 온다 */
}

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

.con06__stack {
    width: calc(var(--px)*761);
    aspect-ratio: 761 / 758;
}
/* /IMG:AUTO con06 END */

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

.con06__title {
    font-size: var(--displayM);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.15;
}

.con06__title-accent {
    color: #f5e6c1;
}

.con06__notice {
    font-size: var(--bodyL);
    font-weight: 300;
    letter-spacing: -0.04em;
    line-height: 1.47;
}

.con06__state-title {
    font-size: var(--titleS);
    font-weight: 800;
    letter-spacing: -0.008em;  /* OVR psd:-0.04em */
    line-height: 1.02;
}

.con06__state-desc {
    font-size: var(--subheadL);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 1.3;
}
/* /FONT:AUTO con06 END */

/* INK:AUTO con06 */
.con06__title-accent { margin-top: calc(var(--px) * -6.87); margin-bottom: calc(var(--px) * -14.12); } /* base 0,0 */
.con06__title { margin-top: calc(var(--px) * 219.13); margin-bottom: calc(var(--px) * -7.87); } /* base 226,0 */
.con06__notice { margin-top: calc(var(--px) * 375.61); margin-bottom: calc(var(--px) * 116.28); } /* base 380.34,121 */
.con06__state-desc { margin-top: calc(var(--px) * 27.55); margin-bottom: calc(var(--px) * -4.43); } /* base 32,0 */
.con06__state-title { margin-top: calc(var(--px) * -1.85); margin-bottom: calc(var(--px) * -0.84); } /* base 0,0 */
/* /INK:AUTO con06 END */

@media (max-width:599px) {
  .con06 { padding-bottom: 6.4vw; }
  .con06_box { width: 91.4667vw; height: auto; aspect-ratio: auto; border-radius: 8.5333vw; }
  .con06_box_iner { height: auto; padding: 12.8vw 5.3333vw; flex-direction: column; align-items: center; }
  .con06__intro { flex: none; align-items: center; }
  .con06__title { margin-top: 0; margin-bottom: 0; }
  .con06__title-accent { margin-top: 0; margin-bottom: 0; }
  .con06__notice { margin-top: 4.2667vw; margin-bottom: 0; }
  .con06__slider { flex: none; width: 100%; height: 96vw; margin-top: 8.5333vw; margin-bottom: 0; padding: 0 5.3333vw; border-radius: 4.2667vw; background: rgba(0, 0, 0, .549); /* HEIGHT: 세로 swiper 는 뷰포트 높이 고정 필요 — 승인 대기 */ }
  .con06__state { align-items: center; }
  .con06__state-icon { width: 7.4667vw; margin-bottom: 2.1333vw; }
  .con06__state-title { margin-top: 0; margin-bottom: 0; }
  .con06__state-desc { margin-top: 5.3333vw; margin-bottom: 0; }
  .con06__stack { position: relative; left: auto; bottom: auto; width: 64vw; margin-inline: auto; margin-top: -16vw; }
}

/* /merge-build:con06 */
/* merge-build:con07 */
/* con07 — 모바일: .con07__cards 를 flex-direction:column 으로 접고 카드 width:100% */
.con07 {
	padding-block: calc(var(--px)*235) calc(var(--px)*130);
}

.con07_iner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.con07__head {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.con07__eyebrow {
	padding-left: calc(var(--px)*8);
}

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

.con07__cards {
	display: flex;
	justify-content: center;
	gap: calc(var(--px)*47);
	margin-top: calc(var(--px)*41);
}

.con07__card {
	display: flex;
	flex-direction: column;
	width: calc(var(--px)*756);
	padding-block: calc(var(--px)*92) calc(var(--px)*107);
	background: #ffffff;
	border-radius: calc(var(--px)*40);
}

.con07__card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding-inline: calc(var(--px)*114) calc(var(--px)*89);
}

.con07__card-actions {
	display: flex;
	gap: calc(var(--px)*7);
	margin-top: calc(var(--px)*-4);
}

.con07__download {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--px)*10);
	width: calc(var(--px)*117);
	padding-block: calc(var(--px)*9);
	background: #000000;
	border-radius: calc(var(--px)*10);
	--hf-color: black;
}

.con07__download-icon {
	width: calc(var(--px)*10);
	aspect-ratio: 10 / 12;
}

.con07__card-logo {
	margin-top: calc(var(--px)*72);
	margin-inline: auto;
}

.con07__slogan {
	margin-top: calc(var(--px)*116);
}

.con07__card-desc {
	padding-left: calc(var(--px)*114);
}

.con07__card-desc--name {
	margin-top: calc(var(--px)*76);
}

.con07__card-desc--slogan {
	margin-top: calc(var(--px)*115);
}

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

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

.con07__eyebrow {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    letter-spacing: 0.1838em;  /* OVR */
    line-height: 1.2;  /* OVR */
    color: #fef7e5;
}

.con07__title {
    font-family: var(--font-suit);
    font-size: var(--displayM);
    letter-spacing: -0.06em;
    line-height: 1.07;
    color: #ffffff;
}

.con07__title-accent {
    color: #fef7e5;
}

.con07__card-head {
    font-family: var(--font-suit);
}

.con07__card-label {
    font-family: var(--font-suit);
    font-size: var(--headM);
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 1.3;  /* OVR */
    color: #000000;
}

.con07__card-actions {
    font-size: var(--bodyM);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.375;  /* OVR */
    color: #ffffff;
}

.con07__card-desc {
    font-family: var(--font-suit);
    font-size: var(--bodyXL);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.45;
    color: #000000;
}

.con07__slogan {
    font-family: var(--font-anton);
    font-size: var(--displayM);
    font-weight: 400;
    letter-spacing: 0.0083em;  /* OVR */
    line-height: 1.1;
    text-align: center;
    color: #000000;
}
/* /FONT:AUTO con07 END */

/* INK:AUTO con07 */
.con07__title-accent { margin-top: calc(var(--px) * -4.27); margin-bottom: calc(var(--px) * -16.72); } /* base 0,0 */
.con07__card-label { margin-top: calc(var(--px) * -5.5); margin-bottom: calc(var(--px) * -5.5); } /* base 0,0 */
.con07__card-desc.con07__card-desc--name { margin-top: calc(var(--px) * 71); margin-bottom: calc(var(--px) * -5); } /* base 76,0 */
.con07__card-desc.con07__card-desc--slogan { margin-top: calc(var(--px) * 110); margin-bottom: calc(var(--px) * -5); } /* base 115,0 */
.con07__title { margin-top: calc(var(--px) * 13.73); margin-bottom: calc(var(--px) * -5.27); } /* base 18,0 */
.con07__eyebrow { margin-top: calc(var(--px) * -3.1); margin-bottom: calc(var(--px) * -4.09); } /* base 0,0 */
.con07__slogan { margin-top: calc(var(--px) * 109.75); margin-bottom: calc(var(--px) * -0.25); } /* base 116,0 */
/* /INK:AUTO con07 END */

@media (max-width:599px) {
	.con07 { padding-block: 21.3333vw; }
	.con07_iner { padding-inline: 5.3333vw; }
	.con07__cards { flex-direction: column; gap: 4.2667vw; width: 100%; margin-top: 6.4vw; }
	.con07__card { width: 100%; padding: 10.6667vw 6.4vw; border-radius: 6.4vw; }
	.con07__card-head { flex-direction: column; align-items: center; gap: 3.2vw; padding-inline: 0; }
	.con07__card-actions { gap: 2.1333vw; margin-top: 0; }
	.con07__download { width: auto; gap: 1.6vw; padding: 2.1333vw 3.2vw; border-radius: 2.1333vw; }
	.con07__download-icon { width: 2.6667vw; }
	.con07__card-logo { width: 64.5333vw; margin-top: 10.6667vw; }
	.con07__card-desc { padding-left: 0; }
	/* INK 모바일 재산출 = base + 잉크오프셋×(모바일폰트/PC폰트) */
	.con07__title-accent { margin-top: -0.6131vw; margin-bottom: -2.4008vw; }
	.con07__card-label { margin-top: -0.88vw; margin-bottom: -0.88vw; }
	.con07__card-desc.con07__card-desc--name { margin-top: 9.6vw; margin-bottom: -1.0667vw; }
	.con07__card-desc.con07__card-desc--slogan { margin-top: 11.7333vw; margin-bottom: -1.0667vw; }
	.con07__title { margin-top: 1.5202vw; margin-bottom: -0.7567vw; }
	.con07__eyebrow { padding-left: 0; margin-top: -0.7233vw; margin-bottom: -0.9543vw; }
	.con07__slogan { margin-top: 11.9026vw; margin-bottom: -0.0359vw; }
}

/* /merge-build:con07 */
/* merge-build:con08 */
/* con08 — 전폭 영상 밴드 */
.con08 {
  background-color: #000;
}

.con08__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

@media (max-width:599px) {
  /* 전폭 밴드 유지 — 래퍼 폭만 100vw 로 override */
  .con08__media {
    width: 100vw;
    aspect-ratio: 4 / 3;
  }
}

/* /merge-build:con08 */
/* merge-build:con09 */
.con09 {
	background-color: #fff;
	padding: calc(var(--px)*68) 0 calc(var(--px)*140);
}

.con09__drip {
	top: calc(var(--px)*-624);
	left: calc(var(--px)*-8);
	z-index: 11; /* .front 가 z-index:10 으로 스택 컨텍스트를 만듦 — 크림이 도넛 위로 흘러야 한다 */
}

/* 3D 크림 — 드립 PNG 와 같은 자리·폭, 아래는 띠(.con09__band) 윗변까지 */
.con09__cream {
	top: calc(var(--px)*-624);
	bottom: calc(var(--px)*471);
	left: calc(var(--px)*-8);
	z-index: 11; /* .con09__drip 과 같은 층 — .front(z10) 위로 크림이 흘러야 한다 */
	width: calc(var(--px)*1920);
	pointer-events: none;
}

/* canvas 는 대체요소라 top/bottom 으로 안 늘어난다 — 래퍼가 늘고 canvas 가 채운다 */
.con09__cream-canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.con09.is-cream3d .con09__drip {
	visibility: hidden;
}

.con09__band {
	bottom: 0;
	left: 0;
}

/* 도넛은 타이틀 위 · 배지는 그 위 — PSD 쌓임 순서이고 DOM 순서로는 못 만든다(brand 가 badge 의 relative 앵커) */
.con09__donut {
	position: relative;
	z-index: 1;
}

/* 3D 도넛 — 기울기 여유로 래퍼의 130%, 래퍼 기준 % 라 모바일 폭 override 가 필요 없다 */
.con09__donut3d {
	top: -15.4%;
	left: -15%;
	width: 130%;
	aspect-ratio: 1 / 1;
	pointer-events: none;
}

.con09__donut.is-3d img {
	visibility: hidden;
}

.con09__brand {
	margin-top: calc(var(--px)*-54);
}

.con09__badge {
	z-index: 2; /* 도넛(z1)·드립 위 — 시안에서 배지가 맨 앞이다 */
	width: calc(var(--px)*175);
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--secondary);
}

.con09__lead {
	margin-top: calc(var(--px)*85);
}

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

.con09__desc-tail {
	display: block;
	margin-top: calc(var(--px)*35);
}

/* 모바일: 아래 stat 블록은 폭만 좁히고 세로 흐름 그대로 접는다 */
.con09__stat {
	width: calc(var(--px)*1189);
	margin-top: calc(var(--px)*115);
}

.con09__stat-strip {
	left: 0;
	bottom: calc(var(--px)*-41);
}

.con09__stat-panel {
	text-align: center;
	border-radius: calc(var(--px)*146) calc(var(--px)*146) calc(var(--px)*40) calc(var(--px)*40);
	background-color: var(--primary);
}

.con09__stat-count {
	margin-top: calc(var(--px)*90);
	margin-bottom: calc(var(--px)*61);
}

/* 세 글자덩이는 한 줄 문장 — inline 으로 두어야 baseline 이 폰트 메트릭으로 맞고 잉크 상쇄가 수렴한다 */
.con09__stat-value {
	position: relative;
	top: calc(var(--px)*7);
	margin-left: calc(var(--px)*19);
	margin-right: calc(var(--px)*20);
}

.con09__stat-label {
	top: calc(var(--px)*-63);
	right: 0;
	left: 0;
	width: calc(var(--px)*616);
	margin-inline: auto;
	padding-bottom: calc(var(--px)*32);
	border-radius: calc(var(--px)*27);
	background-color: #fff;
}

.con09__stat-icon {
	margin-top: calc(var(--px)*-14);
}

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

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

.con09__band {
    width: calc(var(--px)*1905);
    aspect-ratio: 1905 / 471;
}

.con09__donut {
    width: calc(var(--px)*656);
    aspect-ratio: 656 / 652;
}

.con09__stat-strip {
    width: calc(var(--px)*1189);
    aspect-ratio: 1189 / 92;
}

.con09__stat-icon {
    width: calc(var(--px)*102);
    aspect-ratio: 102 / 68;
}
/* /IMG:AUTO con09 END */

/* FONT:AUTO con09 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con09__title {
    font-family: var(--font-anton);
    font-size: calc(var(--px)*152.72);
    font-weight: 400;
    letter-spacing: 0.0169em; /* OVR */
    line-height: 1.18;
    color: #000000;
}

.con09__badge-text {
    font-family: var(--font-suit);
    font-size: var(--headM);
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 1.17;
    text-align: center;
    color: #ffffff;
}

.con09__lead {
    font-family: var(--font-suit);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.09;
    text-align: center;
    color: #000000;
}

.con09__desc {
    font-family: var(--font-suit);
    font-size: var(--subheadM);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.59;
    text-align: center;
    color: #000000;
}

.con09__stat-count {
    color: #f5e6c1;
}

.con09__stat-period,
.con09__stat-unit {
    font-family: var(--font-paperlogy);
    font-size: calc(var(--px)*110);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.14;
}

.con09__stat-value {
    font-family: var(--font-anton);
    font-size: calc(var(--px)*115.75);
    font-weight: 400;
    letter-spacing: -0.002em; /* OVR */
    line-height: 1.18;
}

.con09__stat-caption {
    font-family: var(--font-suit);
    font-size: var(--headS);
    font-weight: 800;
    letter-spacing: -0.035em; /* OVR */
    line-height: 2.17;
    text-align: center;
    color: #166938;
}
/* /FONT:AUTO con09 END */

/* INK:AUTO con09 */
.con09__stat-value { margin-top: calc(var(--px) * -16.29); margin-bottom: calc(var(--px) * -42.71); } /* base 0,0 */
.con09__title { margin-top: calc(var(--px) * -23.11); margin-bottom: calc(var(--px) * -24.1); } /* base 0,0 */
.con09__stat-unit { margin-top: calc(var(--px) * -15.7); margin-bottom: calc(var(--px) * -19.3); } /* base 0,0 */
.con09__stat-caption { margin-top: calc(var(--px) * -2.88); margin-bottom: calc(var(--px) * -16.87); } /* base 15,0 */
.con09__stat-period { margin-top: calc(var(--px) * -15.7); margin-bottom: calc(var(--px) * -17.3); } /* base 0,0 */
.con09__desc { margin-top: calc(var(--px) * 35.51); margin-bottom: calc(var(--px) * 8.5); } /* base 43,0 */
.con09__desc-tail { margin-top: calc(var(--px) * 27.51); margin-bottom: calc(var(--px) * -7.47); } /* base 35,0 */
.con09__lead { margin-top: calc(var(--px) * 80.03); margin-bottom: calc(var(--px) * -4.96); } /* base 85,0 */
/* /INK:AUTO con09 END */

@media (max-width:599px) {
	.con09 { padding: 8.5333vw 0 21.3333vw; }
	.con09_iner { padding-inline: 5.3333vw; }
	.con09__drip { top: -60vw; left: -30vw; width: 160vw; }
	.con09__cream { top: -60vw; bottom: 55.1995vw; left: -30vw; width: 160vw; }
	.con09__band { left: -61.63vw; width: 223.26vw; }
	.con09__donut { width: 60vw; }
	.con09__brand { margin-top: -4.2667vw; }
	.con09__title { font-size: 10.1333vw; margin-top: -1.5334vw; margin-bottom: -1.5991vw; }
	.con09__badge { width: 20vw; }
	.con09__badge-text { font-size: 3.2vw; }
	.con09__lead { margin-top: 12.0289vw; margin-bottom: -0.7696vw; }
	.con09__desc { margin-top: 5.0382vw; margin-bottom: 1.5455vw; }
	.con09__desc-tail { margin-top: 3.9715vw; margin-bottom: -1.3582vw; }
	.con09__stat { width: 89.3333vw; margin-top: 12.8vw; }
	.con09__stat-strip { bottom: -3.0803vw; width: 89.3333vw; }
	.con09__stat-panel { border-radius: 10.6667vw 10.6667vw 3.2vw 3.2vw; }
	.con09__stat-count { margin-top: 12.8vw; margin-bottom: 4.2667vw; }
	.con09__stat-period, .con09__stat-unit { font-size: 8.264vw; margin-top: -1.1795vw; margin-bottom: -1.45vw; }
	.con09__stat-period { margin-bottom: -1.2997vw; }
	.con09__stat-value { top: 0.5259vw; margin: -1.2238vw 1.5026vw -3.2087vw 1.4275vw; font-size: 8.696vw; }
	.con09__stat-label { top: -6.4vw; width: 64vw; padding-bottom: 2.1333vw; border-radius: 2.1333vw; }
	.con09__stat-icon { width: 12.8vw; margin-top: -2.1333vw; }
	.con09__stat-caption { margin-top: -0.5913vw; margin-bottom: -2.5707vw; }
}

/* /merge-build:con09 */
/* merge-build:con10 */
.con10 {
	background-color: var(--bg-color);
	padding: calc(var(--px)*33) 0 calc(var(--px)*21);
}

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

/* 핀 카드 스택 프레임 — 카드 1장 높이로 잘라 02·03 은 아래에서 대기, 카드 사이 gap 없음(이동거리 = 카드높이 × 인덱스) */
.con10__cards {
	width: calc(var(--px)*1561);
	height: calc(var(--px)*646); /* HEIGHT: 카드 스택 프레임 = 카드 1장 높이(핀 스크럽 애니 전제) */
	margin-top: calc(var(--px)*63);
	overflow: hidden;
}

.con10__card {
	flex-shrink: 0;
	height: calc(var(--px)*646); /* HEIGHT: 스택 카드 3장 높이 균일(시안 rect fillBox 1561x646) */
	border: 1px solid #eadab0;
	border-radius: calc(var(--px)*30);
	background-color: #fff;
	overflow: hidden; /* 라벨바 전폭 rect 와 슬라이드 트랙을 카드 라운드로 클립 */
}

.con10__card-label {
	padding: calc(var(--px)*1.5) 0 calc(var(--px)*7.5); /* line-height 3(=60px) + 상하 9 = 라벨바 69 */
	background-color: var(--secondary);
	text-transform: uppercase;
}

/* 모바일: card-body 를 column 으로 접고 visual 을 텍스트 아래로 */
.con10__card-body {
	padding: calc(var(--px)*53) 0 calc(var(--px)*68);
	gap: calc(var(--px)*14);
}

.con10__card-text {
	flex: 0 0 auto;
	width: calc(var(--px)*765);
	padding-top: calc(var(--px)*10);
}

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

.con10__card-desc {
	margin-top: calc(var(--px)*39);
}

.con10__visual {
	flex: 1 1 0; /* 프레임(454)보다 넓다 — 슬라이드 2번째가 카드 우변까지 흘러야 한다 */
}

/* 특이도 2 — swiper-bundle.min.css 의 .swiper{position:relative} 가 섹션 CSS 뒤에 실린다 */
.con10__visual .con10__slider {
	position: absolute;
	inset: 0;
}

/* 특이도 2 — swiper-bundle.min.css 가 섹션 CSS 뒤에 실려 .swiper-slide 기본값을 이긴다 */
.con10__slider .con10__slide {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--px)*454);
}

/* 음수 letter-spacing 이 마지막 글자 뒤에도 붙어 중앙정렬 잉크가 우로 밀린다 — 그만큼 되돌린다 */
.con10__title-accent {
	margin-right: 0.05em;
}

.con10__card-title-accent {
	margin-right: 0.09em;
}

.con10__card--theater {
	background-color: #000;
}

/* 시안 = 검정 카드 위 도넛 사진 23% — 영상도 같은 비율로 깐다 */
.con10__card-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.23;
	pointer-events: none;
}

.con10__card--md {
	background-color: var(--primary);
}

.con10__card-label--green {
	background-color: var(--primary);
}

.con10__card-label--black {
	background-color: #000;
}

.con10__theater-body,
.con10__md-body {
	font-family: var(--font-suit);
	color: #fff;
}

/* 모바일: theater-body 를 column 으로 접고 사진 박스를 텍스트 아래로 */
.con10__theater-body {
	padding: calc(var(--px)*142) calc(var(--px)*82) 0 calc(var(--px)*131);
}

.con10__theater {
	flex-shrink: 0;
	border-radius: calc(var(--px)*30);
	background-color: var(--secondary);
	overflow: hidden;
}

.con10__theater-caption {
	padding: calc(var(--px)*15) 0 calc(var(--px)*19);
	font-size: var(--subheadL);
	font-weight: 800;
	letter-spacing: -0.06em;
	line-height: 1.2;
}

.con10__value-text {
	flex: 1 1 0;
	margin-top: calc(var(--px)*17);
}

.con10__value-title {
	margin-top: calc(var(--px)*5);
	font-size: var(--displayS);
	font-weight: 800;
	letter-spacing: -0.06em;
	line-height: 1.09;
}

.con10__value-title-accent {
	color: var(--tertiary);
}

.con10__value-desc {
	margin-top: calc(var(--px)*21);
	font-size: var(--subheadM);
	font-weight: 400;
	letter-spacing: -0.06em;
	line-height: 1.46;
}

.con10__md-body {
	padding-top: calc(var(--px)*157);

	.con10__value-desc {
		margin-top: calc(var(--px)*34);
	}
}

/* MD 원형 세로 마퀴 — 라벨바 밑으로 위아래가 잘린다(카드 overflow:hidden) */
.con10__md {
	top: 0;
	bottom: 0;
	left: calc(var(--px)*125);
}

.con10__md-track {
	flex-shrink: 0;
	margin-top: calc(var(--px)*-94);
}

.con10__md-clone {
	top: 100%;
	left: 0;
}

.con10__md-item {
	flex-shrink: 0;
	width: calc(var(--px)*256);
	height: calc(var(--px)*256); /* HEIGHT: 원 도형 지름(이미지 래퍼가 아닌 도형이라 aspect-ratio 통로 없음) */
	margin-bottom: calc(var(--px)*34);
	border-radius: 50%;
	background-color: #fff;
	overflow: hidden;
}

.con10__md-hand {
	right: calc(var(--px)*-69);
	bottom: calc(var(--px)*74);
}

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

.con10__card-badge {
    width: calc(var(--px)*159);
    aspect-ratio: 159 / 18;
}

.con10__visual-frame {
    width: calc(var(--px)*454);
    aspect-ratio: 454 / 454;
}

.con10__slide-img.con10__slide-img--drizzle {
    width: calc(var(--px)*303);
    aspect-ratio: 303 / 240;
}

.con10__slide-img.con10__slide-img--crumble {
    width: calc(var(--px)*315);
    aspect-ratio: 315 / 244;
}

.con10__slide-img.con10__slide-img--sourcream {
    width: calc(var(--px)*346);
    aspect-ratio: 346 / 242;
}

.con10__slide-img.con10__slide-img--sugar {
    width: calc(var(--px)*329);
    aspect-ratio: 329 / 229;
}

.con10__slide-img.con10__slide-img--chocoholic {
    width: calc(var(--px)*333);
    aspect-ratio: 333 / 256;
}

.con10__slide-img.con10__slide-img--iced {
    width: calc(var(--px)*354);
    aspect-ratio: 354 / 244;
}

.con10__theater-photo {
    width: calc(var(--px)*640);
    aspect-ratio: 640 / 264;
}

.con10__value-icon {
    width: calc(var(--px)*58);
    aspect-ratio: 58 / 58;
}

.con10__md-img.con10__md-img--dispenser {
    width: calc(var(--px)*124);
    aspect-ratio: 124 / 205;
}

.con10__md-img.con10__md-img--bottle-blue {
    width: calc(var(--px)*121);
    aspect-ratio: 121 / 200;
}

.con10__md-img.con10__md-img--mug-box {
    width: calc(var(--px)*259);
    aspect-ratio: 259 / 259;
}

.con10__md-img.con10__md-img--tumbler {
    width: calc(var(--px)*66);
    aspect-ratio: 66 / 207;
}

.con10__md-img.con10__md-img--mug-set {
    width: calc(var(--px)*218);
    aspect-ratio: 218 / 57;
}

.con10__md-img.con10__md-img--bottle-white {
    width: calc(var(--px)*117);
    aspect-ratio: 117 / 191;
}

.con10__md-img.con10__md-img--signature-mug {
    width: calc(var(--px)*199);
    aspect-ratio: 199 / 132;
}

.con10__md-hand {
    width: calc(var(--px)*455);
    aspect-ratio: 455 / 438;
}
/* /IMG:AUTO con10 END */

.con10__slide-img--drizzle {
	margin-right: calc(var(--px)*2);
}

.con10__slide-img--crumble {
	margin-top: calc(var(--px)*11);
}

/* PSD 숨김 슬라이드 4종 — 크럼블 슬롯 중심 대비 레이어 세로 중심 오프셋 ×2 (가로는 부모 중앙정렬) */
.con10__slide-img--sourcream {
	margin-top: calc(var(--px)*7);
}

.con10__slide-img--sugar {
	margin-top: calc(var(--px)*14);
}

.con10__slide-img--iced {
	margin-top: calc(var(--px)*35);
}

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

.con10__title {
    font-family: var(--font-suit);
    font-size: var(--displayM);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.07;
    color: #000000;
}

.con10__title-accent,
.con10__card-title-accent {
    color: #166938;
}

.con10__card-label {
    font-family: var(--font-anton);
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: 0.3184em;  /* OVR psd:0.34em */
    line-height: 3;
    color: #ffffff;
}

.con10__card-text {
    font-family: var(--font-suit);
    color: #000000;
}

.con10__card-title {
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.09;
}

.con10__card-desc {
    font-size: var(--subheadM);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 1.46;
}
/* /FONT:AUTO con10 END */

/* INK:AUTO con10 */
.con10__title-accent { margin-top: calc(var(--px) * -4.27); margin-bottom: calc(var(--px) * -16.72); } /* base 0,0 */
.con10__card-title-accent { margin-top: calc(var(--px) * -4.98); margin-bottom: calc(var(--px) * -13.02); } /* base 0,0 */
.con10__card-desc { margin-top: calc(var(--px) * 32.94); margin-bottom: calc(var(--px) * -6.03); } /* base 39,0 */
.con10__card-title { margin-top: calc(var(--px) * 13.02); margin-bottom: calc(var(--px) * -4.95); } /* base 18,0 */
.con10__title { margin-top: calc(var(--px) * 15.73); margin-bottom: calc(var(--px) * -5.27); } /* base 20,0 */
/* /INK:AUTO con10 END */

@media (max-width:599px) {
	.con10 { padding: 5.3333vw 0 3.2vw; }
	.con10__logo { width: 25.76vw; }
	.con10__title { margin-top: 2.2587vw; margin-bottom: -0.7567vw; }
	.con10__title-accent { margin-top: -0.6131vw; margin-bottom: -2.4008vw; }
	.con10__cards { gap: 4.2667vw; width: 89.3333vw; height: auto; margin-top: 10.6667vw; overflow: visible; }
	.con10__card { height: auto; border-radius: 5.3333vw; }
	.con10__card-label { padding: 0.24vw 0 1.0667vw; }
	.con10__card-body { flex-direction: column; padding: 8.5333vw 0 10.6667vw; gap: 6.4vw; }
	.con10__card-text { width: auto; padding-top: 1.6vw; }
	.con10__card-badge { width: 25.44vw; }
	.con10__card-title { margin-top: 2.0201vw; margin-bottom: -0.768vw; }
	.con10__card-title-accent { margin-top: -0.7727vw; margin-bottom: -2.0201vw; }
	.con10__card-desc { margin-top: 5.9891vw; margin-bottom: -1.0964vw; }
	.con10__visual { flex: none; width: 64vw; }
	.con10__visual-frame { width: 100%; }
	.con10__visual .con10__slider { right: auto; width: 76.6667vw; }
	.con10__slider .con10__slide { width: 64vw; }
	.con10__slide-img.con10__slide-img--drizzle { width: 42.7137vw; }
	.con10__slide-img.con10__slide-img--crumble { width: 44.4053vw; }
	.con10__slide-img--crumble { margin-top: 1.6vw; }
	.con10__slide-img.con10__slide-img--sourcream { width: 48.7756vw; margin-top: 0.9868vw; }
	.con10__slide-img.con10__slide-img--sugar { width: 46.3791vw; margin-top: 1.9736vw; }
	.con10__slide-img.con10__slide-img--chocoholic { width: 46.943vw; }
	.con10__slide-img.con10__slide-img--iced { width: 49.9034vw; margin-top: 4.934vw; }
	.con10__slider .con10__slide:has(.con10__slide-img--crumble) { align-items: flex-start; } /* 슬라이드 간격이 좁아 중앙정렬이면 peek 이 6px 뿐 */
	.con10__theater-body { flex-direction: column-reverse; align-items: center; gap: 6.4vw; padding: 8.5333vw 5.3333vw 10.6667vw; }
	.con10__theater { width: 100%; border-radius: 4.2667vw; }
	.con10__theater-photo { width: 100%; }
	.con10__theater-caption { padding: 2.1333vw 0 3.2vw; }
	.con10__value-text { flex: none; margin-top: 0; }
	.con10__value-title { margin-top: 2.1333vw; }
	.con10__value-desc { margin-top: 3.2vw; }
	.con10__card--md { display: flex; flex-direction: column; padding-bottom: 10.6667vw; }
	.con10__value-icon { width: 8.5333vw; }
	.con10__md-body { padding: 8.5333vw 5.3333vw 6.4vw; }
	.con10__md-body .con10__value-desc { margin-top: 4.2667vw; }
	.con10__md { position: relative; top: auto; bottom: auto; left: auto; order: 1; }
	.con10__md .con10__md-track { flex-direction: row; width: max-content; margin-top: 0; animation-name: v-marquee-x; } /* 모바일 = 가로 흐름 · 세로 트랙의 v-marquee-y 를 같은 유틸 x 판으로 교체 */
	.con10__md-clone { top: 0; left: 100%; flex-direction: row; }
	.con10__md-item { width: 26.6667vw; height: 26.6667vw; margin: 0 3.2vw 0 0; /* HEIGHT: 원 도형 지름(PC 와 동일 사유) */ }
	.con10__md-img.con10__md-img--dispenser { width: 12.9167vw; }
	.con10__md-img.con10__md-img--bottle-blue { width: 12.6042vw; }
	.con10__md-img.con10__md-img--mug-box { width: 26.9792vw; }
	.con10__md-img.con10__md-img--tumbler { width: 6.875vw; }
	.con10__md-img.con10__md-img--mug-set { width: 22.7083vw; }
	.con10__md-img.con10__md-img--bottle-white { width: 12.1875vw; }
	.con10__md-img.con10__md-img--signature-mug { width: 20.7292vw; }
}

/* /merge-build:con10 */
/* merge-build:con11 */
/* con11 — 전국 공급망 (좌 텍스트 / 중앙 지도+거점핀 / 우 배송 그룹) */
/* 모바일: .con11_iner 를 column 으로 접고 배송 그룹(배지·로드바·트럭)은 지도 아래 행으로 내린다 */

.con11 {
  background-color: #fff;
  padding-bottom: calc(var(--px)*132);
}

.con11__intro {
  flex: 0 0 calc(var(--px)*755);
  padding-left: calc(var(--px)*230);
}

.con11__title {
  margin-top: calc(var(--px)*186);
  margin-left: calc(var(--px)*3);
}

.con11__desc {
  margin-top: calc(var(--px)*47);
}

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

/* 핀 65 를 중심으로 지름 145 — 활성 핀에서만 켜짐 */
.con11__pin-glow {
  inset: calc(var(--px)*-40);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .4s ease-out;
  background: radial-gradient(circle, color-mix(in srgb, var(--secondary) 0%, transparent) 30%, color-mix(in srgb, var(--secondary) 2.2%, transparent) 48%, color-mix(in srgb, var(--secondary) 4%, transparent) 63%, color-mix(in srgb, var(--secondary) 5.5%, transparent) 74%, color-mix(in srgb, var(--secondary) 7.6%, transparent) 85%, color-mix(in srgb, var(--secondary) 10.5%, transparent) 100%);
}

.con11__pin-list {
  inset: 0;
  list-style: none;
}

.con11__pin {
  width: calc(var(--px)*65); /* TEXT-WIDTH: 정원 거점 핀 — 지름 65 이 형태 자체라 라벨 길이가 폭을 정하면 안 된다 */
  height: calc(var(--px)*65); /* HEIGHT: 정원 거점 핀 — 지름이 곧 형태 */
  border-radius: 50%;
  background-color: #157035;
  transition: background-color .6s ease-in-out;
}

.con11__pin.is-on {
  z-index: 1; /* 형제 핀이 전부 absol 이라 DOM 뒤 핀이 활성 핀의 화살표·glow 를 덮는다 — 순서를 바꾸면 순환 순서가 깨짐 */
  background-color: var(--secondary);

  /* 핀 색이 바뀐 뒤(0.4초) 좌우 화살표가 바깥으로 동시에 벌어지고 머문다 · backwards = 대기 중 숨김 유지 */
  .con11__arrow {
    opacity: 1;
    animation: con11-arrow-spread .8s cubic-bezier(0.22, 1, 0.36, 1) .4s backwards;
  }

  /* 시안 주석 「nv모션」 = 숨쉬듯 퍼짐 — 켜진 2초(신호등 한 칸) 동안 한 번 */
  .con11__pin-glow {
    animation: v-scale-opa 2s ease-in-out;
  }
}

/* 핀 좌우 5 · 세로 중심은 핀보다 4.5 위 (시안 김해 기준) · --dir = 벌어지는 방향 */
.con11__arrow {
  top: calc(var(--px)*16);
  opacity: 0;
  transition: opacity .6s ease-in-out;
}

.con11__arrow--left {
  --dir: -1;
  right: calc(100% + var(--px)*5);
}

.con11__arrow--right {
  --dir: 1;
  left: calc(100% + var(--px)*5);
}

@keyframes con11-arrow-spread {
  from { opacity: 0; transform: translateX(calc(var(--dir) * -30%)); } /* 자기 폭 비례 — 모바일 --px 축소에도 같은 비율로 벌어짐 */
  to { opacity: 1; transform: translateX(0); }
}

.con11__pin--uijeongbu {
  left: calc(var(--px)*171);
  top: calc(var(--px)*92);
}

.con11__pin--wonju {
  left: calc(var(--px)*255);
  top: calc(var(--px)*130);
}

.con11__pin--bucheon {
  left: calc(var(--px)*110);
  top: calc(var(--px)*185);
}

.con11__pin--hwaseong {
  left: calc(var(--px)*167);
  top: calc(var(--px)*240);
}

.con11__pin--daejeon {
  left: calc(var(--px)*238);
  top: calc(var(--px)*345);
}

.con11__pin--daegu {
  left: calc(var(--px)*354);
  top: calc(var(--px)*409);
}

.con11__pin--gimhae {
  right: calc(var(--px)*355);
  bottom: calc(var(--px)*345);
}

.con11__pin--gwangju {
  left: calc(var(--px)*110);
  bottom: calc(var(--px)*274);
}

@media (prefers-reduced-motion: reduce) {
  .con11__pin.is-on .con11__pin-glow { animation: none; opacity: 1; }
  .con11__pin.is-on .con11__arrow { animation: none; }
}

.con11__badge {
  right: calc(var(--px)*475);
  bottom: calc(var(--px)*224);
  width: calc(var(--px)*95);
  height: calc(var(--px)*39); /* HEIGHT: 단색 라운드 배지 — 시안 실측 39 이 유일한 높이 근거 */
  border-radius: 50vw;
  background-color: var(--secondary);
}

.con11__road {
  right: calc(var(--px)*-72);
  bottom: calc(var(--px)*122);
  width: calc(var(--px)*642);
  height: calc(var(--px)*89); /* HEIGHT: 내용 없는 장식 바 — 시안 실측 89 이 유일한 높이 근거 */
  border-radius: 50vw;
  background-color: var(--secondary);
}

.con11__dash {
  right: calc(var(--px)*-138);
  bottom: calc(var(--px)*166);
  width: calc(var(--px)*653);
  height: calc(var(--px)*4); /* HEIGHT: 로드바 중앙 파선 — 내용 없는 4px 라인이라 콘텐츠가 만들 높이가 없다 */
  background: repeating-linear-gradient(to right, rgba(255,255,255,.2) 0 calc(var(--px)*16), transparent calc(var(--px)*16) calc(var(--px)*24));
}

.con11__truck {
  right: calc(var(--px)*73);
  bottom: calc(var(--px)*176);
}

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

.con11__arrow.con11__arrow--left,
.con11__arrow.con11__arrow--right {
    width: calc(var(--px)*51);
    aspect-ratio: 51 / 24;
}

.con11__truck {
    width: calc(var(--px)*383);
    aspect-ratio: 383 / 240;
}
/* /IMG:AUTO con11 END */

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

.con11__intro {
    color: #000000;
}

.con11__title {
    font-size: var(--displayM);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.0777; /* OVR */
}

.con11__title-accent {
    color: #186f3b;
    letter-spacing: -0.0622em; /* OVR */
}

.con11__desc {
    font-size: var(--subheadL);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.4;
    text-align: center;
}

.con11__pin-list {
    font-size: var(--bodyXL);
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 1.49;
    color: #ffffff;
}

.con11__badge {
    font-size: var(--bodyL);
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 1.94;
    text-align: center;
    color: #ffffff;
}
/* /FONT:AUTO con11 END */

/* INK:AUTO con11 */
.con11__title-accent { margin-top: calc(var(--px) * -4.27); margin-bottom: calc(var(--px) * -16.72); } /* base 0,0 */
.con11__desc { margin-top: calc(var(--px) * 41.4); margin-bottom: calc(var(--px) * -5.57); } /* base 47,0 */
.con11__title { margin-top: calc(var(--px) * 180.73); margin-bottom: calc(var(--px) * -5.27); } /* base 186,0 */
/* /INK:AUTO con11 END */

@media (max-width:599px) {
  .con11 { padding-bottom: 17.0667vw; overflow: clip; }
  .con11_iner { flex-direction: column; align-items: center; padding: 0 5.3333vw 14.9333vw; }
  .con11__intro { flex: none; padding-left: 0; align-items: center; }
  .con11__title { margin-top: 14.9333vw; margin-left: 0; }
  .con11__desc { margin-top: 3.2vw; }
  .con11__map { margin-top: 8.5333vw; }
  .con11__map-image { width: 90vw; }
  .con11__pin-glow { inset: -2.663vw; }
  .con11__pin-list { font-size: var(--bodyXS); }
  .con11__arrow { top: 3.514vw; }
  .con11__arrow--left { right: calc(100% + 0.8205vw); }
  .con11__arrow--right { left: calc(100% + 0.8205vw); }
  .con11__arrow.con11__arrow--left,
  .con11__arrow.con11__arrow--right { width: 5.625vw; }
  .con11__pin { width: 10.6667vw; /* TEXT-WIDTH: 정원 거점 핀 지름 */ height: 10.6667vw; /* HEIGHT: 정원 거점 핀 */ }
  .con11__pin--uijeongbu { left: 17.1116vw; top: 8.3983vw; }
  .con11__pin--wonju { left: 26.3763vw; top: 12.5895vw; }
  .con11__pin--bucheon { left: 10.3836vw; top: 18.6557vw; }
  .con11__pin--hwaseong { left: 16.6704vw; top: 24.7218vw; }
  .con11__pin--daejeon { left: 24.5013vw; top: 36.3027vw; }
  .con11__pin--daegu { left: 37.2954vw; top: 43.3616vw; }
  .con11__pin--gimhae { right: 37.4057vw; bottom: 36.3027vw; }
  .con11__pin--gwangju { left: 10.3836vw; bottom: 28.4718vw; }
  .con11__badge { right: 56vw; bottom: 21.3333vw; width: 21.3333vw; height: 8.5333vw; /* HEIGHT: 단색 라운드 배지 */ }
  .con11__road { right: -8vw; bottom: 0; width: 70vw; height: 12.8vw; /* HEIGHT: 장식 바 */ }
  .con11__dash { right: -8vw; bottom: 6.1333vw; width: 70vw; height: 0.5333vw; /* HEIGHT: 파선 라인 */ background: repeating-linear-gradient(to right, rgba(255,255,255,.2) 0 2.1333vw, transparent 2.1333vw 3.2vw); }
  .con11__truck { right: -4vw; bottom: 6.4vw; width: 52vw; }
}

/* /merge-build:con11 */
/* merge-build:con12 */
.con12 {
	overflow-x: clip;
	overflow-y: visible;
}

.con12__donut-slider {
	position: absolute;
	top: calc(var(--px)*93);
	left: calc(var(--px)*-167);
	right: 0;
}

.con12__donut-track {
	width: max-content;
}

.con12__donut-slider .con12__donut-track {
	animation-duration: 36s; /* 유틸 20s 를 이기려고 2클래스 — 구 Swiper(도넛 1칸 ≈253px / 3s)와 같은 속도 */
}

.con12__donut-img {
	flex-shrink: 0;
}

/* 시안 간격 6종(52~110)이 손조정이라 평균 74.5 로 통일 */
.con12__donut-img {
	margin-right: calc(var(--px)*74.5);
}

.con12__donut-img--choco-drizzle {
	margin-top: calc(var(--px)*3);
	margin-left: calc(var(--px)*-9); /* PNG 좌측 투명 9px 상쇄 — 잉크 기준 간격을 맞춤 */
}

.con12__donut-img--choco-stripe {
	margin-top: calc(var(--px)*1);
}

.con12__donut-img--mint {
	margin-top: calc(var(--px)*3);
}

.con12__donut-img--lemon {
	margin-top: calc(var(--px)*2);
}

.con12__donut-img--strawberry {
	margin-top: calc(var(--px)*7);
}

/* 고정 박스가 트랙 위에 떠서 지나가는 도넛을 가린다 */
.con12__donut-box {
	bottom: calc(var(--px)*-37);
	left: calc(var(--px)*552);
	z-index: 2; /* 하단이 DOM 뒤 형제 .con12__body(relative) 영역으로 내려가 z 없으면 그 밑에 깔린다 */
}

.con12__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--px)*14);
	margin-top: calc(var(--px)*298);
}

.con12__desc {
	margin-top: calc(var(--px)*51);
	margin-bottom: calc(var(--px)*262);
}

.con12__photo {
	overflow: hidden;
	border-radius: calc(var(--px)*20);
}

.con12__photo--softserve {
	top: calc(var(--px)*282);
	left: calc(var(--px)*284);
}

.con12__photo--bag {
	top: calc(var(--px)*429);
	right: calc(var(--px)*111);
}

.con12__photo--drink {
	right: calc(var(--px)*138);
	bottom: calc(var(--px)*157);
}

/* 좌측 20px 이 화면 밖이라 왼쪽 모서리는 직각으로 잘린다 */
.con12__photo--neon {
	left: calc(var(--px)*-22); /* 좌 22px 은 캔버스 밖 — 등장 scale 때 잘린 단면이 드러나지 않게 전체 카드로 확정 */
	bottom: calc(var(--px)*47);
	border-radius: calc(var(--px)*20);
}

/* 본문 레이어(.front)가 섹션 전폭이라 사진을 덮는다 — 틸트 hover 가 사진에 닿게 빈 곳은 통과시킨다 */
.con12__body-inner { pointer-events: none; }
.con12__body-inner > * { pointer-events: auto; }

/* 3D 틸트 광택 — ani_con12 가 포인터 위치를 --gx·--gy 로 넘긴다 */
.con12__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgb(255 255 255 / 0.35), transparent 60%);
	opacity: 0;
	transition: opacity 0.3s;
	pointer-events: none;
}

@media (hover: hover) {
	.con12__photo:hover::after { opacity: 1; }
}

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

.con12__donut-img.con12__donut-img--choco-drizzle {
    width: calc(var(--px)*184);
    aspect-ratio: 184 / 147;
}

.con12__donut-img.con12__donut-img--choco-stripe {
    width: calc(var(--px)*176);
    aspect-ratio: 176 / 151;
}

.con12__donut-img.con12__donut-img--original {
    width: calc(var(--px)*179);
    aspect-ratio: 179 / 155;
}

.con12__donut-img.con12__donut-img--lemon {
    width: calc(var(--px)*183);
    aspect-ratio: 183 / 153;
}

.con12__donut-img.con12__donut-img--strawberry {
    width: calc(var(--px)*178);
    aspect-ratio: 178 / 146;
}

.con12__donut-img.con12__donut-img--mint {
    width: calc(var(--px)*178);
    aspect-ratio: 178 / 154;
}

.con12__donut-box {
    width: calc(var(--px)*800);
    aspect-ratio: 800 / 528;
}

.con12__photo.con12__photo--softserve {
    width: calc(var(--px)*262);
    aspect-ratio: 262 / 315;
}

.con12__photo.con12__photo--bag {
    width: calc(var(--px)*422);
    aspect-ratio: 422 / 242;
}

.con12__photo.con12__photo--drink {
    width: calc(var(--px)*164);
    aspect-ratio: 164 / 187;
}

.con12__photo.con12__photo--neon {
    width: calc(var(--px)*265);
    aspect-ratio: 265 / 317;
}
/* /IMG:AUTO con12 END */

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

.con12__title {
    font-size: var(--displayL);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.06;
}

.con12__title-lead {
    color: #ffffff;
}

.con12__title-point {
    color: #f5e6c1;
}

.con12__desc {
    font-size: var(--subheadM);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.46;
    color: #ffffff;
}
/* /FONT:AUTO con12 END */

/* INK:AUTO con12 */
.con12__title-lead { margin-top: calc(var(--px) * -5.66); margin-bottom: calc(var(--px) * -5.65); } /* base 0,0 */
.con12__title-point { margin-top: calc(var(--px) * -5.66); margin-bottom: calc(var(--px) * -5.65); } /* base 0,0 */
.con12__desc { margin-top: calc(var(--px) * 44.94); margin-bottom: calc(var(--px) * 256.96); } /* base 51,262 */
/* /INK:AUTO con12 END */

@media (max-width:599px) {
	.con12__band-plate { width: 100vw; aspect-ratio: 375 / 260; }
	.con12__band-plate img { height: 100%; object-fit: cover; }
	.con12__donut-slider { top: 4.2667vw; left: -10.6667vw; }
	.con12__donut-img.con12__donut-img--choco-drizzle,
	.con12__donut-img.con12__donut-img--choco-stripe,
	.con12__donut-img.con12__donut-img--original,
	.con12__donut-img.con12__donut-img--lemon,
	.con12__donut-img.con12__donut-img--strawberry,
	.con12__donut-img.con12__donut-img--mint { width: 26vw; }
	.con12__donut-img { margin-right: 10.6667vw; }
	.con12__donut-img--choco-drizzle { margin-top: 0.5333vw; margin-left: -1.3vw; }
	.con12__donut-img--choco-stripe { margin-top: 0; }
	.con12__donut-img--mint { margin-top: 0.5333vw; }
	.con12__donut-img--lemon { margin-top: 0.5333vw; }
	.con12__donut-img--strawberry { margin-top: 1.0667vw; }
	.con12__donut-box { width: 72vw; left: 14vw; bottom: -10.6667vw; }
	.con12__body-inner { padding-inline: 5.3333vw; }
	.con12__title { font-size: var(--displayM); gap: 2.1333vw; margin-top: 56vw; }
	.con12__title-lead, .con12__title-point { margin-top: -1.0667vw; margin-bottom: -1.0667vw; }
	.con12__desc { margin-top: 8.5333vw; margin-bottom: 50.6667vw; }
	.con12__photo { border-radius: 3.2vw; }
	.con12__photo.con12__photo--softserve { width: 30vw; top: 85.3333vw; left: 2.1333vw; }
	.con12__photo.con12__photo--bag { width: 40vw; top: 88vw; right: 2.1333vw; }
	.con12__photo.con12__photo--drink { width: 22vw; right: 4.2667vw; bottom: 8.5333vw; }
	.con12__photo.con12__photo--neon { left: -2.9091vw; width: 35.0413vw; bottom: 4.1345vw; border-radius: 3.2vw; }
}

/* /merge-build:con12 */
/* merge-build:con13 */
/* con13 — 좌 intro + 우 카드 4장(view 가 섹션 높이로 잘라 01·02 만 노출 · 스크롤 이동은 애니 회차) / 모바일은 column 1열로 접는다 */
.con13 {
  background-color: #fef7e5;
}

.con13_iner {
  padding-right: calc(var(--px) * 53);
}

.con13__intro {
  flex: none;
  width: calc(var(--px) * 947);
  padding-top: calc(var(--px) * 174);
}

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

.con13__photo {
  align-self: flex-start;
  margin-top: calc(var(--px) * 62);
}

.con13__cards-view {
  flex: none;
  align-self: stretch;
  width: calc(var(--px) * 900);
  overflow: hidden;
  contain: size; /* 카드 4장 높이가 섹션을 키우지 않게 — 높이는 intro 가 만든다 */
}

.con13__cards {
  padding-block: calc(var(--px) * 94) calc(var(--px) * 68);
  gap: calc(var(--px) * 49);
}

.con13__card {
  padding: calc(var(--px) * 85) calc(var(--px) * 97) calc(var(--px) * 97);
  background-color: #ffffff;
  border: 1px solid #eadab0;
  border-radius: calc(var(--px) * 20);
}

.con13__card-flag {
  top: calc(var(--px) * -28);
  right: calc(var(--px) * 74);
}

.con13__card-num {
  position: absolute;
  top: calc(var(--px) * 21);
  right: calc(var(--px) * 16);
}

.con13__card-label {
  width: calc(var(--px) * 238);
  padding-block: calc(var(--px) * 14.4);
  background-color: var(--secondary);
  border-radius: 50vw;
}

.con13__card-title {
  margin-top: calc(var(--px) * 37);
}

.con13__card-desc {
  margin-top: calc(var(--px) * 46);
}

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

.con13__photo {
    width: calc(var(--px)*759);
    aspect-ratio: 759 / 639;
}

.con13__card-flag-img {
    width: calc(var(--px)*123);
    aspect-ratio: 123 / 131;
}
/* /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-suit);
    font-size: var(--displayM);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.07;
    text-align: center;
    color: #000000;
}

.con13__card-num {
    font-family: var(--font-pretendard);
    font-size: var(--subheadM);
    font-weight: 800;
    letter-spacing: 0em;
    line-height: 1.2; /* OVR */
    text-align: center;
    color: #ffffff;
}

.con13__card-label {
    font-family: var(--font-suit);
    font-size: var(--bodyXL);
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 1.06;
    color: #ffffff;
}

.con13__card-title {
    font-family: var(--font-suit);
    font-size: var(--titleS);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.2; /* OVR */
    color: #000000;
}

.con13__card-desc {
    font-family: var(--font-suit);
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 1.4;
    color: #000000;
}
/* /FONT:AUTO con13 END */

/* INK:AUTO con13 */
.con13__card-desc { margin-top: calc(var(--px) * 40.5); margin-bottom: calc(var(--px) * -4.5); } /* base 46,0 */
.con13__title { margin-top: calc(var(--px) * 20.73); margin-bottom: calc(var(--px) * -5.27); } /* base 25,0 */
.con13__card-num { margin-top: calc(var(--px) * -5.2); margin-bottom: calc(var(--px) * -4.19); } /* base 0,0 */
.con13__card-desc.con13__card-desc--04 { margin-top: calc(var(--px) * 41.5); margin-bottom: calc(var(--px) * -4.5); } /* base 46,0 */
.con13__card-title { margin-top: calc(var(--px) * 32); margin-bottom: calc(var(--px) * -4); } /* base 37,0 */
/* /INK:AUTO con13 END */

@media (max-width:599px) {
  .con13_iner { flex-direction: column; align-items: center; padding-inline: 0; }
  .con13__intro { align-self: stretch; width: auto; padding-top: 17.0667vw; }
  .con13__logo { width: 24vw; }
  .con13__title { margin-top: 4.2667vw; margin-bottom: -1.0667vw; }
  .con13__photo { align-self: flex-start; width: 88vw; margin-top: 10.6667vw; }
  .con13__cards-view { align-self: stretch; width: auto; padding-inline: 5.3333vw; overflow: visible; contain: none; }
  .con13__cards { padding-block: 12.8vw 10.6667vw; gap: 6.4vw; }
  .con13__card { padding: 12.8vw 6.4vw 10.6667vw; border-radius: 4.2667vw; }
  .con13__card-flag { top: -4.2667vw; right: 11.7333vw; }
  .con13__card-flag-img { width: 19.7333vw; }
  .con13__card-num { top: 3.36vw; right: 2.56vw; margin-top: -0.832vw; margin-bottom: -0.6704vw; }
  .con13__card-label { width: 48vw; margin-inline: auto; padding-block: 2.1333vw; }
  .con13__card-title { margin-top: 5.3333vw; margin-bottom: -0.5333vw; }
  .con13__card-desc, .con13__card-desc.con13__card-desc--04 { margin-top: 6.4vw; margin-bottom: -0.72vw; }
}

/* /merge-build:con13 */
/* merge-build:con14 */
/* con14 — 가로 아코디언 2패널(.is-active 가 펼침 · 접힘 폭 고정) / 모바일은 패널을 column 으로 쌓고 face 는 헤더 띠로 접는다 */
.con14 {
  background-color: #fef7e5;
}

.con14__panel {
  flex: none;
  overflow: hidden;
}

.con14__panel--ops {
  width: calc(var(--px) * 589);
}

.con14__panel--brand {
  width: calc(var(--px) * 584);
}

.con14__panel.is-active {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

/* 런타임 상태 토글 — 접힘 패널은 face, 펼친 패널은 body 만 보인다 */
.con14__panel:not(.is-active) .con14__body,
.con14__panel.is-active .con14__face {
  visibility: hidden;
  opacity: 0;
}

.con14__face {
  transition: opacity .35s ease-out, visibility .35s ease-out;
}

.con14__panel.is-active .con14__body {
  transition-delay: .15s;
}

.con14__panel--ops .con14__face {
  padding: calc(var(--px) * 396) 0 0 calc(var(--px) * 139);
}

.con14__panel--brand .con14__face {
  padding: calc(var(--px) * 391) 0 0 calc(var(--px) * 198);
}

.con14__face-title {
  margin-top: calc(var(--px) * 14);
}

.con14__badge {
  padding-inline: calc(var(--px) * 21.5);
  border-radius: 50vw;
}

.con14__panel--ops .con14__badge {
  background-color: var(--secondary);
}

.con14__panel--brand .con14__badge {
  background-color: var(--primary);
}

.con14__panel--brand .con14__title-em {
  color: var(--primary);
}

.con14__body {
  width: max-content; /* 접힌 패널 폭으로 재배치되지 않게 — 넘침은 패널 overflow 가 자른다 */
  padding-block: calc(var(--px) * 184) calc(var(--px) * 150.02);
  transition: opacity .35s ease-out, visibility .35s ease-out;
}

.con14__panel--ops .con14__body {
  padding-left: calc(var(--px) * 235);
}

.con14__panel--brand .con14__body {
  padding-left: calc(var(--px) * 134);
  padding-bottom: calc(var(--px) * 148);
}

.con14__title {
  margin-top: calc(var(--px) * 15);
  word-spacing: calc(var(--px) * -0.34);
}

.con14__desc {
  margin-top: calc(var(--px) * 35);
}

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

.con14__card {
  flex: none;
  width: calc(var(--px) * 455);
  overflow: hidden;
  background-color: #ffffff;
  border: 1px solid #eadab0;
  border-radius: calc(var(--px) * 20);
}

.con14__card-title {
  padding-block: calc(var(--px) * 22.5);
  background-color: #000000;
}

.con14__card-row + .con14__card-row {
  border-top: 1px solid rgb(0 0 0 / 0.1);
}

.con14__card-row--note {
  gap: calc(var(--px) * 4);
  padding-block: calc(var(--px) * 12);
  line-height: 1.3;
}

.con14__card-row--note small {
  opacity: 0.5;
  font-size: var(--bodyM);
}

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

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

.con14__face-head {
    color: #ffffff;
}

.con14__badge {
    font-size: var(--bodyXL);
    font-weight: 600;
    letter-spacing: -0.06em;
    line-height: 1.65;  /* OVR psd:2.75 */
    color: #ffffff;
}

.con14__face-title {
    font-size: var(--titleM);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.31;
}

.con14__title {
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1;
    color: #000000;
}

.con14__title-em {
    color: #cf152d;
}

.con14__desc {
    font-size: var(--subheadM);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 1.36;
    color: #000000;
}

.con14__cards {
    font-weight: 600;
}

.con14__card-title {
    font-size: var(--subheadL);
    letter-spacing: -0.06em;
    line-height: 1.25;
    color: #ffffff;
}

.con14__card-list {
    font-size: var(--subheadS);
    letter-spacing: -0.06em;
    line-height: 3.48;  /* OVR psd:3.52 */
    text-align: center;
    color: #000000;
}
/* /FONT:AUTO con14 END */

/* INK:AUTO con14 */
.con14__title-em { margin-top: calc(var(--px) * -2.5); margin-bottom: calc(var(--px) * -15.5); } /* base 0,0 */
.con14__face-title { margin-top: calc(var(--px) * 5.79); margin-bottom: calc(var(--px) * -7.19); } /* base 14,0 */
.con14__desc { margin-top: calc(var(--px) * 30.04); margin-bottom: calc(var(--px) * -4.93); } /* base 35,0 */
.con14__title { margin-top: calc(var(--px) * 12.5); margin-bottom: calc(var(--px) * -2.5); } /* base 15,0 */
/* /INK:AUTO con14 END */

@media (max-width:599px) {
  .con14_iner { flex-direction: column; }
  .con14__panel--ops,
  .con14__panel--brand,
  .con14__panel.is-active { flex: none; width: auto; }
  .con14__panel:not(.is-active) .con14__body { visibility: visible; opacity: 1; }
  .con14__body,
  .con14__panel--ops .con14__body,
  .con14__panel--brand .con14__body { width: auto; align-items: center; padding: 17.0667vw 5.3333vw; }
  .con14__badge { padding-inline: 3.2vw; }
  .con14__title { margin-top: 3.2vw; margin-bottom: 0; }
  .con14__title-em { margin-top: 0; margin-bottom: 0; }
  .con14__desc { margin-top: 4.2667vw; margin-bottom: 0; }
  .con14__cards { flex-direction: column; gap: 4.2667vw; width: 100%; margin-top: 8.5333vw; }
  .con14__card { width: 100%; border-radius: 3.2vw; }
  .con14__card-title { padding-block: 4.2667vw; }
  .con14__card-row--note { gap: 1.0667vw; padding-block: 2.1333vw; }
  .con14__plus { width: 6.4vw; }
  .con14__body { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .con14__face,
  .con14__body { transition: none; }
}

/* /merge-build:con14 */
/* merge-build:con16 */
/* con16 — 띠 마퀴 + 헤드 + 일 최고 매출 카운터 + 지점 카드 슬라이드 */
/* 모바일 인계: 카운터 칸 축소 후 한 줄 유지 · 카드 슬라이드 폭 축소(loop 유지) · 도넛 축소 */
.con16 {
	overflow-x: clip;
	overflow-y: visible;
	padding-bottom: calc(var(--px)*35);
	background-color: #fff1ce;
}

.con16__band-iner {
	padding-block: calc(var(--px)*62.5);
}

.con16__marquee {
	width: 100%;
	overflow: hidden;
}

.con16__marquee-track {
	width: max-content;
	margin-left: calc(var(--px)*-99);
}

.con16__marquee-item {
	flex-shrink: 0;
	margin-right: calc(var(--px)*38);
	white-space: nowrap;
}

.con16__donut {
	top: calc(var(--px)*-59);
}

.con16__head {
	padding-top: calc(var(--px)*151.5);
}

.con16__title {
	padding-left: calc(var(--px)*12);
}

.con16__desc {
	margin-top: calc(var(--px)*19.45);
}

.con16__counter {
	gap: calc(var(--px)*18);
	margin-top: calc(var(--px)*41);
}

.con16__counter-label {
	width: calc(var(--px)*118);
	border-radius: calc(var(--px)*20);
	background-color: var(--primary);
}

.con16__counter-value {
	gap: calc(var(--px)*9);
}

.con16__digit {
	width: calc(var(--px)*91);
	padding-block: calc(var(--px)*15.19);
	border-radius: calc(var(--px)*20);
	background-color: #000;
}

.con16__comma {
	width: calc(var(--px)*20);
}

/* 특이도 2 — swiper-bundle.min.css 가 섹션 CSS 뒤(body)에 실려 .swiper 기본값을 이긴다 */
.con16_iner .con16__branches {
	margin-top: calc(var(--px)*45);
}

.con16__branches .con16__branch {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: calc(var(--px)*351);
	padding: calc(var(--px)*40.4) 0 calc(var(--px)*35.86);
	border: 1px solid #eadab0;
	border-radius: calc(var(--px)*20);
	background-color: #fff;
	transition: border-color .25s ease-out, box-shadow .25s ease-out;
}

@media (hover:hover) {
	.con16__branches .con16__branch:hover {
		border-color: var(--primary);
		box-shadow: 0 calc(var(--px)*8) calc(var(--px)*24) rgb(0 0 0 / .08);
	}
}

.con16__branch-label {
	margin-top: calc(var(--px)*8.9);
	padding: calc(var(--px)*4) calc(var(--px)*20);
	border: 1px solid #dbd2ba;
	border-radius: 50vw;
	background-color: #fef7e5;
}

.con16__branch-value {
	margin-top: calc(var(--px)*10.1);
}

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

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

.con16__head,
.con16__branches {
    font-family: var(--font-suit);
    text-align: center;
    color: #000000;
}

.con16__title {
    font-size: var(--displayM);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.07;
}

.con16__title-accent {
    color: #166938;
}

.con16__desc {
    font-size: var(--subheadM);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.3;  /* OVR */
}

.con16__counter {
    text-align: center;
}

.con16__counter-label-text {
    font-family: var(--font-suit);
    font-size: var(--subheadL);
    font-weight: 600;
    letter-spacing: -0.06em;
    line-height: 1.09;
    color: #ffffff;
}

.con16__counter-value {
    font-family: var(--font-anton);
    font-size: var(--displayL);
    font-weight: 400;
    letter-spacing: 0;  /* OVR */
    line-height: 1.18;
}

.con16__digit {
    color: #ffffff;
}

.con16__comma {
    color: #000000;
}

.con16__branch-name {
    font-size: var(--subheadS);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.2;  /* OVR */
}

.con16__branch-label {
    font-size: var(--bodyM);
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 1.2;  /* OVR */
}

.con16__branch-value {
    font-size: var(--headL);
    font-weight: 800;
    letter-spacing: -0.05em;  /* OVR */
    line-height: 1.2;  /* OVR */
}
/* /FONT:AUTO con16 END */

/* INK:AUTO con16 */
.con16__comma { margin-top: calc(var(--px) * -67.32); margin-bottom: calc(var(--px) * -3.31); } /* base 0,0 */
.con16__title-accent { margin-top: calc(var(--px) * -4.27); margin-bottom: calc(var(--px) * -16.72); } /* base 0,0 */
.con16__title { margin-top: calc(var(--px) * -4.27); margin-bottom: calc(var(--px) * -5.27); } /* base 0,0 */
.con16__desc { margin-top: calc(var(--px) * 15.15); margin-bottom: calc(var(--px) * -4.29); } /* base 19.45,0 */
.con16__marquee-item { margin-top: calc(var(--px) * -4); margin-bottom: calc(var(--px) * -4); } /* base 0,0 */
/* /INK:AUTO con16 END */

@media (max-width:599px) {
	.con16 { padding-bottom: 5.3333vw; }
	.con16__band-iner { padding-block: 6.4vw; }
	.con16__marquee-track { margin-left: -15.84vw; }
	.con16__marquee-item { margin-right: 6.4vw; margin-top: -0.64vw; margin-bottom: -0.64vw; }
	.con16__donut { top: -6.9333vw; width: 32vw; }
	.con16__head { padding: 17.0667vw 4.2667vw 0; }
	.con16__title { padding-left: 0; margin-top: -0.6131vw; margin-bottom: -0.7567vw; }
	.con16__title-accent { margin-top: -0.6131vw; margin-bottom: -2.4008vw; }
	.con16__desc { margin-top: 2.4182vw; margin-bottom: -0.78vw; }
	.con16__counter { flex-direction: column; align-items: center; gap: 3.2vw; margin-top: 6.4vw; }
	.con16__counter-label { width: auto; padding: 1.6vw 4.2667vw; border-radius: 3.2vw; }
	.con16__counter-value { gap: 1.0667vw; font-size: var(--displayM); }
	.con16__digit { width: 8.5333vw; padding-block: 1.0667vw; border-radius: 2.1333vw; }
	.con16__comma { width: 3.2vw; margin-top: -8.0907vw; margin-bottom: -0.3978vw; }
	.con16_iner .con16__branches { margin-top: 6.4vw; }
	.con16__branches .con16__branch { width: 64vw; padding: 6.4vw 0 5.3333vw; border-radius: 4.2667vw; }
	.con16__branch-label { margin-top: 1.6vw; padding: 0.5333vw 3.2vw; }
	.con16__branch-value { margin-top: 1.6vw; }
}

/* /merge-build:con16 */
/* merge-build:con17 */
/* con17 — 흰 라운드 카드 안 3열(인트로 · 초록 원형 도넛 · 수익 표) + 블러 상태 CTA */
/* 모바일 인계: 카드 3열 → column(인트로 → 원형 → 표) · 원형 축소 · 표 폭 100% */
.con17 {
  padding-top: calc(var(--px)*21);
  padding-bottom: calc(var(--px)*122);
  background-color: #fff1ce;
}

.con17__card {
  width: calc(var(--px)*1764);
  padding: calc(var(--px)*97) calc(var(--px)*160) calc(var(--px)*98) calc(var(--px)*163);
  border: 1px solid #eadab0;
  border-radius: calc(var(--px)*40);
  background-color: #fff;
}

.con17__intro {
  flex: 1 1 0;
  min-width: 0;
  padding-top: calc(var(--px)*64);
}

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

.con17__circle {
  flex: none;
  width: calc(var(--px)*540);
  height: calc(var(--px)*540); /* HEIGHT: 정원 도형 — 자식 도넛이 전부 원에 잘리는 absol 이라 흐름 높이가 없다 */
  overflow: hidden;
  border-radius: 50%;
  background-color: var(--primary);
  --con17-u: var(--px);
}

/* 세 도넛이 같은 절대경로(원 로컬 -260→560)를 돌고 음수 delay 위상으로 정지 위치에 맞춘다 */
.con17__donut {
  animation: con17-fall 9s linear infinite;
}

.con17__donut--top {
  top: calc(var(--px)*-119);
  left: calc(var(--px)*114);
  --con17-from: calc(var(--con17-u)*-141);
  --con17-to: calc(var(--con17-u)*679);
  animation-delay: -1.548s;
}

.con17__donut--middle {
  bottom: calc(var(--px)*155);
  left: calc(var(--px)*112);
  --con17-from: calc(var(--con17-u)*-434);
  --con17-to: calc(var(--con17-u)*386);
  animation-delay: -4.761s;
}

.con17__donut--bottom {
  bottom: calc(var(--px)*-126);
  left: calc(var(--px)*116);
  --con17-from: calc(var(--con17-u)*-680);
  --con17-to: calc(var(--con17-u)*140);
  animation-delay: -7.461s;
}

@keyframes con17-fall {
  from { transform: translateY(var(--con17-from)); }
  to { transform: translateY(var(--con17-to)); }
}

@media (prefers-reduced-motion: reduce) {
  .con17__donut { animation: none; }
}

.con17__board {
  flex: none;
  width: calc(var(--px)*410);
  margin-top: calc(var(--px)*4);
  margin-left: calc(var(--px)*41);
}

.con17__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
}

.con17__col-item {
  width: calc(var(--px)*148);
}

.con17__col-amount {
  width: calc(var(--px)*128);
}

.con17__head-row {
  text-align: center;
}

.con17__head-cell {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.con17__row + .con17__row > * {
  border-top: 1px solid rgb(0 0 0 / 0.102);
}

.con17__row:first-child > * {
  padding-top: calc(var(--px)*9);
}

.con17__row:last-child > * {
  padding-bottom: calc(var(--px)*10);
}

.con17__item,
.con17__net-item {
  padding-left: calc(var(--px)*42);
}

.con17__ratio {
  padding-right: calc(var(--px)*46);
}

.con17__net-row {
  background-color: #000;
}

.con17__net-item {
  border-radius: calc(var(--px)*15) 0 0 calc(var(--px)*15);
}

.con17__net-amount {
  text-align: center;
}

.con17__net-ratio {
  padding-right: calc(var(--px)*52);
  border-radius: 0 calc(var(--px)*15) calc(var(--px)*15) 0;
  text-align: right;
}

.con17__note {
  margin-top: calc(var(--px)*18);
  opacity: 0.5;
}

.con17__cta {
  top: calc(var(--px)*142);
  right: calc(var(--px)*65);
  width: calc(var(--px)*262.5);
  padding: calc(var(--px)*42) 0 calc(var(--px)*37);
  border-radius: calc(var(--px)*30);
  background-color: var(--primary);
  /* FONT: 참조밴드 spec(ref__con17__other) 카피라 spec-font-to-css 가 못 읽는다 — 밴드 texts[0] 값 수기 */
  font-size: var(--headS);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
  color: #fff1ce;
  visibility: hidden;
  opacity: 0;
}

.con17__cta-logo {
  margin-bottom: calc(var(--px)*14);
}

.con17__cta-arrow {
  width: calc(var(--px)*31);
  aspect-ratio: 31 / 26;
  margin-top: calc(var(--px)*7);
}

/* 런타임 상태 — 관리자 블러 on 이면 표·각주를 흐리고 CTA 를 띄운다 */
.con17__board.is-blurred {
  .con17__table,
  .con17__note {
    filter: blur(calc(var(--px)*5));
    user-select: none;
  }

  .con17__cta {
    visibility: visible;
    opacity: 1;
  }
}

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

.con17__donut.con17__donut--top {
    width: calc(var(--px)*302);
    aspect-ratio: 302 / 231;
}

.con17__donut.con17__donut--middle {
    width: calc(var(--px)*312);
    aspect-ratio: 312 / 211;
}

.con17__donut.con17__donut--bottom {
    width: calc(var(--px)*299);
    aspect-ratio: 299 / 246;
}

.con17__cta-logo {
    width: calc(var(--px)*114);
    aspect-ratio: 114 / 40;
}
/* /IMG:AUTO con17 END */

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

.con17__title {
    font-size: var(--displayM);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.07;
    color: #000000;
}

.con17__table {
    font-size: var(--bodyXL);
    letter-spacing: -0.06em;
}

.con17__head-row {
    font-weight: 600;
    line-height: 3;  /* OVR */
    color: #000000;
}

.con17__row {
    font-weight: 600;
    line-height: 2.7;  /* OVR */
    color: #000000;
}

.con17__amount {
    text-align: center;
}

.con17__ratio {
    text-align: right;
}

.con17__net-row {
    font-weight: 900;
    line-height: 3.25;
}

.con17__net-item {
    color: #ffffff;
}

.con17__net-amount,
.con17__net-ratio {
    color: #f5e6c1;
}

.con17__note {
    font-size: var(--bodyM);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.56;
    color: #000000;
}
/* /FONT:AUTO con17 END */

/* INK:AUTO con17 */
.con17__net-ratio { margin-top: calc(var(--px) * -24); margin-bottom: calc(var(--px) * -24); } /* base 0,0 */
.con17__net-item { margin-top: calc(var(--px) * -23); margin-bottom: calc(var(--px) * -23); } /* base 0,0 */
.con17__net-amount { margin-top: calc(var(--px) * -23); margin-bottom: calc(var(--px) * -21); } /* base 0,0 */
.con17__title { margin-top: calc(var(--px) * 14.73); margin-bottom: calc(var(--px) * -5.27); } /* base 20,0 */
.con17__note { margin-top: calc(var(--px) * 12.52); margin-bottom: calc(var(--px) * -4.47); } /* base 18,0 */
/* /INK:AUTO con17 END */

@media (max-width:599px) {
  .con17 { padding-top: 3.2vw; padding-bottom: 21.3333vw; }
  .con17__card { flex-direction: column; align-items: stretch; width: 91.4667vw; padding: 10.6667vw 6.4vw; border-radius: 6.4vw; }
  .con17__intro { flex: none; padding-top: 0; }
  .con17__logo { width: 17.0667vw; margin-inline: auto; }
  .con17__title { margin-top: 3.2vw; margin-bottom: 0; }
  .con17__circle { width: 72vw; height: 72vw; /* HEIGHT: 정원 도형 — 자식 도넛이 전부 원에 잘리는 absol 이라 흐름 높이가 없다 */ margin: 8.5333vw auto 0; --con17-u: 0.13333vw; }
  .con17__donut--top { top: -15.8667vw; left: 15.2vw; }
  .con17__donut--middle { bottom: 20.6667vw; left: 14.9333vw; }
  .con17__donut--bottom { bottom: -16.8vw; left: 15.4667vw; }
  .con17__donut.con17__donut--top { width: 40.2667vw; }
  .con17__donut.con17__donut--middle { width: 41.6vw; }
  .con17__donut.con17__donut--bottom { width: 39.8667vw; }
  .con17__board { width: 100%; margin-top: 8.5333vw; margin-left: 0; }
  .con17__col-item { width: 28.4vw; }
  .con17__col-amount { width: 24.5333vw; }
  .con17__row:first-child > * { padding-top: 1.6vw; }
  .con17__row:last-child > * { padding-bottom: 1.6vw; }
  .con17__item,
  .con17__net-item { padding-left: 6.4vw; }
  .con17__ratio { padding-right: 6.4vw; }
  .con17__net-item { border-radius: 2.1333vw 0 0 2.1333vw; }
  .con17__net-ratio { padding-right: 8.5333vw; border-radius: 0 2.1333vw 2.1333vw 0; }
  .con17__net-item,
  .con17__net-amount,
  .con17__net-ratio { margin-top: 0; margin-bottom: 0; }
  .con17__note { margin-top: 3.2vw; margin-bottom: 0; }
  .con17__cta { top: 17.0667vw; right: 9.7333vw; width: 58.6667vw; padding: 8.5333vw 0; border-radius: 6.4vw; font-size: var(--headL); }
  .con17__cta-logo { width: 23.4667vw; margin-bottom: 3.2vw; }
  .con17__cta-arrow { width: 6.4vw; margin-top: 1.6vw; }
  .con17__board.is-blurred .con17__table,
  .con17__board.is-blurred .con17__note { filter: blur(0.8vw); }
}

/* /merge-build:con17 */
/* merge-build:con18 */
/* con18 — 헤드 + 분류 탭 + 매장 사진 centered 슬라이드(양옆 흐림 · 좌우 화살표) */
/* 모바일 인계: 탭 가로 유지(폭 축소) · 슬라이드 폭 축소 후 centered 유지 · 화살표는 사진 양끝 안쪽으로 */
.con18 {
	padding-top: calc(var(--px)*121);
	padding-bottom: calc(var(--px)*136.5);
}

.con18__desc {
	margin-top: calc(var(--px)*32);
}

.con18__tabs {
	gap: calc(var(--px)*8);
	margin-top: calc(var(--px)*62);
}

.con18__tab {
	min-width: calc(var(--px)*225);
	padding: calc(var(--px)*20.5) calc(var(--px)*30);
	border-radius: calc(var(--px)*35);
	background-color: #f5e6c1;
	transition: background-color .3s ease-out, color .3s ease-out;
}

.con18__tab.is-active {
	background-color: var(--primary);
	color: #fef7e5;

	&::before {
		content: "";
		position: absolute;
		top: calc(var(--px)*-16);
		width: calc(var(--px)*32);
		aspect-ratio: 1;
		border: calc(var(--px)*11) solid #ffe242;
		border-radius: 50%;
	}
}

.con18__gallery {
	margin-top: calc(var(--px)*29);
	padding-left: calc(var(--px)*3);
}

/* 특이도 2 — swiper-bundle.min.css 가 섹션 CSS 뒤에 실려 .swiper-slide{width:100%} 를 이긴다 */
.con18__slider .con18__slide {
	width: auto;
	opacity: 0.2;
	transition: opacity 0.4s;
}

.con18__slider .con18__slide.swiper-slide-active {
	opacity: 1;
}

.con18__photo {
	overflow: hidden;
	border-radius: calc(var(--px)*30);
}

.con18__nav {
	inset: 0;
	z-index: 2; /* swiper 가 .swiper{z-index:1} 로 스택 컨텍스트를 만듦 */
	gap: calc(var(--px)*796);
	pointer-events: none;
}

/* 글 0건 분류 탭 = 런타임 상태 토글(slide.js 가 .is-empty 부여) */
.con18__empty {
	display: none;
	padding-block: calc(var(--px)*220);
	font-size: var(--subheadM);
	color: color-mix(in srgb, currentColor 50%, transparent);
}

.con18__gallery.is-empty {
	.con18__empty {
		display: flex;
	}

	.con18__nav {
		display: none;
	}
}

.con18__arrow {
	padding: calc(var(--px)*13.5) calc(var(--px)*8);
	border-radius: 50%;
	background-color: var(--primary);
	pointer-events: auto;
	transition: background-color .25s ease-out;
}

.con18__arrow .con18__arrow-icon {
	transition: transform .25s ease-out;
}

@media (hover:hover) {
	.con18__tab:not(.is-active):hover {
		background-color: color-mix(in srgb, #f5e6c1 85%, var(--primary));
	}

	.con18__arrow:hover {
		background-color: color-mix(in srgb, var(--primary) 85%, black);
	}

	.con18__arrow--prev:hover .con18__arrow-icon {
		transform: translateX(-20%);
	}

	.con18__arrow--next:hover .con18__arrow-icon {
		transform: translateX(20%);
	}
}

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

.con18__arrow-icon {
    width: calc(var(--px)*34);
    aspect-ratio: 34 / 23;
}
/* /IMG:AUTO con18 END */

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

.con18__title {
    font-size: var(--displayM);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.07;
    text-align: center;
}

.con18__title-sub {
    font-size: var(--titleM);
    letter-spacing: -0.06em;
    line-height: 1.35; /* OVR */
    color: #166938;
}

.con18__desc {
    font-size: var(--subheadM);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.36;
}

.con18__tabs {
    font-size: var(--subheadM);
    font-weight: 600;
    letter-spacing: -0.06em;
    line-height: 1.36;
}
/* /FONT:AUTO con18 END */

/* INK:AUTO con18 */
.con18__title-sub { margin-top: calc(var(--px) * -9.01); margin-bottom: calc(var(--px) * -3.99); } /* base 0,0 */
.con18__title { margin-top: calc(var(--px) * -4.27); margin-bottom: calc(var(--px) * -5.74); } /* base 0,0 */
.con18__desc { margin-top: calc(var(--px) * 27.04); margin-bottom: calc(var(--px) * -4.95); } /* base 32,0 */
/* /INK:AUTO con18 END */

@media (max-width:599px) {
	.con18 {
		padding-top: 17.0667vw;
		padding-bottom: 21.3333vw;
	}

	.con18__desc {
		margin-top: 3.2vw;
		margin-bottom: 0;
	}

	.con18__tabs {
		gap: 1.6vw;
		margin-top: 10.6667vw;
	}

	.con18__tab {
		min-width: 40vw;
		padding: 3.2vw 4.2667vw;
		border-radius: 50vw;
	}

	.con18__tab.is-active::before {
		top: -2.1333vw;
		width: 5.3333vw;
		border-width: 1.6vw;
	}

	.con18__gallery {
		margin-top: 4.2667vw;
		padding-left: 0;
	}

	.con18__photo {
		width: 74.6667vw;
		border-radius: 5.3333vw;
	}

	/* 화살표 중심 = 카드 사이 틈 중앙 · 사진 74.6667 + 틈(slide.js spaceBetween 4.6194) − 화살표 8.5333 */
	.con18__nav {
		gap: 70.7528vw;
	}

	.con18__arrow {
		width: 8.5333vw;
		aspect-ratio: 1;
		padding: 0;
		align-items: center;
		justify-content: center;
	}

	.con18__arrow-icon {
		width: 5.3333vw;
	}

	.con18__empty {
		padding-block: 17.0667vw;
	}
}

/* /merge-build:con18 */
/* merge-build:con19 */
/* con19 — 가로 트랙(인트로 1905 + 카드 6장)을 섹션이 잘라 초기엔 인트로만 노출 · 좌측 초록 띠는 트랙 위 고정 / 모바일은 트랙 해제 후 인트로·카드 column 1열로 접는다 */
.con19 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100dvh; /* 섹션 전체 pin 이라 뷰포트보다 낮으면 아래가 비어 보임 — 트랙 블록은 세로 중앙 */
}

.con19_iner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 래퍼가 섹션 높이를 채워야 absol 띠(top/bottom:0)도 100dvh 가 된다 */
}

.con19__track {
  width: max-content;
}

.con19__intro {
  flex: none;
  width: calc(var(--px) * 1905);
  padding-top: calc(var(--px) * 261);
}

.con19__head {
  margin-top: calc(var(--px) * 26);
}

.con19__arrow {
  right: calc(var(--px) * -164);
}

.con19__donut {
  top: calc(var(--px) * 149);
  right: calc(var(--px) * -269);
}

.con19__list {
  flex: none;
  gap: calc(var(--px) * 100);
  padding: calc(var(--px) * 93) 0 calc(var(--px) * 93) calc(var(--px) * 388);
  font-family: var(--font-suit);
  color: #000000;
}

.con19__item {
  gap: calc(var(--px) * 101);
}

.con19__item-body {
  width: calc(var(--px) * 363);
  padding-top: calc(var(--px) * 309);
}

.con19__item-num {
  width: calc(var(--px) * 32);
  padding-block: calc(var(--px) * 14.2);
  font-family: var(--font-anton);
  font-size: var(--bodyL);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.025em;
  color: #ffffff;
  text-align: center;
  background-color: var(--secondary);
  border-radius: calc(var(--px) * 16);
}

.con19__item-title {
  min-height: calc(var(--px) * 100); /* 제목 2줄 자리 고정 — 1줄 제목이어도 본문 시작선이 카드마다 같다 */
  margin-top: calc(var(--px) * 2);
  font-size: var(--titleM);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.06em;
}

.con19__item-desc {
  margin-top: calc(var(--px) * 48);
  font-size: var(--bodyXL);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.04em;
}

.con19__item--support .con19__item-desc {
  font-family: var(--font-pretendard);
}

.con19__map-num {
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  text-align: center;
}

.con19__map-num--us {
  top: calc(var(--px) * 141);
  left: calc(var(--px) * 14);
  width: calc(var(--px) * 85);
  padding-block: calc(var(--px) * 29.4);
  font-size: var(--headS);
  color: #ffffff;
}

.con19__map-num--market {
  top: calc(var(--px) * 258);
  right: calc(var(--px) * 47);
  width: calc(var(--px) * 55);
  padding-block: calc(var(--px) * 20.1);
  font-size: var(--bodyS);
}

.con19__map-num--intl {
  right: calc(var(--px) * 14);
  bottom: calc(var(--px) * 270);
  width: calc(var(--px) * 63);
  padding-block: calc(var(--px) * 21.8);
  font-size: var(--bodyXL);
  color: #ffffff;
}

.con19__segments {
  left: calc(var(--px) * 82);
  bottom: calc(var(--px) * 77);
  display: grid;
  grid-template-columns: calc(var(--px) * 196) auto;
  row-gap: calc(var(--px) * 37);
}

.con19__segment {
  gap: calc(var(--px) * 6);
}

.con19__segment--market {
  grid-column: 1 / -1;
}

.con19__segment-value {
  font-family: var(--font-anton);
  font-size: var(--subheadL);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  color: var(--tertiary);
}

.con19__logistics {
  right: 0;
  bottom: calc(var(--px) * 158);
  left: 0;
  font-weight: 800;
  letter-spacing: -0.06em;
  color: #ffffff;
}

.con19__logistics-title {
  font-size: var(--titleS);
  line-height: 1.124;
}

.con19__logistics-title strong {
  font-weight: inherit;
  color: #f0daa0;
}

.con19__branches {
  width: calc(var(--px) * 348);
  gap: calc(var(--px) * 13.4) calc(var(--px) * 7.4);
  margin-top: calc(var(--px) * 28);
}

.con19__branch {
  width: calc(var(--px) * 111); /* TEXT-WIDTH: 지점 알약은 글자 수와 무관한 같은 폭 셀(3-3-2 그리드) */
  padding-block: calc(var(--px) * 8.4);
  font-size: var(--bodyXL);
  line-height: 1.738;
  text-align: center;
  background-color: #a40a1e;
  border-radius: 50vw;
}

.con19__truck {
  bottom: calc(var(--px) * -29);
  left: calc(var(--px) * 102);
}

.con19__band {
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--px) * 116);
  padding-right: calc(var(--px) * 6);
  padding-bottom: calc(var(--px) * 22);
  background-color: var(--primary);
}

.con19__brand {
  flex-direction: column-reverse;
  gap: calc(var(--px) * 22);
  text-transform: uppercase;
}

.con19__brand-donut {
  margin-top: calc(var(--px) * 22);
  margin-left: calc(var(--px) * 8);
}

.con19__brand-word {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  opacity: 0.502;
  -webkit-text-fill-color: rgb(255 255 255 / 0.1);
  -webkit-text-stroke: 1px #ffffff;
}

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

.con19__arrow {
    width: calc(var(--px)*79);
    aspect-ratio: 79 / 67;
}

.con19__donut {
    width: calc(var(--px)*524);
    aspect-ratio: 524 / 520;
}

.con19__item-img.con19__item-img--global {
    width: calc(var(--px)*484);
    aspect-ratio: 484 / 634;
}

.con19__segment-label.con19__segment-label--market {
    width: calc(var(--px)*180);
    aspect-ratio: 180 / 18;
}

.con19__segment-label.con19__segment-label--intl {
    width: calc(var(--px)*135);
    aspect-ratio: 135 / 17;
}

.con19__segment-label.con19__segment-label--us {
    width: calc(var(--px)*74);
    aspect-ratio: 74 / 17;
}

.con19__item-img {
    width: calc(var(--px)*484);
    aspect-ratio: 484 / 635;
}

.con19__truck {
    width: calc(var(--px)*267);
    aspect-ratio: 267 / 168;
}

.con19__brand-donut {
    width: calc(var(--px)*79);
    aspect-ratio: 79 / 99;
}
/* /IMG:AUTO con19 END */

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

.con19__title {
    font-family: var(--font-suit);
    font-size: var(--displayM);
    font-weight: 800;
    letter-spacing: -0.06em;
    text-align: center;
    color: #000000;
}

.con19__title-accent {
    color: #166938;
}

.con19__brand {
    font-family: var(--font-anton);
    font-size: calc(var(--px)*96.1);
    font-weight: 400;
    letter-spacing: 0.05em;
    color: #ffffff;
}
/* /FONT:AUTO con19 END */

/* INK:AUTO con19 */
.con19__brand-word.con19__brand-word--kreme { margin-top: calc(var(--px) * -9.91); margin-bottom: calc(var(--px) * 31.55); } /* base 0,0 */
.con19__brand-word.con19__brand-word--krispy { margin-top: calc(var(--px) * -8.91); margin-bottom: calc(var(--px) * 24.18); } /* base 0,0 */
.con19__title-accent { margin-top: calc(var(--px) * -4.27); margin-bottom: calc(var(--px) * -16.72); } /* base 0,0 */
.con19__title { margin-top: calc(var(--px) * -4.27); margin-bottom: calc(var(--px) * -5.27); } /* base 0,0 */
/* /INK:AUTO con19 END */


@media (max-width:599px) {
  .con19 { display: block; min-height: 0; }
  .con19_iner { display: block; }
  .con19__track { flex-direction: column; width: auto; }
  .con19__intro { width: auto; padding-top: 14.9333vw; }
  .con19__logo { width: 25.6vw; }
  .con19__head { margin-top: 4.2667vw; }
  .con19__donut { top: 2.1333vw; right: -8.5333vw; width: 24vw; }
  .con19__list { flex-direction: column; align-items: center; gap: 17.0667vw; padding: 14.9333vw 6.4vw; }
  .con19__item { flex-direction: column; align-items: center; gap: 6.4vw; }
  .con19__item-img,
  .con19__item-img.con19__item-img--global { width: 84vw; }
  .con19__item-img.con19__item-img--global { aspect-ratio: 84 / 99.6331; overflow: hidden; border-radius: 3.2vw; } /* 84×634/484 − 크롭 10.4 = 99.6331 — auto 면 lazy 로드 때 높이가 늘어 con20 핀 시작점이 어긋남 */
  .con19__item-img--global img { margin-top: -10.4vw; }
  .con19__item--photo .con19__item-img { width: 64vw; } /* 사진만 있는 항목은 작게 — 지도·물류 오버레이 항목만 84vw */
  .con19__item-body { width: auto; padding-top: 0; align-items: center; }
  .con19__item-num { width: 8.5333vw; padding-block: 3.2vw; font-size: var(--subheadL); border-radius: 4.2667vw; }
  .con19__item-title { min-height: 0; margin-top: 0.5333vw; }
  .con19__item-desc { margin-top: 4.2667vw; }
  .con19__map-num--us { top: 14.0711vw; left: 2.4298vw; width: 14.7521vw; padding-block: 5.1025vw; }
  .con19__map-num--market { top: 34.3769vw; right: 8.157vw; width: 9.5455vw; padding-block: 3.4884vw; }
  .con19__map-num--intl { right: 2.4298vw; bottom: 46.8595vw; width: 10.9339vw; padding-block: 3.7835vw; }
  .con19__segments { left: 14.2314vw; bottom: 13.3636vw; grid-template-columns: 45.8667vw auto; row-gap: 8.5333vw; }
  .con19__segment { gap: 1.0413vw; }
  .con19__segment-label.con19__segment-label--market { width: 42.1333vw; }
  .con19__segment-label.con19__segment-label--intl { width: 31.6vw; }
  .con19__segment-label.con19__segment-label--us { width: 17.3333vw; }
  .con19__segment-value { font-size: 6.4vw; }
  .con19__logistics { bottom: 27.4215vw; }
  .con19__branches { width: 60.3967vw; gap: 2.3256vw 1.2843vw; margin-top: 5.3333vw; }
  .con19__branch { width: 19.2645vw; padding-block: 1.4579vw; }
  .con19__truck { bottom: -5.0331vw; left: 17.7025vw; width: 46.3388vw; }
}

/* /merge-build:con19 */
/* merge-build:con20 */
/* con20 — 모바일: grid 1열 세로 스택(문구 → 이미지 → 문구) */
.con20_iner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: calc(var(--px)*90);
  padding: calc(var(--px)*83) 0 calc(var(--px)*82);
}

.con20__phrase--lead {
  justify-self: end;
  margin-right: calc(var(--px)*10);
}

.con20__phrase--tail {
  justify-self: start;
}

.con20__concept--box,
.con20__concept--glaze,
.con20__concept--assorted {
  top: 0;
  left: 0;
}

/* 초기 숨김 상태층 — 애니 phase 가 autoAlpha 로 연다 */
.con20__concept--box,
.con20__concept--glaze,
.con20__concept--assorted,
.con20__brand {
  visibility: hidden;
  opacity: 0;
}

.con20__brand {
  top: calc(var(--px)*179);
  left: 0;
  right: 0;
  /* FONT: 참조밴드 spec(ref__con20__motion) 카피라 spec-font-to-css 가 못 읽는다 — 밴드 texts[0~2] 값 수기 */
  color: #ffffff;
  text-align: center;
}

.con20__brand-copy {
  margin-top: calc(var(--px)*7);
  font-family: var(--font-suit);
  font-size: var(--headM);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 1.2;
}

.con20__brand-word {
  margin-top: calc(var(--px)*12);
  font-family: var(--font-anton);
  font-size: calc(var(--px)*187.17);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
}

.con20__brand-word--share {
  margin-top: calc(var(--px)*-4);
  color: #f5e6c1;
}

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

.con20__concept,
.con20__concept.con20__concept--box,
.con20__concept.con20__concept--glaze,
.con20__concept.con20__concept--assorted {
    width: calc(var(--px)*506);
    aspect-ratio: 506 / 840;
}
/* /IMG:AUTO con20 END */

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

.con20__phrase.con20__phrase--lead {
    line-height: 1.03;
    color: #ffffff;
}

.con20__phrase.con20__phrase--tail {
    line-height: 1.69;
    color: #f5e6c1;
}
/* /FONT:AUTO con20 END */

/* INK:AUTO con20 */
.con20__phrase.con20__phrase--tail { margin-top: calc(var(--px) * -28.53); margin-bottom: calc(var(--px) * -28.52); } /* base 0,0 */
.con20__phrase.con20__phrase--lead { margin-top: calc(var(--px) * -4.11); margin-bottom: calc(var(--px) * -4.11); } /* base 0,0 */
/* /INK:AUTO con20 END */

@media (max-width:599px) {
  .con20_iner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: 6.4vw;
    padding: 17.0667vw 0;
  }

  .con20 { font-size: 10.6667vw; }

  .con20__phrase--lead,
  .con20__phrase--tail { justify-self: center; }

  .con20__phrase--lead { margin-right: 0; }

  .con20__phrase.con20__phrase--lead { margin-top: -0.5924vw; margin-bottom: -0.5924vw; }
  .con20__phrase.con20__phrase--tail { margin-top: -4.1121vw; margin-bottom: -4.1121vw; }

  .con20__concept,
  .con20__concept.con20__concept--box,
  .con20__concept.con20__concept--glaze,
  .con20__concept.con20__concept--assorted { width: 70vw; }

  /* 비주얼 행 grid-area 를 containing block 으로 삼아 겹침 — 96/506 × 70vw */
  .con20__brand {
    grid-row: 2;
    grid-column: 1;
    top: 13.2806vw;
  }

  .con20__brand-icon { width: 4.9344vw; }
  .con20__brand-copy { margin-top: 0.3675vw; }
  .con20__brand-word { margin-top: 0.6299vw; font-size: 9.8252vw; }
  .con20__brand-word--share { margin-top: -0.21vw; }
}

/* /merge-build:con20 */
/* merge-build:con21 */
/* con21 — 흰 카드(flow·하단 r150) 안에 헤드 column + 하단 초록 띠(마퀴) · 드립은 카드 뒤, 도넛 박스는 카드 앞 absol / 모바일은 카드 폭 해제·도넛 줄 축소, 박스·드립은 비율 유지 */
.con21 {
  background-color: var(--bg-color);
  overflow: visible;
  clip-path: inset(0 0 -9999px 0); /* 카드 상단 크롭(위)은 유지하고 드립 하단만 다음 섹션 위로 흘러나가게 함 */
  z-index: 1; /* con22 가 DOM 순서상 뒤라 기본 스택이 드립을 덮는다 — 드립을 위로 올림 */
}

.con21_iner {
  padding-bottom: calc(var(--px) * 222);
}

.con21__drip {
  right: calc(var(--px) * 144);
  bottom: calc(var(--px) * -42);
}

/* 카드 상단 변은 시안에서 섹션 위로 잘려 나가 border-top 없음 */
.con21__card {
  width: calc(var(--px) * 1609);
  padding-top: calc(var(--px) * 119);
  background-color: #ffffff;
  border: 1px solid #eadab0;
  border-top: 0;
  border-radius: 0 0 calc(var(--px) * 150) calc(var(--px) * 150);
  overflow: hidden;
}

.con21__donuts {
  left: 0;
  right: 0;
  bottom: calc(var(--px) * 169);
}

.con21__donuts-track {
  width: max-content;
  margin-left: calc(var(--px) * -150); /* 시안 좌측 줄의 첫 도넛 위상 */
}

.con21__donuts .con21__donuts-track {
  animation-duration: 26.6s; /* 유틸 20s 를 이기려고 2클래스 — 반세트 2220px 를 문구 마퀴(1668.5px/20s)와 같은 속도로 */
}

.con21__donut-tile {
  flex-shrink: 0;
  margin-right: calc(var(--px) * 66); /* 자산 안 도넛 주기 185 − 도넛 폭 119 = 타일 이음새 간격 */
}

.con21__title {
  margin-top: calc(var(--px) * 38);
}

.con21__btn {
  width: calc(var(--px) * 258);
  margin-top: calc(var(--px) * 43);
  background-color: var(--primary);
  border-radius: 50vw;
}

.con21__band {
  align-self: stretch;
  margin-top: calc(var(--px) * 362);
  padding-top: calc(var(--px) * 26);
  padding-bottom: calc(var(--px) * 19);
  background-color: var(--primary);
  overflow: hidden;
}

.con21__marquee {
  width: max-content;
  opacity: 0.3;
  pointer-events: none;
  margin-left: calc(var(--px) * -114);
}

.con21__marquee-item {
  flex-shrink: 0;
  padding-right: calc(var(--px) * 38);
}

.con21__box {
  bottom: calc(var(--px) * 13);
}

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

.con21__donut-tile {
    width: calc(var(--px)*674);
    aspect-ratio: 674 / 103;
}

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

.con21__box {
    width: calc(var(--px)*533);
    aspect-ratio: 533 / 590;
}
/* /IMG:AUTO con21 END */

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

.con21__head {
    font-family: var(--font-suit);
}

.con21__title {
    font-size: var(--displayM);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.07;
    color: #000000;
}

.con21__title-accent {
    color: #166938;
}

.con21__btn {
    font-size: var(--bodyXL);
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 2.95;  /* OVR */
    color: #fef7e5;
}

.con21__marquee {
    font-family: var(--font-anton);
    font-size: var(--subheadL);
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1;  /* OVR */
    color: #ffffff;
}
/* /FONT:AUTO con21 END */

/* INK:AUTO con21 */
.con21__title-accent { margin-top: calc(var(--px) * -4.27); margin-bottom: calc(var(--px) * -16.72); } /* base 0,0 */
.con21__title { margin-top: calc(var(--px) * 33.73); margin-bottom: calc(var(--px) * -5.27); } /* base 38,0 */
.con21__marquee-item { margin-top: calc(var(--px) * -1); margin-bottom: calc(var(--px) * 1); } /* base 0,0 */
/* /INK:AUTO con21 END */

@media (max-width:599px) {
  .con21_iner { padding-bottom: 12.8vw; }
  .con21__drip { width: 85.7824vw; right: 8.1858vw; bottom: -2.3875vw; }
  .con21__card { width: 91.4667vw; padding-top: 12.8vw; border-radius: 0 0 8.5333vw 8.5333vw; }
  .con21__donut-tile { width: 53.3333vw; margin-right: 5.2226vw; }
  .con21__donuts { bottom: 16vw; }
  .con21__donuts-track { margin-left: -12.8vw; }
  .con21__badge { width: 24vw; }
  .con21__title { margin-top: 5.3333vw; margin-bottom: -0.8432vw; font-size: var(--titleL); }
  .con21__title-accent { margin-top: -0.6832vw; margin-bottom: -2.6752vw; }
  .con21__btn { width: 42.6667vw; margin-top: 6.4vw; }
  .con21__band { margin-top: 56vw; padding-top: 4.2667vw; padding-bottom: 3.2vw; }
  .con21__marquee { margin-left: -18.1333vw; white-space: nowrap; } /* 마퀴 트랙 = 원자 UI */
  .con21__marquee-item { padding-right: 6.4vw; margin-top: -0.16vw; margin-bottom: 0.16vw; }
  .con21__box { width: 56vw; bottom: 2.1333vw; }
}

/* /merge-build:con21 */
/* merge-build:con22 */
/* con22 — 제목·탭 column + 흰 카드(단위 라벨 + 표) + 카드 밖 주석 / 모바일은 표 가로 스크롤 후보 */
.con22 {
  background-color: var(--bg-color);
}

.con22_iner {
  padding-top: calc(var(--px) * 46);
  padding-bottom: calc(var(--px) * 61);
}

.con22__tabs {
  gap: calc(var(--px) * 8);
  margin-top: calc(var(--px) * 38);
}

.con22__tab {
  width: calc(var(--px) * 225);
  padding-block: calc(var(--px) * 20);
  border-radius: 50vw;
  letter-spacing: inherit; /* reset.css 폼 요소 리셋이 letter-spacing 을 상속시키지 않음 */
  background-color: var(--tertiary);
  cursor: pointer;
  transition: background-color .25s ease-out, color .25s ease-out;
}

@media (hover: hover) {
  .con22__tab:not(.is-active):hover {
    background-color: color-mix(in srgb, var(--tertiary) 85%, var(--primary));
  }
}

.con22__tab.is-active {
  background-color: var(--primary);
}

/* 활성 글자색은 상태가 소유 — FONT 블록의 모디파이어 색은 초기(표준형 활성) 기준이라 위에서 덮는다 */
.con22__tabs > .con22__tab.is-active {
  color: #fef7e5;
}

.con22__tabs > .con22__tab:not(.is-active) {
  color: #000000;
}

.con22__tab:not(.is-active) > .con22__tab-dot {
  display: none;
}

.con22__tab-dot {
  top: calc(var(--px) * -16);
  width: calc(var(--px) * 32);
  aspect-ratio: 1;
  background-color: var(--primary);
  border: 11px solid #ffe242;
  border-radius: 50%;
}

.con22__panels {
  width: calc(var(--px) * 1549);
  margin-top: calc(var(--px) * 45);
}

.con22__panel[hidden] {
  display: none;
}

/* 탭 전환 모션 — .is-tabbed 는 첫 클릭에 붙어 첫 로드의 스크롤 reveal(GSAP)과 겹치지 않음 */
.con22.is-tabbed .con22__tab.is-active > .con22__tab-dot {
  animation: con22-dot-pop .4s cubic-bezier(.34, 1.56, .64, 1) both;
}

.con22.is-tabbed .con22__panel:not([hidden]) {
  & .con22__card {
    animation: con22-rise .45s ease-out both;
  }

  & .con22__table tbody tr {
    animation: con22-row .4s ease-out both;
    animation-delay: calc(.12s + var(--row, 0) * .035s);
  }

  & .con22__notes {
    animation: con22-fade .4s ease-out .3s both;
  }
}

@keyframes con22-dot-pop {
  from { transform: scale(0); opacity: 0; }
}

@keyframes con22-rise {
  from { transform: translateY(calc(var(--px) * 30)); opacity: 0; }
}

@keyframes con22-row {
  from { transform: translateY(20%); opacity: 0; }
}

@keyframes con22-fade {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .con22__tab {
    transition: none;
  }

  .con22.is-tabbed .con22__tab-dot,
  .con22.is-tabbed .con22__panel * {
    animation: none;
  }
}

.con22__card {
  padding: calc(var(--px) * 23) calc(var(--px) * 82) calc(var(--px) * 57);
  background-color: #ffffff;
  border: 1px solid #eadab0;
  border-radius: calc(var(--px) * 30);
}

.con22__unit {
  align-self: flex-end;
  margin-bottom: calc(var(--px) * 5);
}

.con22__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;

  & th,
  & td {
    padding-block: calc(var(--px) * 9);
    vertical-align: middle;
    border-right: 1px solid rgba(0, 0, 0, 0.11);
    border-bottom: 1px solid rgba(0, 0, 0, 0.11);

    &:last-child {
      border-right: 0;
    }
  }

  & tbody tr:last-child > * {
    border-bottom-color: #000000;
  }
}

.con22__col--group {
  width: calc(var(--px) * 202);
}

.con22__col--item {
  width: calc(var(--px) * 218);
}

.con22__col--amount {
  width: calc(var(--px) * 205);
}

.con22__head-cell {
  background-color: #f8f5ed;
}

.con22__head-cell:last-child,
.con22__note {
  padding-left: calc(var(--px) * 22);
}

.con22__notes {
  margin-top: calc(var(--px) * 26);
  padding-left: calc(var(--px) * 85);
  opacity: 0.702;
}

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

.con22__title {
    font-size: var(--displayM);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.07;
    text-align: center;
    color: #000000;
}

.con22__tabs {
    font-size: var(--subheadM);
    font-weight: 600;
    letter-spacing: -0.06em;
    line-height: 1.36;
}

.con22__tab.con22__tab--standard {
    color: #fef7e5;
}

.con22__tab.con22__tab--core,
.con22__panel {
    color: #000000;
}

.con22__card {
    text-align: center;
}

.con22__unit {
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.44;
}

.con22__head-cell {
    font-size: var(--subheadM);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.43;  /* OVR */
}

.con22__group {
    font-size: var(--subheadS);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.43;  /* OVR */
}

.con22__item {
    font-size: var(--subheadS);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.43;  /* OVR */
}

.con22__amount {
    font-size: var(--subheadS);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.43;  /* OVR */
}

.con22__note {
    font-size: var(--subheadS);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.43;  /* OVR */
}

.con22__notes {
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.1em;  /* OVR */
    line-height: 1.67;  /* OVR */
}
/* /FONT:AUTO con22 END */

/* INK:AUTO con22 */
.con22__notes { margin-top: calc(var(--px) * 19.47); margin-bottom: calc(var(--px) * -6.46); } /* base 26,0 */
.con22__title { margin-top: calc(var(--px) * -4.27); margin-bottom: calc(var(--px) * -5.27); } /* base 0,0 */
.con22__unit { margin-top: calc(var(--px) * -4.46); margin-bottom: calc(var(--px) * 0.55); } /* base 0,5 */
/* /INK:AUTO con22 END */

@media (max-width:599px) {
  .con22_iner { padding-top: 8.5333vw; padding-bottom: 10.6667vw; }
  .con22__title { margin-top: -0.6832vw; margin-bottom: -0.8432vw; }
  .con22__tabs { gap: 1.0667vw; margin-top: 6.4vw; }
  .con22__tab { width: 42vw; padding-block: 3.2vw; }
  .con22__tab-dot { top: -2.56vw; width: 5.12vw; border-width: 1.76vw; }
  .con22__panels { width: 91.4667vw; margin-top: 6.4vw; }
  .con22__card { padding: 4.2667vw 4.2667vw 8.5333vw; border-radius: 5.3333vw; overflow-x: auto; }
  .con22__unit { margin-top: -0.7136vw; margin-bottom: 0.088vw; }
  .con22__table {
    min-width: 200vw;

    & th,
    & td { padding-block: 1.6vw; }
  }
  .con22__col--group { width: 30vw; }
  .con22__col--item { width: 32vw; }
  .con22__col--amount { width: 30vw; }
  .con22__head-cell:last-child,
  .con22__note { padding-left: 3.2vw; }
  .con22__notes { margin-top: 3.1152vw; margin-bottom: -1.0336vw; padding-left: 0; font-size: 2.9333vw; }
}

/* /merge-build:con22 */
/* merge-build:con23 */
/* con23 — 제목·8단계 카드(4열 grid 2행)·CTA 를 column flow 로, S자 도로+도넛+트럭은 .front 앞 absol 층 / 모바일은 카드 2열·도로 층 축소 예정 */
.con23 {
  background-color: var(--bg-color);
}

.con23__road {
  top: calc(var(--px) * 207);
  left: 0;
  right: 0;
}

.con23__donuts {
  top: calc(var(--px) * 288);
  left: calc(var(--px) * 423);
  gap: calc(var(--px) * 23);
}

.con23__truck {
  top: calc(var(--px) * 179);
  right: calc(var(--px) * 372);
}

.con23_iner {
  padding-top: calc(var(--px) * 63);
  padding-bottom: calc(var(--px) * 118);
}

.con23__steps {
  display: grid;
  grid-template-columns: repeat(4, calc(var(--px) * 293));
  column-gap: calc(var(--px) * 36);
  row-gap: calc(var(--px) * 311);
  margin-top: calc(var(--px) * 52);
}

.con23__step {
  padding-top: calc(var(--px) * 38);
  padding-bottom: calc(var(--px) * 41);
  background-color: #ffffff;
  border: 1px solid #eadab0;
  border-radius: calc(var(--px) * 25);
}

.con23__step--open {
  background-color: var(--primary);
}

.con23__step-num {
  display: block;
  width: calc(var(--px) * 32);
  background-color: var(--secondary);
  border-radius: calc(var(--px) * 16);
}

.con23__step-text,
.con23__open-text {
  margin-top: calc(var(--px) * 11);
}

.con23__step-logo {
  bottom: calc(var(--px) * -4);
}

.con23__btn {
  width: calc(var(--px) * 258);
  margin-top: calc(var(--px) * 48);
  background-color: var(--secondary);
  border-radius: 50vw;
  --hf-color: var(--secondary);
}

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

.con23__donut {
    width: calc(var(--px)*74);
    aspect-ratio: 74 / 73;
}

.con23__truck {
    width: calc(var(--px)*303);
    aspect-ratio: 303 / 190;
}

.con23__step-logo {
    width: calc(var(--px)*178);
    aspect-ratio: 178 / 62;
}
/* /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-suit);
    font-size: var(--displayM);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.07;
    color: #000000;
}

.con23__step-num {
    font-family: var(--font-anton);
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: 0.025em;
    line-height: 2.5;  /* OVR */
    color: #ffffff;
}

.con23__step-text {
    font-family: var(--font-suit);
    font-size: var(--headS);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.21;
    color: #000000;
}

.con23__step.con23__step--open {
    color: #ffffff;
}

.con23__open-text {
    font-family: var(--font-suit);
    font-size: var(--headS);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.21;
}

.con23__btn {
    font-family: var(--font-suit);
    font-size: var(--bodyXL);
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 2.95;  /* OVR */
    color: #ffffff;
}
/* /FONT:AUTO con23 END */

/* INK:AUTO con23 */
.con23__title { margin-top: calc(var(--px) * -4.27); margin-bottom: calc(var(--px) * -5.27); } /* base 0,0 */
.con23__step-text { margin-top: calc(var(--px) * 6.56); margin-bottom: calc(var(--px) * -3.43); } /* base 11,0 */
.con23__open-text { margin-top: calc(var(--px) * 6.56); margin-bottom: calc(var(--px) * -3.43); } /* base 11,0 */
/* /INK:AUTO con23 END */

@media (max-width:599px) {
  .con23_iner { padding-top: 10.6667vw; padding-bottom: 17.0667vw; }
  .con23__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 91.4667vw; column-gap: 3.2vw; row-gap: 3.2vw; margin-top: 8.5333vw; }
  .con23__step { padding-top: 6.4vw; padding-bottom: 6.4vw; border-radius: 4.2667vw; }
  .con23__step-num { width: 6.4vw; border-radius: 3.2vw; }
  .con23__step-text, .con23__open-text { margin-top: 2.1333vw; margin-bottom: 0; }
  .con23__step-logo { width: 28vw; bottom: -1.0667vw; }
  .con23__btn { width: 42.6667vw; margin-top: 8.5333vw; }
}


/* /merge-build:con23 */
/* merge-build:con24 */
/* con24 — FAQ 아코디언. 펼침 = .con24__item--open (모바일: 리스트 폭 100%·행 패딩 축소) */
.con24 {
  padding: calc(var(--px)*116) 0 calc(var(--px)*123);
  background-color: #fff;
}

.con24__head {
  gap: calc(var(--px)*24);
}

.con24__list {
  width: calc(var(--px)*1288);
  margin-top: calc(var(--px)*55);
  border-top: 1px solid #000;
}

.con24__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.051);
}

.con24__toggle {
  width: 100%;
  padding: calc(var(--px)*32) calc(var(--px)*41) calc(var(--px)*31) calc(var(--px)*41);
  gap: calc(var(--px)*42);
  background: none;
  border: 0;
  cursor: pointer;
  transition: background-color .25s ease-out;
}

.con24__arrow {
  display: block;
  flex-shrink: 0;
  margin-left: auto;
  opacity: 0.329;
  transition: opacity .25s ease-out, transform .3s ease-out;
}

@media (hover: hover) {
  .con24__toggle:hover {
    background-color: #fbf8f0;

    & .con24__arrow {
      opacity: 1;
    }
  }
}

/* 답변 여닫이 = 0fr↔1fr — 높이 auto 를 transition 하려는 것 */
.con24__fold {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(0.22, 1, 0.36, 1); /* easeOutQuint — 기본 ease-out 은 감속이 약해 리니어로 보임 */
}

.con24__fold-inner {
  min-height: 0;
  overflow: hidden;
}

.con24__answer {
  gap: calc(var(--px)*27);
  padding: calc(var(--px)*36) calc(var(--px)*40) calc(var(--px)*40) calc(var(--px)*126);
  border-top: 1px solid rgba(0, 0, 0, 0.051);
  background-color: #fbf8f0;
}

.con24__item--open {
  & .con24__arrow {
    opacity: 1;
    transform: rotate(180deg);
  }

  & .con24__fold {
    grid-template-rows: 1fr;
  }
}

.con24__answer-text {
  opacity: 0.8;
}

.con24__badge {
  flex-shrink: 0;
  width: calc(var(--px)*67);
  margin-top: calc(var(--px)*-1);
  padding: calc(var(--px)*2) 0;
  border-radius: 50vw;
  background-color: var(--secondary);
}

.con24__more {
  width: calc(var(--px)*258);
  margin-top: calc(var(--px)*46);
  padding: calc(var(--px)*16) 0;
  border-radius: calc(var(--px)*30);
  background-color: var(--primary);
  cursor: pointer;
}

.con24__item--hidden,
.con24__more--hidden {
  display: none;
}

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

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

.con24__label {
    font-family: var(--font-anton);
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: 0.0933em;  /* OVR */
    line-height: 1.2;  /* OVR */
}

.con24__title {
    font-family: var(--font-suit);
    font-size: var(--displayM);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.07;
}

.con24__title-accent {
    color: #166938;
}

.con24__toggle {
    font-family: var(--font-suit);
    text-align: center;
}

.con24__q-mark {
    font-size: var(--titleL);
    font-weight: 900;
    letter-spacing: -0.0896em;  /* OVR */
    line-height: 1.2;  /* OVR */
    color: #166938;
}

.con24__q-text {
    font-size: var(--headS);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.3;  /* OVR */
    color: #000000;
}

.con24__badge {
    font-family: var(--font-suit);
    font-size: var(--bodyM);
    font-weight: 600;
    letter-spacing: -0.06em;
    line-height: 1.5;  /* OVR */
    text-align: center;
    color: #ffffff;
}

.con24__answer-text {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.5;
    color: #000000;
}

.con24__more {
    font-family: var(--font-suit);
    font-size: var(--bodyXL);
    font-weight: 700;
    letter-spacing: -0.0907em;  /* OVR */
    line-height: 1.35;  /* OVR */
    text-align: center;
    color: #ffffff;
}
/* /FONT:AUTO con24 END */

/* INK:AUTO con24 */
.con24__title-accent { margin-top: calc(var(--px) * -4.27); margin-bottom: calc(var(--px) * -16.72); } /* base 0,0 */
.con24__q-mark { margin-top: calc(var(--px) * -9.5); margin-bottom: calc(var(--px) * -8.5); } /* base 0,0 */
.con24__answer-text { margin-top: calc(var(--px) * -6); margin-bottom: calc(var(--px) * -6); } /* base 0,0 */
.con24__q-text { margin-top: calc(var(--px) * -5.7); margin-bottom: calc(var(--px) * -4.69); } /* base 0,0 */
.con24__title { margin-top: calc(var(--px) * -4.27); margin-bottom: calc(var(--px) * -5.27); } /* base 0,0 */
.con24__label { margin-top: calc(var(--px) * -3.5); margin-bottom: calc(var(--px) * -1.5); } /* base 0,0 */
/* /INK:AUTO con24 END */


@media (max-width:599px) {
  .con24 { padding: 17.0667vw 0 21.3333vw; }
  .con24__head { gap: 4.2667vw; }
  .con24__list { width: 91.4667vw; margin-top: 8.5333vw; }
  .con24__toggle { padding: 5.3333vw 4.2667vw; gap: 3.2vw; text-align: left; }
  .con24__arrow { width: 4.2667vw; }
  .con24__answer { gap: 4.2667vw; padding: 5.3333vw 4.2667vw 6.4vw; }
  .con24__badge { width: 10.6667vw; margin-top: 0; padding: 0.5333vw 0; }
  .con24__more { width: 42.6667vw; margin-top: 8.5333vw; padding: 3.2vw 0; border-radius: 50vw; }
  .con24__title { margin-top: -0.6832vw; margin-bottom: -0.8432vw; }
  .con24__title-accent { margin-top: -0.6832vw; margin-bottom: -2.6752vw; }
  .con24__label { margin-top: -0.56vw; margin-bottom: -0.24vw; }
  .con24__q-mark { margin-top: -1.52vw; margin-bottom: -1.36vw; }
  .con24__q-text { margin-top: -0.912vw; margin-bottom: -0.7504vw; }
  .con24__answer-text { margin-top: -0.96vw; margin-bottom: -0.96vw; }
}

/* /merge-build:con24 */
/* merge-build:con25 */
/* con25 — 창업 CTA 좌우 분할 */
.con25__panel {
  flex-shrink: 0;
  &.con25__panel--left {
    width: calc(var(--px) * 953);
    background-color: var(--primary);
  }
  &.con25__panel--right {
    width: calc(var(--px) * 952);
    background-color: var(--secondary);
    overflow: hidden;
  }
}

.con25__marquee {
  top: calc(var(--px) * 357); /* 잉크 상단 381 − 행간 여백 24 */
  left: 0;
  width: max-content;
  white-space: nowrap; /* 마퀴 트랙 = 원자 UI */
  text-transform: uppercase;
  pointer-events: none;
}

.con25__marquee-item {
  flex-shrink: 0;
}

.con25__intro {
  padding: calc(var(--px) * 236) 0 0 calc(var(--px) * 231);
}

.con25__desc {
  margin-top: calc(var(--px) * 39);
}

.con25__btn {
  width: calc(var(--px) * 258);
  margin-top: calc(var(--px) * 60);
  border: 1px solid #fff;
  border-radius: 50vw;
}

.con25__stage {
  padding: calc(var(--px) * 138) 0 0 calc(var(--px) * 18);
}

.con25__logo {
  top: calc(var(--px) * -85);
}

.con25__arch {
  width: calc(var(--px) * 267);
  padding: calc(var(--px) * 87) 0 calc(var(--px) * 64);
  overflow: hidden;
  background-color: #fff;
  border-radius: calc(var(--px) * 90) calc(var(--px) * 90) 0 0;
}

.con25__track {
  width: max-content;
  margin-left: calc(var(--px) * -180);
  gap: calc(var(--px) * 23);
  padding-right: calc(var(--px) * 23);
  animation: v-marquee-half 12s linear infinite;
}

.con25__donut {
  flex-shrink: 0;
}

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

.con25__belt-donut {
  right: calc(var(--px) * 264);
  bottom: calc(var(--px) * 53);
}

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

.con25__donut.con25__donut--choco-white {
    width: calc(var(--px)*108);
    aspect-ratio: 108 / 88;
}

.con25__donut.con25__donut--choco {
    width: calc(var(--px)*104);
    aspect-ratio: 104 / 90;
}

.con25__donut.con25__donut--glazed {
    width: calc(var(--px)*106);
    aspect-ratio: 106 / 92;
}

.con25__donut.con25__donut--sprinkle {
    width: calc(var(--px)*102);
    aspect-ratio: 102 / 89;
}

.con25__donut.con25__donut--glazed-alt {
    width: calc(var(--px)*116);
    aspect-ratio: 116 / 77;
}

.con25__donut.con25__donut--choco-alt {
    width: calc(var(--px)*112);
    aspect-ratio: 112 / 78;
}

.con25__belt-img {
    width: calc(var(--px)*889);
    aspect-ratio: 889 / 474;
}

.con25__belt-donut {
    width: calc(var(--px)*350);
    aspect-ratio: 350 / 263;
}
/* /IMG:AUTO con25 END */

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

.con25__intro {
    font-family: var(--font-suit);
}

.con25__title {
    font-size: var(--displayM);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.07;
}

.con25__title-accent {
    color: #f5e6c1;
}

.con25__desc {
    font-size: var(--subheadM);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.36;
}

.con25__btn {
    font-size: var(--bodyXL);
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 2.85;  /* OVR psd:3.25 */
    text-align: center;
}

.con25__marquee {
    font-family: var(--font-anton);
    font-size: calc(var(--px)*200);
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.13;
    text-align: center;
}
/* /FONT:AUTO con25 END */

/* INK:AUTO con25 */
.con25__title-accent { margin-top: calc(var(--px) * -4.27); margin-bottom: calc(var(--px) * -16.72); } /* base 0,0 */
.con25__desc { margin-top: calc(var(--px) * 34.04); margin-bottom: calc(var(--px) * -4.93); } /* base 39,0 */
.con25__title { margin-top: calc(var(--px) * -4.27); margin-bottom: calc(var(--px) * -5.27); } /* base 0,0 */
/* /INK:AUTO con25 END */

@media (max-width:599px) {
  .con25_iner { flex-direction: column; }
  .con25__panel {
    &.con25__panel--left, &.con25__panel--right { width: 100vw; }
  }
  .con25__intro { padding: 21.3333vw 6.4vw; align-items: center; }
  .con25__desc { margin-top: 6.4vw; }
  .con25__btn { width: 42.6667vw; margin-top: 8.5333vw; }
  /* 우 패널 = PC 952 기준 등비 축소(N×100/952vw) — bg_img 와 벨트 정렬 보존 */
  .con25__stage { padding: 14.4958vw 0 0 1.8908vw; }
  .con25__marquee { top: 37.5vw; font-size: 21.0084vw; }
  .con25__logo { top: -8.9286vw; width: 15.7563vw; }
  .con25__arch { width: 28.0462vw; padding: 9.1387vw 0 6.7227vw; border-radius: 9.4538vw 9.4538vw 0 0; }
  .con25__track { margin-left: -18.9076vw; gap: 2.416vw; padding-right: 2.416vw; }
  .con25__donut {
    &.con25__donut--choco-white { width: 11.3445vw; }
    &.con25__donut--choco { width: 10.9244vw; }
    &.con25__donut--glazed { width: 11.1345vw; }
    &.con25__donut--sprinkle { width: 10.7143vw; }
    &.con25__donut--glazed-alt { width: 12.1849vw; }
    &.con25__donut--choco-alt { width: 11.7647vw; }
  }
  .con25__belt { margin-top: -0.2101vw; }
  .con25__belt-img { width: 93.3824vw; }
  .con25__belt-donut { right: 27.7311vw; bottom: 5.5672vw; width: 36.7647vw; }
}

/* /merge-build:con25 */
/* merge-build:con26 */
/* con26 — 로고·제목 헤드 + 포스터 가로 슬라이드(가운데 정렬 loop, 양끝 잘림) */
.con26 {
	padding: calc(var(--px)*140) 0 calc(var(--px)*168);
	background-color: #fff;
}

.con26__head {
	gap: calc(var(--px)*20);
}

/* 특이도 2 — swiper-bundle.min.css 가 섹션 CSS 뒤(body)에 실려 .swiper 기본값을 이긴다 */
.con26_iner .con26__slider {
	width: 100%;
	margin-top: calc(var(--px)*50);
}

.con26__slider .con26__slide {
	width: auto;
}

.con26__poster--link {
	display: block;
}

/* 링크 포스터 호버 안내 — 위치·표시는 ani_con26.js(GSAP) 가 소유 */
.con26__cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 11; /* 슬라이더가 든 .front(z-index:10) 위로 */
	padding: calc(var(--px)*12) calc(var(--px)*24);
	border-radius: 50vw;
	background-color: var(--primary);
	font-family: var(--font-suit);
	font-size: var(--bodyL);
	font-weight: 700;
	letter-spacing: -0.06em;
	color: #fff;
	white-space: nowrap; /* 알약 = 원자 UI */
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
}

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

.con26__poster {
    width: calc(var(--px)*348);
    aspect-ratio: 348 / 522;
}
/* /IMG:AUTO con26 END */

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

/* INK:AUTO con26 */
.con26__title { margin-top: calc(var(--px) * -4.27); margin-bottom: calc(var(--px) * -5.27); } /* base 0,0 */
/* /INK:AUTO con26 END */

@media (max-width:599px) {
	.con26 { padding: 14.9333vw 0 17.0667vw; }
	.con26__head { gap: 3.2vw; }
	.con26_iner .con26__slider { margin-top: 8.5333vw; }
	.con26__logo { width: 32vw; }
	.con26__poster { width: 56vw; }
	/* 모바일 전용 슬라이드 버튼 — con18 화살표와 같은 모양 */
	.con26__nav { gap: 4.2667vw; margin-top: 6.4vw; }
	.con26__arrow { width: 12.8vw; aspect-ratio: 1; border-radius: 50%; background-color: var(--primary); }
	.con26__arrow-icon { width: 6.4vw; }
	.con26__title { margin-top: 0; margin-bottom: 0; } /* PC 잉크 상쇄는 모바일 폰트 기준이 아님 → M4 재측정 */
}


/* /merge-build:con26 */
/* merge-build:hero */
@charset "utf-8";

/* 모바일: 헤드라인은 2행 유지, 네온컷·슬로건 폭만 줄여 세로 스택 */
.hero_iner {
	padding-top: calc(var(--px) * 187);
	padding-bottom: calc(var(--px) * 208);
	text-transform: uppercase;
}

.hero__echo {
	bottom: calc(var(--px) * 142.34); /* 헤드라인 INK margin-bottom -65.66 만큼 내려 DOUGHNUT 과 한 줄 */
	opacity: 0.149;
}

.hero__echo--left {
	left: calc(var(--px) * -591);
}

.hero__echo--right {
	right: calc(var(--px) * -590);
}

/* 기울기·클립은 CSS 소유 — 모션이 0deg 로 펴며 화면 전체로 확대한다(자산에 구우면 못 푼다) */
.hero__neon {
	top: calc(var(--px) * 298.5);
	left: calc(var(--px) * 607.5);
	overflow: hidden;
	transform: rotate(-10.26deg);
}

.hero__neon video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 네온컷 위로 올리는 페인트 순서용 — 같은 h1 안이라 DOM 순서로 못 가른다 */
.hero__headline-product {
	position: relative;
	margin-top: calc(var(--px) * 255);
}

.hero__slogan {
	right: 0;
	bottom: calc(var(--px) * 174);
	left: 0;
	gap: calc(var(--px) * 23);
	width: fit-content;
	padding: calc(var(--px) * 11) calc(var(--px) * 65) calc(var(--px) * 10) calc(var(--px) * 62);
	border-radius: calc(var(--px) * 35);
	background: var(--secondary);
}

/* letter-spacing 0.4em 이 마지막 글자 뒤에도 붙어 flex 폭이 12.8px 넓어진다 — trailing 만 상쇄 */
.hero__slogan-text {
	margin-right: -0.4em;
}

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

.hero__slogan-icon {
    width: calc(var(--px)*73);
    aspect-ratio: 73 / 49;
}
/* /IMG:AUTO hero END */

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

.hero__echo.hero__echo--left,
.hero__echo.hero__echo--right {
    font-size: var(--displayXL);
    letter-spacing: 0em;
    line-height: 1.51;
    color: #4bee8e;
}

.hero__headline {
    font-size: var(--displayXL);
    letter-spacing: 0em;
    line-height: 1.51;
}

.hero__headline-brand {
    color: #f5e6c1;
}

.hero__headline-product {
    color: #ffffff;
}

.hero__slogan-text {
    font-size: var(--headL);
    letter-spacing: 0.4em;
    line-height: 1;  /* OVR */
    color: #ffffff;
}
/* /FONT:AUTO hero END */

/* INK:AUTO hero */
.hero__headline-brand { margin-top: calc(var(--px) * -62.66); margin-bottom: calc(var(--px) * -65.66); } /* base 0,0 */
.hero__headline-product { margin-top: calc(var(--px) * 192.34); margin-bottom: calc(var(--px) * -65.66); } /* base 255,0 */
/* /INK:AUTO hero END */

@media (max-width:599px) {
	.hero_iner { padding-top: calc(var(--hd-h) + 12.8vw); padding-bottom: 21.3333vw; }
	/* 모바일 --displayXL 은 DOUGHNUT 이 넘쳐 hero 한정 한 단계 내림 */
	.hero__headline,
	.hero__echo.hero__echo--left,
	.hero__echo.hero__echo--right { font-size: var(--displayL); }
	.hero__echo { bottom: 15.9135vw; }
	.hero__echo--left { left: -77.4053vw; }
	.hero__echo--right { right: -77.3228vw; }
	.hero__neon { top: calc(var(--hd-h) + 12.8vw + 9.2036vw); left: 21.5226vw; width: 56.4595vw; }
	.hero__headline-brand { margin-top: -5.1722vw; margin-bottom: -5.4198vw; }
	.hero__headline-product { margin-top: 15.8763vw; margin-bottom: -5.4198vw; }
	.hero__slogan { bottom: 12.8vw; gap: 3.2vw; padding: 2.1333vw 6.4vw; border-radius: 5.3333vw; }
	.hero__slogan-text { font-size: var(--headS); }
	.hero__slogan-icon { width: 9.6vw; }
	.hero__expand { position: relative; aspect-ratio: 1905 / 1013; overflow: hidden; }
	.hero__expand video { width: 100%; height: 100%; object-fit: cover; }
}


/* /merge-build:hero */