/* intro.css - 소개 페이지 */

/* =====================================================
 히어로 배너 (intro-animate)
===================================================== */
.intro-animate {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.intro-animate.animate-in { opacity: 1; transform: translateY(0); }
.intro-animate.delay-1 { transition-delay: 0.15s; }
.intro-animate.delay-2 { transition-delay: 0.3s; }
.intro-animate.delay-3 { transition-delay: 0.45s; }

/* =====================================================
 페이지 타이틀 배너
===================================================== */
.intro-container {
width: 100%;
}

.intro-title {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 4rem 0;
background: url('/assets/images/section_title.png') no-repeat center/cover;
}

.intro-title h1 {
font-size: clamp(2rem, 4vw, 3rem);
line-height: 64px;
font-weight: 700;
color: #fff;
}

/* =====================================================
 소개 섹션 레이아웃
===================================================== */
.section__intro {
padding: 7.5rem 0;
display: flex;
flex-direction: column;
gap: 5rem;
}

/* 상단 텍스트 타이틀 */
.section__intro-title {
display: flex;
flex-direction: column;
gap: 3.75rem;
}

.section__intro-top {
display: flex;
align-items: center;
gap: 5rem;
}

.section__title__main {
flex: 1;
}

.section__title__main-content {
font-size: clamp(2rem, 4vw, 3rem);
line-height: 64px;
font-weight: 700;
color: var(--ink);
word-break: keep-all;
}

.section__title__main-content .main-color {
color: var(--red);
}

.section__title__desc {
font-size: 1.125rem;
line-height: 32px;
color: var(--gray-100);
word-break: keep-all;
}

/* 그래픽 이미지 */
.intro__graphic {
flex: 1;
display: flex;
justify-content: flex-end;
}

.intro__graphic img {
width: 100%;
max-width: 560px;
height: auto;
border-radius: 20px;
}

/* =====================================================
 피처 리스트
===================================================== */
.intro__list {
width: 100%;
}

.intro__feature-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2.5rem 3.75rem;
}

.intro__feature-item {
display: flex;
flex-direction: column;
gap: 1.25rem;
}

.feature-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.feature-content {
display: flex;
flex-direction: column;
gap: 0.625rem;
}

.feature-content h3 {
font-size: 1.125rem;
line-height: 26px;
font-weight: 600;
color: var(--ink);
}

.feature-content p {
font-size: 0.95rem;
line-height: 24px;
color: var(--gray-100);
word-break: keep-all;
}

/* =====================================================
 반응형
===================================================== */
@media (max-width: 1024px) {
.intro-title h1 { font-size: 2.25rem; line-height: 48px; }
.section__intro { padding: 80px 0; gap: 60px; }
.section__intro-top { flex-direction: column; gap: 40px; }
.intro__graphic { justify-content: center; }
.section__title__main-content { font-size: 2.25rem; line-height: 48px; }
.intro__feature-list { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}

@media (max-width: 768px) {
.intro-title { padding: 60px 0; }
.intro-title h1 { font-size: 1.75rem; line-height: 40px; }
.section__intro { padding: 60px 0; gap: 48px; }
.section__title__main-content { font-size: 1.75rem; line-height: 40px; }
.section__title__desc { font-size: 0.95rem; line-height: 26px; }
.intro__feature-list { grid-template-columns: 1fr; gap: 32px; }
.intro__feature-item { flex-direction: row; align-items: flex-start; }
.feature-icon { flex-shrink: 0; }
}