/* 기본 여백 초기화 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 패딩이 너비에 영향을 주지 않도록 설정 */
}

html {
    width: 100%;
}
body {
    width: 100%;
    /* 가로 스크롤 방지를 위해 hidden을 쓰고 싶다면 body가 아닌 
       최상위 레이아웃 컨테이너(예: .wrapper)에 걸어야 합니다. */
}

#main {
    width: 100%;
    position: relative;
}

.social-proof-section, 
.hero-section, 
.marquee-wrapper {
    width: 100%;
    overflow: hidden; /* 슬라이더나 애니메이션이 있는 섹션에만 개별 적용 */
}


ul, ol, li {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    vertical-align: middle;
    max-width: 100%;
}

/* 히어로 섹션 공통 */
.hero-section {
    position: relative;
    width: 100%;
    height: 980px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

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

/* 히어로 텍스트 그룹 */
.hero-content {
    z-index: 10;
    margin-top: -100px; /* 헤더 위치 고려한 조정 */
}

.hero-title {
    color: #FFF;
    text-align: center;
    font-family: 'Pretendard', sans-serif;
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: 72px;
    letter-spacing: -1.5px;
    margin-bottom: 24px;
}

.hero-desc {
    color: #FFF;
    text-align: center;
    font-family: 'Pretendard', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.45px;
    margin-bottom: 40px;
}

/* 무료 사이트 진단 버튼 */
.btn-audit {
    display: inline-flex;
    padding: 20px 28px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    background: #FFF;
    color: #1D212C;
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: -0.4px;
    text-decoration: none;
    transition: transform 0.2s;
}

.hero-btn-wrap {
    text-align: center;
}

.btn-audit:hover {
    transform: translateY(-3px);
}

/* --- 무한 흐르는 텍스트 (Marquee) --- */
.marquee-wrapper {
    position: absolute;
    bottom: 1px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.marquee-content {
    display: inline-block;
    animation: marquee 70s linear infinite;
}

.marquee-content span {
    color: rgba(255, 255, 255, 0.20);
    font-family: 'Pretendard', sans-serif;
    font-size: 200px;
    font-style: normal;
    font-weight: 700;
    line-height: 200px;
    text-transform: uppercase;
    padding-right: 100px; /* 문구 사이 간격 */
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Service Grid Section */
.service-grid-section {
    padding: 160px 0; /* 상하 여백 */
    background: #fff;
    display: flex;
    justify-content: center;
}

.service-container {
    display: flex;
    width: 1560px;
    flex-direction: column;
    align-items: center;
    gap: 40px; /* padding1-9 */
}

/* 헤더 텍스트 */
.service-header {
    text-align: center;
    margin-bottom: 40px;
}

.service-header .sub-title {
    display: block;
    color: #2C3D5B; /* Primary-color */
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

.service-header .main-title {
    color: #1D212C; /* font-Primary-text-color */
    font-family: 'Pretendard', sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 52px;
    letter-spacing: -1px;
}

/* 그리드 레이아웃 */
.grid-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3열 */
    gap: 24px; /* 카드 사이 간격 */
    width: 100%;
}

/* 개별 카드 */
.service-card {
    display: flex;
    width: 100%;
    max-width: 504px;
    padding: 32px;
    flex-direction: column; /* 카드 전체는 위아래 흐름 */
    align-items: flex-start;
    gap: 20px; /* 상단 그룹과 하단 설명 사이 간격 */
    border-radius: 12px;
    border: 1px solid #E5E5EC;
    background: #FFF;
    transition: all 0.3s ease;
}

.card-top {
    display: flex;
    align-items: center; /* 아이콘과 글자 높이 중앙 맞춤 */
    gap: 16px; /* 아이콘과 제목 사이 간격 */
    width: 100%;
}

.txt-group {
    width: 100%;
}

.service-card:hover {
    border-color: #2C3D5B;
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.05);
}

/* 아이콘 박스 */
.icon-box {
    display: flex;
    width: 52px;
    height: 52px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: #2C3D5B;
    flex-shrink: 0; /* 아이콘 크기 고정 */
}

.icon-box svg {
    width: 26px;
    height: 28px;
}

/* 카드 텍스트 */
.card-title {
    color: #1D212C;
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1; /* 가로 배치 시 세로 정렬을 위해 조정 */
    margin-bottom: 0; /* card-top 내부이므로 마진 제거 */
}

.card-desc {
    color: #808791;
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.35px;
    word-break: keep-all;
    margin-top: 0; /* gap으로 조절하므로 마진 제거 */
}

/* Signal Insight Section */
.insight-section {
    padding: 100px 0;
    background: #fff;
    display: flex;
    justify-content: center;
}

.insight-container {
    display: flex;
    width: 1560px;
    flex-direction: column;
    align-items: center;
    gap: 40px; /* 헤더와 이미지 사이 간격 */
}

/* 텍스트 영역 레이아웃 */
.insight-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* padding1-5 */
    text-align: center;
}

.insight-header .sub-title {
    color: #2C3D5B; /* Primary-color */
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: -0.5px;
}

.insight-header .main-title {
    color: #1D212C; /* font-Primary-text-color */
    font-family: 'Pretendard', sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 52px;
    letter-spacing: -1px;
}

.insight-header .main-desc {
    color: #808791; /* font-Thirty-text-color */
    font-family: 'Pretendard', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.45px;
    word-break: keep-all;
}

/* 이미지 영역 스타일 */
.insight-image-wrap {
    display: flex;
    width: 100%;
    height: 600px;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    overflow: hidden;
    border-radius: 20px; /* 대시보드 느낌을 위한 라운드 처리 */
}

.insight-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 이미지 비율 유지하며 600px 내 배치 */
}

