:root {
	--title-overlay-scale: 2;
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --secondary: #ec4899;
    --accent: #f59e0b;
    --bg-dark: #0f172a;
    --bg-light: #f8fafc;
    --text-dark: #86868b;
    --text-light: #a6a6a9;
    --white: #ffffff;
    --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
    --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Responsive */
@media (max-width: 990px) and (min-width: 769px)  {
	:root {
		--title-overlay-scale: 1.25;
    }
}
@media (max-width: 768px) {
    :root {
		--title-overlay-scale: 1.25;
    }
}

/* Story Section  Style*/
.story.common-container {
	--common-text-color: white;
	--content-title-padding-top: 0;
	--fixed-wrapper-top: 0;
	min-height: calc(var(--lvh) * 100);
	background: linear-gradient(45deg, #1a1a1a, #2d2d2d);
	position: relative;
	padding-top:0;
	.fixed-wrapper {
		top: var(--fixed-wrapper-top);
	}
	.overlay-background {
		position: absolute;
		width: 100%;
		height: 100%;
		top:0;
		left: 0;
		z-index: 0;
	}
	.content-wrapper {
		z-index: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: calc(var(--lvh) * 100);
	}
	
	h2.content-title {
		display: grid;
		grid-template-columns: 1fr;
		width: 100%;
		text-align: center;
		display: flex;
		margin: 0;
		padding: 0;
		position: relative;
		line-height: 1;
		margin: 0 auto;
		span {
			display: flex;
			line-height: 1;
		}
		.eyebrow-text {
			display: none;
		}
		.content-title-text {
			line-height: 1;
			width: 100%;
			height: fit-content;
			width: fit-content;
			display: flex;
			z-index: 1;
			font-size: min(4lvw, 5rem);
			.will-change-overflow, .will-change-opacity, .will-change-transform {
				will-change: transform filter opacity;
			}
			.will-change-overflow {
				overflow: hidden;
				filter: blur(0) brightness(1);
				opacity: 1;
				transform: scale(1);
				transition: 0.3s filter 0.2s ease-in-out,
							0.3s opacity 0.2s ease-in-out,
							0.3s transform 0.2s ease-in-out
							;
			}
			
			.will-change-transform {
				transform: translateX(0);
				transition: 0.3s transform 0.2s;;
			}
			.will-change-opacity.before {
				opacity: 0;
				transition: 0s opacity 0s,
							0.3s transform 0.2s;
			}
			.will-change-opacity.after {
				opacity: 1;
				transition: 0s opacity 0s,
							0.3s transform 0.2s;
			}
		}
		.overlay-text-wrapper {
			display: grid;
			justify-content: center;
			grid-template-columns: min-content min-content 1fr;
			width: 100%;
			.hidden-text {
				visibility: hidden;
				opacity: 0;
			}
			> span {
				grid-row: 1;
			}
			> span:nth-child(1) {
				grid-column: 1 / 2;
			}
			> span:nth-child(2) {
				grid-column: 2 / 3;
			}
			> span:nth-child(3) {
				grid-column: 3 / 4;
			}
			> span:nth-child(4) {
				grid-column: 3 / 4;
			}
		}
	}


	.story-content {
		transition: 0.3s all ;
		opacity: 0;
		margin-top: 1rem;
		display: grid;
		gap: 4rem;
		align-items: center;
		transform: translateY(10%);
		grid-auto-columns: 1fr;
	}

	.story-text {
		grid-column: 1 / 2;
		color: #e0e0e0;
		
		h3 {
			font-size: var(--fs-subtitle);
			color: var(--text-light);
			margin-bottom: 1.5rem;
			width: 100%;
			text-align: left;
		}
		
		p {
			font-size: var(--fs-body);
			margin-bottom: 1.5rem;
			line-height: 1.57;
			color: #a6a6a9;
			font-weight: 700;
			strong {
				font-weight: 700;
				color: white;
			}
		}
		a {
			color: #4da3ff;
			font-size: var(--fs-body);

            &:hover {
                text-decoration: underline;
				font-size: var(--fs-body);
            }
        }
	}

	.story-visual {
		grid-column: 2 / 3;
		position: relative;
		background: var(--gradient-primary);
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		aspect-ratio: 4 / 3;
	}

		&.scroll-end {
		.story-content {
			opacity: 1;
			transform: translateY(0);
			transition: 0.3s all ;
		}
		h2 {
			.content-title-text {
				.will-change-overflow {
					filter: blur(16px) brightness(0.5);
					opacity: 0;
					transform: scale(0.5);
					transition: 0.3s filter 0.2s ease-in-out,
								0.3s opacity 0.2s ease-in-out,
								0.3s transform 0.2s ease-in-out
								;
				}
				.will-change-transform {
					transform: translateX( calc(-1 * var(--will-change-overflow-width)) );
					transition: 0.3s transform 0.2s;
				}
				.will-change-opacity.before {
					opacity: 1;
					transition: 0.3s opacity 0.5s,
								0.3s transform 0.2s
					;
				}
				.will-change-opacity.after {
					opacity: 0;
					transition: 0.3s opacity 0.3s,
								0.3s transform 0.2s;
				}
			}
		}
	}
}

/* Services Section */
.services.common-container {
	--common-text-color: white;
	background: linear-gradient(135deg, #2d2d2d, #1a1a1a);

	.services-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 40px;
		margin-top: 60px;
	}

	.service-card {
		background: var(--bg-glass);
		padding: 40px 30px;
		border-radius: 20px;
		text-align: center;
		backdrop-filter: var(--backdrop-blur);
		border: var(--border-glass);
		transition: var(--transition-smooth);
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
			transition: left 0.3s ease;
		}

		&:hover {
			transform: translateY(-10px);
			box-shadow: var(--shadow-hover);

			&::before {
				left: 100%;
			}
		}

		.service-icon {
			font-size: var(--fs-stitle);
			color:white;
			height: fit-content;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 1.5rem;
			.material-symbols-outlined {
				font-size: var(--fs-title);
			}
		}

		h4 {
			font-size: var(--fs-subtitle);
			color: white;
			margin-bottom: 0.5rem;
		}

		p {
			color: #b0b0b0;
			line-height: 1.6;
			margin-bottom: 0;
		}
	}
}


/* CEO Message Section */
.ceo-message.common-container {
	margin-top: -1px;
	--common-text-color: white;
	background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
	position: relative;
	min-height: calc(var(--lvh) * 120);
	h2 {
		text-align: left;
	}
	h3 {
		width: 100%;
	}

	.ceo-content {
		display: grid;
		grid-template-columns: 1fr 2fr;
		gap: 4rem;
		align-items: start;
		margin-top: 4rem;
	}

	.ceo-profile {
		text-align: center;
		position: sticky;
		top: 4rem;

		.profile-image {
			margin-bottom: 2rem;
			display: flex;
			justify-content: center;
			aspect-ratio: 3 / 4;
			box-shadow: 0 20px 40px rgba(102, 126, 234, 0.2);
            border: 2px solid rgba(102, 126, 234, 0.3);
			position: relative;
			overflow: hidden;
			border-radius: 1.5rem;
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;

			}

		}

		.ceo-info h3 {
            font-size: var(--fs-subtitle);
            margin-bottom: 0.5rem;
            font-weight: 700;
            text-align: center !important;
            color: white;
		}

		.ceo-title {
			color: #667eea;
			font-size: var(--fs-copyright);
			font-weight: 500;
			margin-bottom: 1rem;
		}

		.signature {
			display: flex;
			justify-content: center;
			opacity: 0.8;
			svg {
				width: 50%;
				transform: rotate(-5deg);
			}
		}
	}

	.ceo-message-text {
		background: var(--bg-glass);
		padding: calc(var(--default-container-padding) / 2);
		border-radius: 25px;
		backdrop-filter: var(--backdrop-blur);
		border: var(--border-glass);
		transition: var(--transition-smooth);
		&:hover {
			transform: translateY(-5px);
			box-shadow: 0 25px 50px rgba(102, 126, 234, 0.15);
		}
		.message-content {
			h3 {
				font-size: var(--fs-subtitle);
				color: white;
				margin-bottom: 2rem;
				background: var(--gradient-primary);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				font-weight: 700;
				width: 100%;
				text-align: left;
			}

			p {
				color: #a6a6ab;
				font-size: var(--fs-body);
				line-height: 1.475;
				margin-bottom: 1.5rem;
				font-weight: 700;
				strong {
					font-weight: 700;
					color:white
				}
				&.message-closing {
					font-size: var(--fs-body) !important;
					font-weight: 700 !important;
					color: #667eea !important;
					text-align: center;
					margin-top: 2.5rem !important;
					padding-top: 2rem;
					border-top: var(--border-glass);
				}
			}
		}
	}
}



