/* ============================================
   sp-samhwa.css — SP SAMHWA 페이지
   ============================================ */

:root {
	--sp-orange-red: #E52C00;
	--sp-orange: #FF4B00;
	--sp-accent: #FF4E1C;
	--sp-dark: #171B1E;
	--sp-medium-dark: #2F3235;
	--sp-line: #666A6D;
	--sp-light-text: #E6EAEE;
}

html.sp-samhwa-page,
.sp-samhwa-page {
	overflow-x: hidden;
}

/* ============================================
   Section 1: Intro (sp-intro)
   ============================================ */
/* page-specific intro overrides (base styles in common-intro.css) */
.sp-intro {
	background: #fff;
	--intro-title-color: #171B1E;
	--intro-subtitle-color: #171B1E;
}



.sp-intro__title {
	font-family: var(--Family-Google-Sans-Flex, "Google Sans Flex");
	font-weight: 500;
	color: var(--intro-title-color, #171B1E);
}

.sp-intro__subtitle {
	font-family: var(--Family-Pretendard, Pretendard);
	letter-spacing: -0.48px;
	color: var(--intro-subtitle-color, #171B1E);
	line-height: 130%;
}

.sp-mobile-br {
	display: none;
}

.sp-intro__scroll-cta {
	left: 0;
	right: 0;
	z-index: 1;
	opacity: 0;
	line-height: 140%;
}

.sp-intro__scroll-cta.is-visible {
	opacity: 1;
	transition: opacity 0.8s ease;
}

.sp-intro__ruler-track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	will-change: transform;
}

.sp-intro__ruler-track svg {
	display: block;
	flex-shrink: 0;
	width: 1904px;
	height: 30px;
}

/* ---- Section Base ---- */
.sp-sec01,
.sp-sec02,
.sp-logo1,
.sp-logo2 {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

/* ============================================
   Section 3: 01_Sec — 원형 클리핑 이미지
   ============================================ */
.sp-sec01 {
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sp-sec01__bg {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 75, 0, 0.00) 45.28%, rgba(255, 75, 0, 0.20) 100%);
	z-index: 0;
}

.sp-sec01__circles {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.sp-sec01__circle {
	position: absolute;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	will-change: transform, opacity;
}

.sp-sec01__circle--1 {
	width: 375px;
	height: 375px;
	top: 5.65%;
	left: 13.65%;
	background-image: url('../images/sp-samhwa/sec01-img01.webp');
}

.sp-sec01__circle--2 {
	width: 278px;
	height: 278px;
	top: 0;
	right: 24.32%;
	background-image: url('../images/sp-samhwa/sec01-img02.webp');
}

.sp-sec01__circle--3 {
	width: 378px;
	height: 378px;
	bottom: 2.78%;
	left: 9.58%;
	background-image: url('../images/sp-samhwa/sec01-img03.webp');
}

.sp-sec01__circle--4 {
	width: 420px;
	height: 420px;
	bottom: 0;
	right: 20.31%;
	background-image: url('../images/sp-samhwa/sec01-img04.webp');
}

.sp-sec01__circle--5 {
	width: 358px;
	height: 358px;
	top: 46.11%;
	right: 0;
	background-image: url('../images/sp-samhwa/sec01-img05.webp');
}

.sp-sec01__content {
	position: relative;
	z-index: 2;
	text-align: center;
}

.sp-sec01__text {
	font-family: var(--Family-Pretendard, Pretendard);
	font-size: var(--Size-H1, 56px);
	font-style: normal;
	font-weight: 600;
	line-height: 130%;
	letter-spacing: -1.12px;
	color: var(--Text-Primary, #171B1E);
	text-align: center;
	will-change: transform, opacity;
}

.sp-sec01__accent {
	display: inline-grid;
}
.sp-sec01__accent .ph-accent__white,
.sp-sec01__accent .ph-accent__gradient {
	grid-area: 1 / 1;
}
.sp-sec01__accent .ph-accent__gradient {
	background: linear-gradient(90deg, #F5952F, #F17D2F, #ED5134, #EB4136, #E82939) no-repeat left center;
	background-size: 100% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-font-smoothing: antialiased;
	clip-path: inset(0 100% 0 0);
}
.sp-sec01__accent .ph-accent__white {
	color: var(--Text-Primary, #171B1E);
	-webkit-text-fill-color: var(--Text-Primary, #171B1E);
	clip-path: inset(0 0 0 0);
}

/* ── Phase 5: Guide elements ── */
.sp-sec01__guide {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 860px;
	height: 860px;
	z-index: 5;
	pointer-events: none;
	opacity: 0;
}

.sp-sec01__guide-line {
	position: absolute;
	inset: 0;
	border-radius: 900px;
	border: 2px solid var(--Border-Secondary, #E2E2E2);
}

.sp-sec01__guide-line2 {
	position: absolute;
	width: 1302px;
	height: 1302px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
}

.sp-sec01__guide-line3 {
	position: absolute;
	width: 1458px;
	height: 1458px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
}

.sp-sec01__guide-line2 svg,
.sp-sec01__guide-line3 svg {
	display: block;
	width: 100%;
	height: 100%;
}

.sp-sec01__guide-line3 svg {
	animation: sp-guideLine3Rotate 70s linear infinite;
	animation-play-state: paused;
}

@keyframes sp-guideLine3Rotate {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}


.sp-sec01__guide-dots {
	position: absolute;
	inset: 0;
}

/* ── Spot dots (static positions on circle) ── */
.sp-sec01__spot-dot {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translate(-50%, -50%);
	opacity: 0;
	z-index: 1;
}

.sp-sec01__spot-dot--1 {
	top: 0.23%;
	left: 50%;
}

.sp-sec01__spot-dot--2 {
	top: 74.88%;
	left: 93.10%;
}

.sp-sec01__spot-dot--3 {
	top: 74.88%;
	left: 6.90%;
}

/* ── Act dot (follows progress head) ── */
.sp-sec01__act-dot {
	position: absolute;
	top: 0;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: -16px;
	margin-top: -14px;
	transform-origin: 16px 444px;
	opacity: 0;
	z-index: 2;
}
.sp-sec01__act-dot svg {
	scale: 1.05;
}

.sp-sec01__guide-progress {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

/* ── Phase 5: Overlay texts ── */
.sp-sec01__overlay-texts {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 6;
	text-align: center;
	pointer-events: none;
	width: 820px;
	height: 820px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sp-sec01__overlay-item {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sp-sec01__overlay-bg {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 820px;
	height: 820px;
	transform: translate(-50%, -50%);
	opacity: 0;
	will-change: opacity;
	pointer-events: none;
	z-index: -1;
	border-radius: 50%;
	overflow: hidden;
}

.sp-sec01__overlay-bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sp-sec01__overlay-text {
	position: absolute;
	color: var(--Text-White, #FFF);
	text-align: center;
	font-family: var(--Family-Pretendard, Pretendard);
	font-size: var(--Size-H1, 56px);
	font-weight: 600;
	line-height: 130%;
	letter-spacing: -1.12px;
	opacity: 0;
	white-space: nowrap;
	will-change: opacity;
}

.rwd-br {
	display: none;
}

/* ── Phase 6: Dimmed (clip-path 방식) ── */
.sp-sec01__dimmed {
	position: absolute;
	inset: 0;
	background: var(--sp-dark);
	z-index: 7;
	pointer-events: none;
	clip-path: circle(0% at 50% 50%);
	opacity: 0;
	will-change: clip-path, opacity;
}

/* ── Phase 7: Dimmed 텍스트 (ghost + fill 두 레이어) ── */
.sp-sec01__dimmed-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 8;
	text-align: center;
	pointer-events: none;
	opacity: 0;
	will-change: opacity;
}

.sp-sec01__dimmed-text-ghost,
.sp-sec01__dimmed-text-fill {
	white-space: nowrap;
}

.sp-sec01__dimmed-text-ghost {
	opacity: 0.1;
}

.sp-sec01__dimmed-text-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 1;
	clip-path: inset(0 100% 0 0);
	will-change: clip-path;
}

.sp-sec01__dimmed-text-line {
	font-family: 'Google Sans Flex', 'Google Sans', sans-serif;
	font-weight: 500;
	font-size: 56px;
	line-height: 130%;
	letter-spacing: -1.12px;
	color: #fff;
	display: block;
}

/* ============================================
   Section 4: 02_Sec — Dot Circle + Gauge
   ============================================ */
.sp-sec02 {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: var(--sp-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	will-change: opacity;
}

.anniversary-btn-top {
	z-index: 101;
}


.sp-sec02__circles {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
}

.sp-sec02__dot-circle {
	position: absolute;
	width: 1458px;
	height: 1458px;
}

.sp-sec02__linear-circle {
	position: absolute;
	width: 1302px;
	height: 1302px;
}

.sp-sec02__content {
	position: relative;
	z-index: 2;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	margin-bottom: 3.7vh;
}

.sp-sec02__dim-top,
.sp-sec02__dim-bottom {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	will-change: opacity;
}

.sp-sec02__dim-top {
	top: 0;
	height: 567px;
	background: linear-gradient(180deg, #000 45.86%, rgba(0, 0, 0, 0.00) 100%);
}

.sp-sec02__dim-bottom {
	bottom: 0;
	height: 162px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
}

.sp-sec02__vision-title {
	position: absolute;
	bottom: -7.22vh;
	left: 50%;
	transform: translateX(-50%);
	z-index: 0;
	width: 840px;
	height: 338px;
	display: flex;
	align-items: center;
}

.sp-sec02__images {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	will-change: transform;
}

.sp-sec02__phase8-bg {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	will-change: opacity;
}

.sp-sec02__phase8-bg--img0 {
	z-index: 0;
	opacity: 1;
	will-change: transform, opacity;
}

.sp-sec02__phase8-bg--img0 .sp-sec02__phase8-bg-img {
	opacity: 1;
	transform: scale(1.2);
}

.sp-sec02__phase8-bg--img1 {
	z-index: 2;
	opacity: 1;
	clip-path: inset(100% 0 0 0);
	will-change: clip-path;
}

.sp-sec02__phase8-bg--img1 .sp-sec02__phase8-bg-img {
	opacity: 1;
	transform: scale(1);
}

.sp-sec02__phase8-bg--img2 {
	z-index: 3;
	opacity: 1;
	clip-path: inset(100% 0 0 0);
	will-change: clip-path;
}

.sp-sec02__phase8-bg--img2 .sp-sec02__phase8-bg-img {
	opacity: 1;
	transform: scale(1);
}

.sp-sec02__phase8-bg--img3 {
	z-index: 4;
	opacity: 1;
	clip-path: inset(100% 0 0 0);
	will-change: clip-path;
}

.sp-sec02__phase8-bg--img3 .sp-sec02__phase8-bg-img {
	opacity: 1;
	transform: scale(1);
}

.sp-sec02__phase8-bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.2);
	opacity: 0;
	will-change: transform, opacity;
}

.sp-sec02__title {
	position: relative;
	z-index: 1;
	font-family: 'Google Sans Flex', 'Google Sans', sans-serif;
	font-weight: 500;
	font-size: var(--Size-D3, 80px);
	font-style: normal;
	line-height: 100%;
	letter-spacing: -1.12px;
	color: #000;
	white-space: nowrap;
}

.sp-sec02.is-dark-entry {
	background: var(--sp-dark);
}

.sp-sec02.is-dark-entry .sp-sec02__title {
	color: #fff;
}

.sp-sec02__card {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	opacity: 0;
	pointer-events: none;
	will-change: opacity;
}

.sp-sec02__card-label {
	font-family: 'Google Sans Flex', 'Google Sans', sans-serif;
	font-weight: 300;
	font-size: 32px;
	line-height: 130%;
	color: #fff;
}

.sp-sec02__card-title {
	font-family: 'Google Sans Flex', 'Google Sans', sans-serif;
	font-weight: 500;
	font-size: 80px;
	line-height: 120%;
	color: #fff;
	white-space: nowrap;
	margin-top: 16px;
	overflow: hidden;
}

.sp-sec02__card-title-word {
	display: inline-block;
}

.sp-sec02__card-desc {
	font-family: 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 130%;
	letter-spacing: -0.48px;
	color: #fff;
	list-style: none;
	margin: 0;
	margin-top: 40px;
	padding: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.sp-sec02__card-desc::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	transform: translateX(-50%);
	background-color: #E2E2E2;
}

.sp-sec02__card-desc::after {
	display: none;
}

.sp-sec02__card-desc > li:first-child {
	list-style: none;
	position: relative;
	width: 50%;
	display: flex;
	justify-content: flex-end;
	padding-right: 40px;
	box-sizing: border-box;
}

.sp-sec02__card-desc > li:last-child {
	list-style: none;
	position: relative;
	width: 50%;
	display: flex;
	justify-content: flex-start;
	padding-left: 40px;
	box-sizing: border-box;
}

.sp-sec02__card-desc-inner {
	text-align: center;
}

.sp-br-mo { display: none; }
.sp-card-br { display: none; }
.sp-card-br--mo { display: none; }
.sp-card-desc-br { display: inline; }
.sp-sec02-title-br { display: none; }
.sp-card-desc-br--mo { display: none; }

/* sec02 spacer — scroll distance provider for fixed sec02 */
.sp-sec02-spacer {
	position: relative;
	pointer-events: none;
	background: var(--Primitive-Gray-Scale-900, #171B1E);
}

/* ============================================
   Section 6: 04_Logo-1 — Color BG + Quote
   ============================================ */
.sp-logo1 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 80px;
}

.sp-logo1__bg {
	position: absolute;
	inset: 0;
	background: var(--Primitive-Gray-Scale-900, #171B1E);
	z-index: 0;
}

.sp-logo1__logo-wrap {
	position: relative;
	z-index: 1;
	width: 1180px;
	max-width: 90vw;
	display: grid;
}

.sp-logo1__logo-ghost,
.sp-logo1__logo-solid {
	display: block;
	width: 100%;
	height: auto;
	grid-area: 1 / 1;
}

.sp-logo1__logo-ghost {
	clip-path: inset(0 0 0 0);
}

.sp-logo1__logo-solid {
	clip-path: inset(100% 0 0 0);
}

.sp-logo1__content {
	position: relative;
	z-index: 1;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.sp-logo1__quote {
	display: block;
	line-height: 1;
}

.sp-logo1__quote > svg {
	width: 100%;
	height: 100%;
}

.sp-logo1__title {
	font-family: 'Pretendard', sans-serif;
	font-weight: 600;
	font-size: 48px;
	line-height: 130%;
	letter-spacing: -0.96px;
	color: #fff;
}

.sp-logo1__desc {
	font-family: 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: 32px;
	line-height: 150%;
	letter-spacing: -0.64px;
	color: #fff;
}

.sp-logo1__desc--tablet {
	display: none;
}



/* ============================================
   Logo1→Logo2 Transition
   ============================================ */
.sp-logo-transition-spacer {
	height: 0;
	pointer-events: none;
}

/* ============================================
   Section 7: 04_Logo-2 — Image BG + Quote
   ============================================ */
.sp-logo2 {
	position: relative;
	z-index: 2;
	background: #000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 60px;
}

.sp-logo2__bg {
	position: absolute;
	inset: 0;
	background: url('../images/sp-samhwa/sec01-phase8-0-bg.webp') center/cover no-repeat;
	z-index: 0;
}

.sp-logo2__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.20) 45.28%, rgba(255, 75, 0, 0.20) 100%);
	backdrop-filter: blur(30px);
}

.sp-logo2__content {
	position: relative;
	z-index: 2;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.sp-logo2__quote {
	display: block;
	line-height: 1;
}

.sp-logo2__quote > svg {
	width: 100%;
	height: 100%;
}

.sp-logo2__desc {
	font-family: 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: 32px;
	line-height: 150%;
	letter-spacing: -0.64px;
	color: #fff;
}

.sp-logo2__desc--bold {
	font-family: 'Pretendard', sans-serif;
	font-weight: 600;
	font-size: 32px;
	line-height: 150%;
	letter-spacing: -0.64px;
	color: #fff;
}

.sp-logo2__headline {
	position: relative;
	z-index: 2;
}

.sp-logo2__headline-text {
	font-family: 'Google Sans Flex', 'Google Sans', sans-serif;
	font-size: 100px;
	line-height: 100%;
	color: #fff;
}

.sp-logo2__headline-rwd {
	display: none;
}

.sp-logo2__br-tablet {
	display: none;
}

.sp-logo2__br-mobile {
	display: none;
}

.sp-logo2__headline--s {
	font-weight: 500;
}

.sp-logo2__headline--mid {
	font-weight: 500;
}

.sp-logo2__headline--for {
	font-weight: 500;
}



/* base styles in common-curtain.css */


/* ================================================================
   Large Desktop + short viewport: 1280px ~ 1535px (e.g. LG Gram)
   ================================================================ */
@media (min-width: 1280px) and (max-width: 1535px) {
}

/* ================================================================
   Small Desktop: 1024px ~ 1279px
   ================================================================ */
@media (min-width: 1024px) and (max-width: 1279px) {

	/* ── Sec01 ── */
	.sp-sec01__text {
		font-size: 44px;
		letter-spacing: -0.88px;
	}

	.sp-sec01__overlay-text {
		font-size: 44px;
		letter-spacing: -0.88px;
	}

	.sp-sec01__dimmed-text-line {
		font-size: 44px;
		letter-spacing: -0.88px;
	}

	.sp-sec01__guide {
		width: 720px;
		height: 720px;
	}

	.sp-sec01__guide-line2 {
		width: 1090px;
		height: 1090px;
	}

	.sp-sec01__guide-line3 {
		width: 1220px;
		height: 1220px;
	}

	.sp-sec01__overlay-texts {
		width: 700px;
		height: 700px;
	}

	.sp-sec01__overlay-bg {
		width: 700px;
		height: 700px;
	}

	.sp-sec01__circle--1 {
		width: 320px;
		height: 320px;
	}

	.sp-sec01__circle--2 {
		width: 236px;
		height: 236px;
	}

	.sp-sec01__circle--3 {
		width: 320px;
		height: 320px;
	}

	.sp-sec01__circle--4 {
		width: 358px;
		height: 358px;
	}

	.sp-sec01__circle--5 {
		width: 300px;
		height: 300px;
	}

	.sp-sec01__act-dot {
		margin-top: -14.33px;
		transform-origin: 16px 374.33px;
	}

	/* ── Sec02 ── */
	.sp-sec02__dot-circle {
		width: 1200px;
		height: 1200px;
	}

	.sp-sec02__linear-circle {
		width: 1080px;
		height: 1080px;
	}

	.sp-sec02__vision-title {
		width: 646px;
		height: 260px;
	}

	.sp-sec02__title {
		font-size: 48px;
		letter-spacing: -0.96px;
	}

	.sp-sec02__card-title {
		font-size: 64px;
	}

	.sp-sec02__card-label {
		font-size: 28px;
	}

	.sp-sec02__card-desc {
		font-size: 22px;
		letter-spacing: -0.44px;
	}

	/* ── Logo1 ── */
	.sp-logo1 {
		gap: 60px;
	}

	.sp-logo1__logo-wrap {
		width: 900px;
	}

	.sp-logo1__title {
		font-size: 48px;
	}

	.sp-logo1__desc {
		font-size: 24px;
		letter-spacing: -0.48px;
	}

	/* ── Logo2 ── */
	.sp-logo2 {
		gap: 48px;
	}

	.sp-logo2__headline-text {
		font-size: 96px;
	}

	.sp-logo2__desc,
	.sp-logo2__desc--bold {
		font-size: 28px;
		letter-spacing: -0.56px;
	}
}

/* ================================================================
   Small PC + short viewport (e.g. 1024×768 landscape tablet)
   ================================================================ */
@media (min-width: 1024px) and (max-width: 1279px) and (max-height: 800px) {
}

/* ================================================================
    Tablet: 768px ~ 1023px
   ================================================================ */
@media (min-width: 768px) and (max-width: 1023px) {

	/* ── Intro ── */
	.sp-intro__bg-wrapper {
		width: 512px;
		height: 500px;
	}

	.sp-intro__title {
		font-size: 48px;
	}

	.sp-intro__subtitle {
		font-size: 20px;
	}

	.sp-intro__content {
		top: calc(var(--header-h, 90px) + 10vh);
	}

	.sp-intro__scroll-cta {
		font-size: 16px;
	}

	.sp-intro__ruler--top {
		width: 768px;
		height: 229px;
		background: linear-gradient(180deg, #000 45.86%, rgba(0, 0, 0, 0) 100%);
	}

	.sp-intro__ruler--bottom {
		width: 767px;
		height: 87px;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
	}

	/* ── Sec01 ── */
	.sp-sec01__text {
		font-family: var(--Family-Pretendard, Pretendard);
		font-size: var(--Size-H1, 34px);
		font-weight: 600;
		line-height: 130%;
		letter-spacing: -0.68px;
		color: var(--Text-Primary, #171B1E);
		text-align: center;
	}

	.sp-sec01__overlay-text {
		font-family: var(--Family-Pretendard, Pretendard);
		font-size: var(--Size-H1, 34px);
		font-weight: 600;
		line-height: 130%;
		letter-spacing: -0.68px;
		color: var(--Text-White, #FFF);
		text-align: center;
	}

	.rwd-br {
		display: inline;
	}

	.rwd-br--mobile {
		display: none;
	}

	.sp-sec01__dimmed-text-line {
		font-size: 34px;
		letter-spacing: -0.68px;
	}

	.sp-sec01__guide {
		width: 632px;
		height: 632px;
	}

	.sp-sec01__guide-line2 {
		width: 914px;
		height: 914px;
	}

	.sp-sec01__guide-line3 {
		width: 1024px;
		height: 1024px;
	}

	.sp-sec01__overlay-texts {
		width: 576px;
		height: 576px;
	}

	.sp-sec01__overlay-bg {
		width: 576px;
		height: 576px;
	}

	.sp-sec01__circle--1 {
		width: 278px;
		height: 278px;
		top: 7.75%;
		left: 5.62%;
	}

	.sp-sec01__circle--2 {
		width: 206px;
		height: 206px;
		top: -1.27%;
		right: 6.77%;
	}

	.sp-sec01__circle--3 {
		width: 280px;
		height: 280px;
		bottom: 7.07%;
		left: -11.95%;
	}

	.sp-sec01__circle--4 {
		width: 311px;
		height: 311px;
		bottom: -10.25%;
		right: 24.15%;
	}

	.sp-sec01__circle--5 {
		width: 265px;
		height: 265px;
		top: 57.55%;
		right: -9.59%;
	}

	.sp-sec01__spot-dot svg {
		width: 7.023px;
		height: 7.023px;
	}

	.sp-sec01__act-dot {
		margin-left: -11.238px;
		margin-top: -9.77px;
		transform-origin: 11.238px 325.77px;
	}

	.sp-sec01__act-dot svg {
		width: 22.475px;
		height: 22.475px;
	}

	/* ── Sec02 ── */
	.sp-sec02 {
		justify-content: flex-start;
	}

	.sp-sec02__content {
		margin-top: 240px;
		width: 100%;
		gap: 0;
	}

	.sp-sec02__dim-top {
		height: 229px;
	}

	.sp-sec02__dim-bottom {
		height: 87px;
	}

	.sp-sec02__dot-circle {
		width: 1000px;
		height: 1000px;
	}

	.sp-sec02__linear-circle {
		width: 900px;
		height: 900px;
	}

	.sp-sec02__phase8-bg--img0 .sp-sec02__phase8-bg-img,
	.sp-sec02__phase8-bg--img1 .sp-sec02__phase8-bg-img,
	.sp-sec02__phase8-bg--img2 .sp-sec02__phase8-bg-img {
		width: 100%;
	}

	.sp-sec02__images {
		gap: 18px;
	}

	.sp-sec02__vision-title {
		position: relative;
		bottom: auto;
		left: auto;
		transform: none;
		width: 312px;
		height: 125px;
	}

	.sp-sec02__title {
		font-size: var(--Size-D3, 44px);
		line-height: 100%;
		margin-top: -41px;
	}

	.sp-sec02__card {
		width: 100%;
		gap: 18px;
	}

	.sp-sec02__card-title {
		font-size: 44px;
		white-space: normal;
		text-align: center;
		margin-top: 0;
	}

	.sp-card-br {
		display: block;
		margin-top: 12px;
	}

	.sp-sec02__card-label {
		font-size: 24px;
	}

	.sp-sec02__card-desc {
		font-family: 'Pretendard', sans-serif;
		font-weight: 400;
		font-size: 24px;
		line-height: 130%;
		letter-spacing: -0.48px;
		text-align: center;
		margin-top: 22px;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		width: auto;
		left: auto;
		transform: none;
	}

	.sp-sec02__card-desc::before {
		display: none;
	}

	.sp-sec02__card-desc::after {
		display: block;
		content: '';
		position: static;
		transform: none;
		width: 300px;
		height: 1px;
		background-color: #E2E2E2;
		order: 1;
		flex-shrink: 0;
	}

	.sp-sec02__card-desc > li:first-child {
		list-style: none;
		text-align: center;
		width: auto;
		display: block;
		padding: 0;
		justify-content: initial;
		order: 0;
	}

	.sp-sec02__card-desc > li:last-child {
		list-style: none;
		text-align: center;
		width: auto;
		display: block;
		padding: 0;
		justify-content: initial;
		order: 2;
	}

	/* ── Logo1 ── */
	.sp-logo1 {
		gap: 60px;
	}

	.sp-logo1__logo-wrap {
		width: 553px;
		height: 61px;
	}

	.sp-logo1__title {
		font-family: var(--Family-Pretendard, Pretendard);
		font-size: var(--Size-H2, 32px);
		font-weight: 600;
		line-height: 130%;
		letter-spacing: -0.64px;
		color: var(--Text-White, #FFF);
		text-align: center;
	}

	.sp-logo1__quote {
		width: 35.512px;
		height: 28px;
		aspect-ratio: 52 / 41;
	}

	.sp-logo1__desc--pc {
		display: none;
	}

	.sp-logo1__desc--tablet {
		display: block;
	}

	.sp-logo1__desc {
		font-size: 20px;
		letter-spacing: -0.4px;
	}

	/* ── Logo2 ── */
	.sp-logo2 {
		gap: 40px;
	}

	.sp-logo2__headline-text {
		font-family: var(--Family-Google-Sans-Flex, 'Google Sans Flex');
		font-size: var(--Size-D2, 48px);
		font-weight: 500;
		line-height: 100%;
		color: var(--Text-White, #FFF);
		text-align: center;
	}

	.sp-logo2__content {
		gap: 16px;
	}

	.sp-logo2__quote {
		width: 35.512px;
		height: 28px;
		aspect-ratio: 52 / 41;
	}

	.sp-logo2__desc,
	.sp-logo2__desc--bold {
		font-size: 24px;
		letter-spacing: -0.48px;
	}
}

/* ================================================================
    Mobile: ~767px
   ================================================================ */
@media (max-width: 767px) {

	/* ── Intro ── */
	.sp-intro__bg-wrapper {
		width: 334px;
		height: 300px;
	}

	.sp-intro__title {
		font-size: 48px;
	}

	.sp-intro__subtitle {
		font-size: 20px;
		line-height: 160%;
	}

	.sp-mobile-br {
		display: inline;
	}

	.sp-intro__scroll-cta {
		font-size: 14px;
	}

	.sp-intro__content {
		top: calc(var(--header-h, 60px) + 10vh);
		padding: 0 20px;
	}

	/* ── Sec01 ── */
	.sp-sec01__text {
		font-size: var(--Size-H4, 28px);
		font-style: normal;
		font-weight: 600;
		line-height: 130%;
		letter-spacing: -0.56px;
	}

	.sp-sec01__overlay-text {
		font-size: var(--Size-H4, 28px);
		font-style: normal;
		font-weight: 600;
		line-height: 130%;
		letter-spacing: -0.56px;
	}

	.rwd-br {
		display: inline;
	}

	.sp-sec01__dimmed-text-line {
		font-size: 34px;
		letter-spacing: -0.68px;
	}

	.sp-sec01__guide {
		width: 340px;
		height: 340px;
	}

	.sp-sec01__guide-line {
		border-radius: 400px;
	}

	.sp-sec01__guide-line2 {
		width: 480.436px;
		height: 480.436px;
	}

	.sp-sec01__guide-line3 {
		width: 538px;
		height: 538px;
	}

	.sp-sec01__overlay-texts {
		width: 320px;
		height: 320px;
	}

	.sp-sec01__overlay-bg {
		width: 320px;
		height: 320px;
	}

	.sp-sec01__circle--1 {
		width: 170px;
		height: 170px;
		top: 5.55%;
		left: 2.65%;
	}

	.sp-sec01__circle--2 {
		width: 126px;
		height: 126px;
		top: -2.70%;
		right: -6.33%;
	}

	.sp-sec01__circle--3 {
		width: 172px;
		height: 172px;
		bottom: 9.63%;
		left: -19.60%;
	}

	.sp-sec01__circle--4 {
		width: 191px;
		height: 191px;
		bottom: -11.37%;
		right: 9.83%;
	}

	.sp-sec01__circle--5 {
		width: 163px;
		height: 163px;
		top: 57.10%;
		right: -27.60%;
	}

	.sp-sec01__spot-dot svg {
		width: 3.69px;
		height: 3.69px;
	}

	.sp-sec01__act-dot {
		margin-left: -5.904px;
		margin-top: -5.11px;
		transform-origin: 5.904px 175.11px;
	}

	.sp-sec01__act-dot svg {
		width: 11.808px;
		height: 11.808px;
	}

	/* ── Sec02 ── */
	.sp-sec02 {
		justify-content: flex-start;
	}

	.sp-sec02__dim-top {
		height: 229px;
	}

	.sp-sec02__dim-bottom {
		height: 87px;
	}

	.sp-sec02__dot-circle {
		width: 600px;
		height: 600px;
	}

	.sp-sec02__linear-circle {
		width: 520px;
		height: 520px;
	}

	.sp-sec02__vision-title {
		position: relative;
		bottom: auto;
		left: auto;
		transform: none;
		width: 312px;
		height: 125px;
	}

	.sp-sec02__title {
		font-size: var(--Size-H1, 34px);
		font-style: normal;
		font-weight: 500;
		line-height: 130%;
		letter-spacing: 0;
		white-space: normal;
		margin-top: -41px;
	}

	.sp-sec02__content {
		margin-top: 160px;
		width: 100%;
		gap: 0;
	}

	.sp-sec02__card {
		width: calc(100% - 36px);
		gap: 0;
	}

	.sp-sec02__card-label {
		color: var(--Text-White, #FFF);
		text-align: center;
		font-family: var(--Family-Google-Sans-Flex, "Google Sans Flex");
		font-size: var(--Size-H5, 24px);
		font-style: normal;
		font-weight: 300;
		line-height: 130%;
	}

	.sp-sec02__card-title {
		font-size: 44px;
		text-align: center;
		margin-top: 12px;
		white-space: normal;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0;
	}

	.sp-sec02__card-title-word:first-child {
		margin-bottom: 4px;
	}

	.sp-card-br--mo {
		display: none;
	}

	.sp-card-br {
		display: none;
	}

	.sp-sec02__card-desc {
		color: var(--Text-White, #FFF);
		text-align: center;
		font-family: var(--Family-Pretendard, Pretendard);
		font-size: var(--Size-H6, 20px);
		font-style: normal;
		font-weight: 400;
		line-height: 130%;
		letter-spacing: -0.4px;
		margin-top: 24px;
		padding: 0;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		width: auto;
		left: auto;
		transform: none;
	}

	.sp-sec02__card-desc::before {
		display: none;
	}

	.sp-sec02__card-desc::after {
		display: block;
		content: '';
		position: static;
		transform: none;
		width: 200px;
		height: 1px;
		background-color: #E2E2E2;
		order: 1;
		flex-shrink: 0;
	}

	.sp-sec02__card-desc > li:first-child {
		list-style: none;
		text-align: center;
		width: auto;
		display: block;
		padding: 0;
		justify-content: initial;
		order: 0;
	}

	.sp-sec02__card-desc > li:last-child {
		list-style: none;
		text-align: center;
		width: auto;
		display: block;
		padding: 0;
		justify-content: initial;
		order: 2;
	}

	.sp-sec02__card-desc > li + li::before {
		display: none;
	}

	.sp-br-pc { display: none; }
	.sp-br-mo { display: block; }
	.sp-card-desc-br { display: none; }
	.sp-card-desc-br--mo { display: block; }
	.sp-sec02-title-br { display: block; }

	/* ── Logo1 ── */
	.sp-logo1 {
		gap: 40px;
		padding: 80px 20px;
	}

	.sp-logo1__logo-wrap {
		width: 302px;
		height: 33px;
		max-width: 90vw;
	}

	.sp-logo1__title {
		font-size: var(--Size-H4, 28px);
		font-style: normal;
		font-weight: 600;
		line-height: 130%;
		letter-spacing: -0.56px;
	}

	.sp-logo1__desc {
		font-size: var(--Size-H6, 20px);
		font-style: normal;
		font-weight: 400;
		line-height: 150%;
		letter-spacing: -0.4px;
	}

	.sp-logo1__content {
		gap: 16px;
	}

	.sp-logo1__quote {
		width: 35.512px;
		height: 28px;
		aspect-ratio: 52 / 41;
	}

	/* ── Logo2 ── */
	.sp-logo2 {
		gap: 40px;
		padding: 80px 20px;
	}

	.sp-logo2__headline {
		display: flex;
	}

	.sp-logo2__headline-text {
		font-size: var(--Size-D3, 44px);
		font-style: normal;
		font-weight: 500;
		line-height: 100%;
		text-align: center;
	}

	.sp-logo2__headline-rwd {
		display: inline;
	}

	.sp-logo2__br-tablet {
		display: none;
	}

	.sp-logo2__br-mobile {
		display: inline;
	}

	.sp-logo2__desc,
	.sp-logo2__desc--bold {
		font-size: var(--Size-H6, 20px);
		font-style: normal;
		line-height: 150%;
		letter-spacing: -0.4px;
	}

	.sp-logo2__content {
		gap: 16px;
	}

	.sp-logo2__quote {
		width: 35.512px;
		height: 28px;
		aspect-ratio: 52 / 41;
	}
}

/* ================================================================
    Small Mobile: ~375px
   ================================================================ */
@media (max-width: 375px) {

	/* ── Intro ── */
	.sp-intro__subtitle {
		font-size: 18px;
	}

	/* ── Sec01 ── */
	.sp-sec01__text {
		font-size: 28px;
		letter-spacing: -0.56px;
	}

	.sp-sec01__overlay-text {
		font-size: 28px;
		letter-spacing: -0.56px;
	}

	.sp-sec01__dimmed-text-line {
		font-size: 28px;
		letter-spacing: -0.56px;
	}

	/* ── Sec02 ── */
	.sp-sec02__vision-title {
		width: 234px;
		height: 94px;
	}

	.sp-sec02__title {
		font-size: 36px;
		margin-top: -31px;
	}

	.sp-sec02__card-title {
		font-size: 36px;
	}

	.sp-sec02__card-label {
		font-size: var(--Size-H5, 24px);
	}

	/* ── Logo1 ── */
	.sp-logo1__title {
		font-size: 28px;
	}

	.sp-logo1__desc {
		font-size: var(--Size-H6, 20px);
		letter-spacing: -0.4px;
	}

	/* ── Logo2 ── */
	.sp-logo2__desc,
	.sp-logo2__desc--bold {
		font-size: 20px;
	}

	.sp-logo2__content {
		gap: 12px;
	}
}