/* --- Social Proof Base --- */
.social-proof-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px; /* padding1-9 */
    padding: 160px 0;
    align-self: stretch;
    overflow: hidden; /* 슬라이더 트랙이 화면 밖으로 넘치지 않게 가림 */
    width: 100%;
}

.proof-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* padding1-5 */
    text-align: center;
}

.proof-header .sub-title {
    color: #2C3D5B;
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: -0.5px;
}

.proof-header .main-title {
    color: #1D212C;
    font-family: 'Pretendard', sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 52px;
    letter-spacing: -1px;
}

/* --- 무한 슬라이더 트랙 설정 --- */
.slider-outer {
    width: 100%;
    margin: 60px 0;
    overflow: visible; /* 양옆이 자연스럽게 짤려 보이도록 */
}

.slider-track {
    display: flex;
    /* 무한 스크롤 연산을 위해 flex-start 유지 */
    justify-content: flex-start; 
    gap: 24px;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.proof-card {
    /* [핵심] 화면에 4개가 꽉 차고 2개가 짤리게 보이기 위해 
       전체 화면 대비 약 18~20% 정도의 너비를 고정값으로 설정 */
    flex: 0 0 375px; 
    border-radius: 12px;
    border: 1px solid #E5E5EC;
    background: #FFF;
    overflow: hidden;
}

.proof-card:hover {
    border-color: #2C3D5B;
}

.card-img {
    width: 100%;
    height: 240px; /* 카드 상단 이미지 영역 전체 높이 */
    display: flex;
    justify-content: center; /* 가로 중앙 */
    align-items: center;    /* 세로 중앙 */
}

.card-img img {
    display: flex;
    width: 180px;
    height: 64px;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    
    /* 추가 설정: 이미지가 찌그러지지 않고 비율을 유지하며 설정한 크기 안에 들어오도록 함 */
    object-fit: contain; 
}

.card-content {
    padding: 32px;
    width: 100%;
    box-sizing: border-box;
    background: #F6F7FB;
}

.card-name {
    font-size: 20px;
    font-weight: 600;
    color: #1D212C;
    margin-bottom: 12px;
}

.card-desc {
    font-size: 15px;
    color: #808791;
    line-height: 1.6;
    margin-bottom: 24px;
    word-break: keep-all;
    height: 4.8em; /* 텍스트 높이 균일화 (약 3줄) */
    overflow: hidden;
}

.card-tags {
    display: flex;
    gap: 8px;
}

.card-tags span {
    font-size: 13px;
    color: #808791;
    background: #F6F7FB;
    padding: 4px 8px;
    border-radius: 4px;
}

/* --- 컨트롤 버튼 --- */
.slider-controls {
    display: flex;
    gap: 16px;
    margin-top: 20px;
}

.ctrl-btn {
    display: flex;
    width: 48px;
    height: 48px;
    justify-content: center;
    align-items: center;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}

.ctrl-btn.prev { background: #E7EEF9; }
.ctrl-btn.next { background: #2C3D5B; }
.ctrl-btn:active { transform: scale(0.95); }


/* --- Architecture Section --- */
.architecture-section {
    padding: 160px 0;
    background: #fff;
    /* 조상 요소 중 overflow: hidden이 있다면 sticky가 작동하지 않으므로 주의하세요 */
    overflow: visible; 
}

.archi-container {
    display: flex;
    width: 1560px;
    margin: 0 auto;
    justify-content: space-between;
    /* stretch가 아닌 flex-start여야 archi-left의 높이가 archi-right를 따라가지 않습니다 */
    align-items: flex-start; 
    position: relative;
}

/* 왼쪽 스티키 영역 */
.archi-left {
    position: -webkit-sticky; /* 사파리 대응 */
    position: sticky;
    top: 150px; /* 헤더 높이 + 여백 (화면 상단에서 고정될 지점) */
    width: 580px;
    height: fit-content; 
    flex-shrink: 0;
    z-index: 10;
}

.sticky-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.sticky-content .sub-title {
    color: #2C3D5B;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: -0.5px;
}

.sticky-content .main-title {
    color: #1D212C;
    font-size: 40px;
    font-weight: 700;
    line-height: 52px;
    letter-spacing: -1px;
}

.sticky-content .main-desc {
    color: #767676;
    font-family: 'Pretendard', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    /* 자간을 -0.45px에서 -0.8px 정도로 미세하게 조정하여 한 줄에 더 많은 글자 수용 */
    letter-spacing: -0.8px; 
    word-break: keep-all; /* 단어 단위로 줄바꿈하여 가독성 유지 */
    width: 100%;
    margin: 20px 0;
}

/* 탭 버튼 스타일 */
.archi-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tab-btn {
    display: flex;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #F6F7FB;
    color: #808791;
}

.tab-btn.active {
    background: #2C3D5B;
    color: #FFF;
}

/* 오른쪽 스크롤 영역 */
.archi-right {
    width: 768px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.archi-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-top: 30px; /* 스크롤 위치 보정용 */
}

.archi-item .img-box {
    display: flex;
    height: 400px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: 12px;
    background: #F0F4FD;
}

.archi-item .img-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.archi-item .txt-box h3 {
    color: #2A2E3B;
    font-size: 24px;
    font-weight: 500;
    line-height: 34px;
    letter-spacing: -0.6px;
    margin-bottom: 8px;
}

.archi-item .txt-box p {
    color: #808791;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.4px;
    word-break: keep-all;
}

/* Pricing Section */
.pricing-section {
    width: 100%;
    padding: 160px 0;
    background: #F6F7FB;
    display: flex;
    justify-content: center;
}

.pricing-container {
    display: flex;
    width: 1560px;
    flex-direction: column;
    align-items: center;
    gap: 32px; /* padding1-8 */
}

/* Header & Toggle */
.pricing-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.pricing-header .sub-title {
    color: #2C3D5B;
    font-size: 20px;
    font-weight: 500;
}

.pricing-header .main-title {
    color: #1D212C;
    font-size: 40px;
    font-weight: 700;
    line-height: 52px;
    letter-spacing: -1px;
    margin-bottom: 12px;
}

.toggle-wrapper {
    display: flex;
    padding: 4px;
    background: #ECEFF4;
    border-radius: 4px;
}

.toggle-btn {
    display: flex;
    width: 118px;
    padding: 8px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    border: none;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    color: #999; /* Yearly 기본값 */
    line-height: 28px;
}

.toggle-btn.active {
    background: #FFF;
    color: #1D212C;
}

/* Pricing Grid */
.pricing-grid {
    display: flex;
    gap: 24px;
    width: 100%;
    margin-top: 32px;
}

/* 1. 기본 카드 설정 */
.price-card {
    position: relative;
    overflow: hidden;
    background: #f8f9fa; /* 평소 기본 배경 */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    z-index: 1;
}

/* 2. 호버 시 역동적인 무빙 그라데이션 */
.price-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    color: #fff; /* 호버 시 글자색 반전 */

    /* [핵심] 4색 이상의 다채로운 그라데이션과 애니메이션 활성화 */
    background: linear-gradient(-45deg, #2C3D5B, #4A90E2, #6A5ACD, #23D5AB);
    background-size: 400% 400%; /* 배경을 크게 키워야 움직임이 역동적임 */
    animation: dynamicGradient 3s ease infinite; /* 3초 주기로 무한 반복 */
}

/* 3. 배경이 파도치는 듯한 애니메이션 정의 */
@keyframes dynamicGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* [추가] 호버 시 내부 텍스트 및 아이콘 색상 강제 변경 */
.price-card:hover h3, 
.price-card:hover .card-sub, 
.price-card:hover .price-value,
.price-card:hover .feature-list li {
    color: #fff !important;
}

.price-card:hover .btn-get-started {
    background: #fff;
    color: #2C3D5B;
}
.price-card.professional:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    
    /* [수정] 호버 시에만 애니메이션 작동 */
    animation: dynamicGradient 3s ease infinite; 
}
/* Professional Card (Gradient) */
.price-card.professional {
    position: relative;
    overflow: hidden;
    /* 평소 배경색 (네이비 혹은 가이드라인 색상) */
    background: #2C3D5B; 
    /* 애니메이션 준비: 배경 사이즈는 미리 키워둬야 호버 시 끊김이 없습니다 */
    background-image: linear-gradient(-45deg, #2C3D5B, #4A90E2, #6A5ACD, #23D5AB);
    background-size: 400% 400%;
    background-position: 0% 50%;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
/* 애니메이션 정의 (동일) */
@keyframes dynamicGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.best-badge {
    position: absolute;
    top: 40px;
    right: 40px;
    display: flex;
    padding: 8px 20px;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(3px);
    color: #FFF;
    font-size: 14px;
    font-weight: 500;
}

/* Card Typography */
.price-card h3 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #fff;
}

.card-sub {
    font-size: 14px;
    color: #767676;
    margin-bottom: 24px;
}

.price-value .amount {
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -1.2px;
}

.price-value .unit {
    font-size: 18px;
    color: #808791;
}

/* Feature List */
.feature-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: #808791;
    line-height: 1.6;
    margin-bottom: 8px;
}

.check-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #1D212C;
    position: relative;
    margin-top: 3px;
    flex-shrink: 0;
}

.check-icon::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #1D212C;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

/* --- Pricing Section Base --- */
.pricing-section {
    width: 100%;
    padding: 160px 0;
    background: #F6F7FB;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.pricing-container {
    display: flex;
    width: 1560px;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

/* Pricing Grid */
.pricing-grid {
    display: flex;
    gap: 24px;
    width: 100%;
    justify-content: center;
    align-items: flex-end;
}

/* --- Common Card Style --- */
.price-card {
    position: relative;
    display: flex;
    width: 504px;
    padding: 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 60px;
    border-radius: 20px;
    border: 1px solid #E5E5EC;
    background: #FFF;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* --- Professional Card: Default Highlight --- */
.price-card.professional {
    background: linear-gradient(-45deg, #242D41, #2C3D5B, #5B71AD, #2C3D5B);
    background-size: 400% 400%;
    animation: gradientFlow 10s ease infinite; /* 기본적으로 흐르는 중 */
    box-shadow: 10px 10px 16px 0 rgba(44, 61, 91, 0.18);
    border: none;
    transform: translateY(-20px);
}

/* Professional 전용 초기 텍스트 색상 */
.price-card.professional h3,
.price-card.professional .price-value .amount,
.price-card.professional .feature-list li { color: #FFF; }
.price-card.professional .card-sub,
.price-card.professional .price-value .unit { color: rgba(255, 255, 255, 0.60); }
.price-card.professional .check-icon { border-color: #FFF; }
.price-card.professional .check-icon::after { border-color: #FFF; }
.price-card.professional .btn-get-started { 
    background: #FFF; 
    color: #1D212C; 
    backdrop-filter: blur(6.6px);
}

/* ----------------------------------------------------------
   Interaction: State Reversal (애니메이션 유지 로직)
   ---------------------------------------------------------- */

/* 1. 그리드 호버 시: Professional은 애니메이션을 멈추고 흰색 배경으로 (비활성화) */
.pricing-grid:hover .price-card.professional {
    background: #FFF;
    background-size: 100% 100%;
    animation: none; /* 다른곳 호버 시엔 멈춤 */
    transform: translateY(0);
    border: 1px solid #E5E5EC;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
/* 텍스트 색상 복구 (회색/진한색) */
.pricing-grid:hover .price-card.professional h3,
.pricing-grid:hover .price-card.professional .price-value .amount { color: #1D212C; }
.pricing-grid:hover .price-card.professional .card-sub { color: #767676; }
.pricing-grid:hover .price-card.professional .price-value .unit,
.pricing-grid:hover .price-card.professional .feature-list li { color: #808791; }
.pricing-grid:hover .price-card.professional .check-icon,
.pricing-grid:hover .price-card.professional .check-icon::after { border-color: #1D212C; }
.pricing-grid:hover .price-card.professional .btn-get-started { background: #F1F1F5; color: #808791; backdrop-filter: none; }

/* 2. 현재 호버된 "그 카드"만: 무빙 그라데이션을 켜고 강조 (Professional 포함) */
.price-card:hover {
    background: linear-gradient(-45deg, #242D41, #2C3D5B, #5B71AD, #2C3D5B) !important;
    background-size: 400% 400% !important;
    animation: gradientFlow 10s ease infinite !important; /* 호버된 동안 계속 흐름 */
    transform: translateY(-20px) !important;
    box-shadow: 10px 10px 16px 0 rgba(44, 61, 91, 0.18) !important;
    border: none !important;
}
.price-card:hover h3,
.price-card:hover .price-value .amount,
.price-card:hover .feature-list li { color: #FFF !important; }
.price-card:hover .card-sub,
.price-card:hover .price-value .unit { color: rgba(255, 255, 255, 0.60) !important; }
.price-card:hover .check-icon,
.price-card:hover .check-icon::after { border-color: #FFF !important; }
.price-card:hover .btn-get-started { 
    background: #FFF !important; 
    color: #1D212C !important; 
    backdrop-filter: blur(6.6px) !important; 
}

/* ----------------------------------------------------------
   Animations & Responsive
   ---------------------------------------------------------- */

@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 반응형 코드 */
@media (max-width: 1600px) {
    .pricing-container { width: 95%; }
    .price-card { width: calc(33.33% - 16px); padding: 30px; gap: 40px; }
}

@media (max-width: 1024px) {
    .pricing-grid { flex-direction: column; align-items: center; gap: 40px; }
    .price-card { width: 100%; max-width: 504px; }
    .price-card.professional, .price-card:hover { transform: translateY(0) !important; }
}

/* 공통 UI 복구 */
.btn-get-started {
    display: flex;
    height: 66px;
    padding: 20px 16px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: 4px;
    background: #F1F1F5;
    color: #808791;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    transition: 0.4s;
    text-decoration: none;
}

.feature-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.6; margin-bottom: 8px; }
.check-icon { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #1D212C; position: relative; margin-top: 3px; flex-shrink: 0; }
.check-icon::after { content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #1D212C; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }



/* --- Insight Grid Section --- */
.insight-grid-section {
    padding: 160px 0;
    background: #FFF;
    display: flex;
    justify-content: center;
}

.insight-grid-container {
    display: flex;
    width: 1560px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px; /* padding1-9 */
}

/* 헤더 & 더 알아보기 버튼 */
.insight-grid-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.insight-grid-header .header-txt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px; /* padding1-5 */
}

.insight-grid-header .sub-title {
    color: #2C3D5B;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: -0.5px;
}

.insight-grid-header .main-title {
    color: #1D212C;
    font-size: 40px;
    font-weight: 700;
    line-height: 52px;
    letter-spacing: -1px;
}

.btn-more {
    display: flex;
    width: 148px;
    padding: 16px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: #2C3D5B;
    color: #FFF;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: -0.4px;
    transition: opacity 0.3s;
}

/* 카드 그리드 */
.insight-card-wrapper {
    display: flex;
    gap: 24px;
    width: 100%;
}

.insight-card {
    display: flex;
    width: 372px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px; /* padding1-4 */
}

.thumb-img {
    width: 100%;
    height: 240px;
    border-radius: 12px;
    overflow: hidden;
    background: #F6F7FB;
}

.thumb-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 메타 정보 (프로필) */
.meta-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-icon {
    width: 32px;
    height: 32px;
}

.author {
    color: #1D212C;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.35px;
}

.dot-icon {
    display: flex;
    align-items: center;
}

.date {
    color: #808791;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.35px;
}

/* 제목 (2줄 제한 설정) */
.post-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    align-self: stretch;
    overflow: hidden;
    color: #2A2E3B;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: -0.4px;
}

/* 태그 */
.tag-group {
    display: flex;
    gap: 8px;
}

.tag-item {
    display: flex;
    padding: 8px 24px;
    justify-content: center;
    align-items: center;
    border-radius: 9999px;
    border: 1px solid #E5E5EC;
    color: #808791;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.35px;
}

/* --- Main CTA Section --- */
.main-cta-section {
    padding: 120px 0;
    background: #FFF;
    display: flex;
    justify-content: center;
}

.cta-container {
    display: flex;
    width: 1560px; /* 모든 섹션과 동일한 기준 너비 */
    justify-content: space-between; /* 양 끝 정렬로 시작 라인 맞춤 */
    align-items: flex-start;
}

.cta-item {
    display: flex;
    width: 480px; /* 요청하신 너비 */
    /* 좌측 padding을 0으로 설정하여 상단 섹션의 Left 라인과 수직으로 일치시킴 */
    padding: 0 40px 0 0; 
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}

/* 마지막 아이템은 오른쪽 여백이나 선이 필요 없으므로 별도 처리 */
.cta-item:last-child {
    padding-right: 0;
}
/* 경계선 처리 */
.cta-item.line-right {
    position: relative;
}

.cta-item .txt-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cta-item.line-right::after {
    content: '';
    position: absolute;
    right: 20px; /* 아이템 사이 정중앙에 선 배치 */
    top: 0;
    width: 1px;
    height: 100%;
    background-color: #E5E5EC;
}

.cta-item h3 {
    color: #2A2E3B;
    font-size: 24px;
    font-weight: 500;
    line-height: 34px;
    letter-spacing: -0.6px;
    margin: 0;
}

.cta-item p {
    color: #808791;
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.35px;
    word-break: keep-all;
}

/* 회색 박스 시작점도 제목과 동일하게 정렬 */
.gray-link-box {
    display: flex;
    padding: 14px;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    background: #F1F1F5;
    text-decoration: none;
    width: fit-content;
    margin-left: 0; /* 왼쪽 여백 제거 */
}
.gray-link-box:hover {
    background: #E5E5EC;
}

.cta-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.gray-link-box span {
    color: #808791;
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.35px;
}


/* ==========================================================
   1. 태블릿 대응 (max-width: 1024px) 
   ========================================================== */
@media (max-width: 1024px) {
    .container, [class*="-container"] {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        overflow: hidden; 
    }

    section { padding: 100px 0 !important; }

    /* 히어로 섹션 */
    .hero-section { height: 700px; }
    .hero-title { font-size: 40px; line-height: 1.2; }

    /* 서비스 그리드 (2열) */
    .grid-wrapper { grid-template-columns: repeat(2, 1fr) !important; width: 100% !important; }

    /* 아키텍처 섹션 세로 전환 */
    .archi-container { flex-direction: column; gap: 60px; }
    .archi-left { position: relative !important; top: 0 !important; width: 100% !important; }
    .archi-right { width: 100% !important; gap: 60px; }
    .archi-tabs { 
        display: flex; overflow-x: auto; white-space: nowrap; 
        padding-bottom: 15px; width: 100%; -webkit-overflow-scrolling: touch; 
    }
    .tab-btn { flex: 0 0 auto; }

    /* [요청사항] 인사이트 이미지 상하 마진 제거 */
    .insight-image-wrap { height: auto; margin-top: 0 !important; margin-bottom: 0 !important; }
    .insight-image-wrap img { width: 100%; height: auto; margin: 0 !important; }

    /* 가격 정책 세로 */
    .pricing-grid { flex-direction: column; align-items: center; gap: 40px; }
    .price-card { width: 100% !important; max-width: 540px; }

    /* CTA 세로 */
    .cta-container { flex-direction: column; gap: 40px; }
    .cta-item { width: 100% !important; border-right: none !important; border-bottom: 1px solid #E5E5EC; padding: 0 0 40px 0 !important; }
}

/* ==========================================================
   2. 모바일 대응 (max-width: 767px)
   ========================================================== */
@media (max-width: 767px) {
    section { padding: 80px 0 !important; }
    .main-title, .hero-title { font-size: 26px !important; line-height: 1.3 !important; }
    .grid-wrapper { grid-template-columns: 1fr !important; }
    .insight-card-wrapper { grid-template-columns: 1fr !important; }
}

/* ==========================================================
   3. 초소형 모바일 대응 (max-width: 400px)
   ========================================================== */
@media (max-width: 400px) {
    .container { padding: 0 16px !important; }
    p, span, a, h1, h2, h3 { word-break: break-all; overflow-wrap: break-word; }

.social-proof-section {
        padding: 80px 0 !important;
        overflow: hidden; 
    }

    .slider-outer {
        width: 100%;
        overflow: visible; /* 트랙이 부모 밖으로 나가는 것을 허용 (JS가 제어함) */
    }

    .slider-track {
        display: flex !important;
        gap: 24px !important; /* JS의 gap 변수와 1px도 틀리면 안 됨 */
    }

    .proof-card {
        /* [핵심] 화면 전체에서 좌우 여백 합쳐서 60px만 남기고 카드가 다 차지함 */
        flex: 0 0 calc(100vw - 60px) !important;
        min-width: calc(100vw - 60px) !important;
        width: calc(100vw - 60px) !important;
        margin: 0 !important;
    }

    .btn-audit, .btn-get-started, .btn-more { width: 100% !important; font-size: 14px !important; }
    .hero-title { font-size: 24px !important; }
    .archi-tabs { gap: 8px; }
    .tab-btn { padding: 10px 16px; font-size: 12px; }
    .card-img { height: 180px !important; }
    .card-content { padding: 24px !important; }
}