@media (max-width: 1024px) and (min-width: 991px) {
	.story.common-container {

		h2.content-title {
			.content-title-text {
				padding: 0 calc(var(--default-container-padding));
			}
		}

		.story-text {
			grid-column: 1 / 2;
			grid-row: 2 / 3;
		}

		.story-visual {
			aspect-ratio: 16 / 9;
			grid-column: 1 / 2;
			grid-row: 1 / 2;
		}
	}
    
}

@media (max-width: 990px) and (min-width: 769px)  {

	.story.common-container {
		h2.content-title {
			.content-title-text {
				font-size: clamp(3rem, 8lvw, 4rem);
			}
		}

		.story-text {
			grid-column: 1 / 2;
			grid-row: 2 / 3;
		}

		.story-visual {
			aspect-ratio: 16 / 9;
			grid-column: 1 / 2;
			grid-row: 1 / 2;
		}

	}

	.story.common-container {
		--fixed-wrapper-top: var(--header-height);
		--content-title-padding-top: var(--header-height);
	}

	/* CEO Section 모바일 */
	.ceo-message.common-container {
        h2 {
            text-align: center;
        }
		.ceo-content {
			grid-template-columns: 1fr;
			gap: 2rem;
		}

		.ceo-profile {
			position: static;

			.profile-image {
				margin: 0 auto 2rem auto;
				width: 50%;
			}
		}
	}
}

@media (max-width: 768px) {

	.story.common-container {
		--fixed-wrapper-top: var(--header-height);
		--content-title-padding-top: var(--header-height);
		.content-wrapper {
		}
		h2.content-title {
			font-size: 2rem;
			.content-title-text {
				font-size: clamp(1.5rem, 8lvw, 3rem);
			}
		}


		.story-content {
			gap: 2rem;
		}

		.story-text {
			grid-column: 1 / 2;
			grid-row: 2 / 3;
		}

		.story-visual {
			aspect-ratio: 16 / 9;
			grid-column: 1 / 2;
			grid-row: 1 / 2;
		}
	}

	/* CEO Section 모바일 */
	.ceo-message.common-container {
        h2 {
            text-align: center;
        }
		.ceo-content {
			margin-top: 2rem;
			grid-template-columns: 1fr;
			gap: 2rem;
		}

		.ceo-profile {
			position: static;

			.profile-image {
				width: 62.5%;
				margin: 0 auto 2rem auto;
			}


		}
		.ceo-message-text {
			padding: calc(var(--default-container-padding));
		}
	}

}

/* 모바일 반응형 */
@media (max-width: 768px) {
	.services-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}