/* service.css */

/* --- Variables --- */
:root {
    --toss-blue: #3182F6;
    --toss-dark: #101012;     /* 배경 */
    --card-bg: #191F28;       /* 카드 배경 */
    --text-white: #FFFFFF;
    --text-gray: #B0B8C1;
    --hover-glow: rgba(49, 130, 246, 0.4);
}

/* 다크 모드 기반 */
.service-body {
    margin: 0;
    padding: 0;
    font-family: 'Pretendard', sans-serif;
    background-color: var(--toss-dark);
    color: var(--text-white);
    line-height: 1.6;
}

/* 헤더 덮어쓰기 (다크모드용) */
.service-body .header {
    background-color: rgba(16, 16, 18, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.service-body .logo, 
.service-body .nav-link {
    color: #ffffff !important;
}
.service-body .nav-link:hover {
    opacity: 0.8;
}

/* 컨테이너 */
.container {
    max-width: 75rem; /* 1200px */
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* --- Animations --- */
.scroll-reveal {
    opacity: 0;
    transform: translateY(2.5rem);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-reveal.active {
    opacity: 1;
    transform: translateY(0);
}
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }


/* =========================================
   1. Title Section
   ========================================= */
.svc-header {
    padding: 8rem 0 4rem; /* [수정] 상단 여백 축소 */
    text-align: center;
}

.svc-badge {
    display: inline-block;
    color: var(--toss-blue);
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.svc-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 2rem;
}

.svc-title .highlight {
    color: var(--toss-blue);
    background: linear-gradient(to top, rgba(49, 130, 246, 0.15) 40%, transparent 40%);
}

.svc-desc {
    font-size: 1.25rem;
    color: var(--text-gray);
    font-weight: 400;
}


/* =========================================
   2. Service Grid (핵심)
   ========================================= */
.svc-grid-section {
    padding-bottom: 6rem; /* [수정] 하단 여백 축소 */
}

.svc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 한 줄에 2개 */
    gap: 2rem; /* [수정] 카드 간격 소폭 축소 (40px -> 32px) */
}

.svc-card {
    background-color: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 2rem; /* 32px */
    padding: 3rem 2.5rem; /* [수정] 카드 내부 여백 축소 */
    text-decoration: none;
    color: white;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; 제거 - 내용에 따라 자연스럽게 배치 */
    min-height: auto; /* [수정] 불필요한 최소 높이 제거 */
}

/* Hover Effect: Tech Glow */
.svc-card:hover {
    transform: translateY(-0.5rem); /* [수정] 떠오르는 높이 약간 줄임 */
    border-color: var(--toss-blue);
    box-shadow: 0 1rem 3rem var(--hover-glow); /* [수정] 그림자 범위 약간 줄임 */
    background-color: #1c232e;
}

/* [수정] 카드 아이콘 영역: 2:1 비율 및 가운데 정렬 */
.card-icon {
    width: 100%;
    aspect-ratio: 2 / 1; /* [핵심] 가로:세로 비율 2:1 고정 */
    margin-bottom: 1.5rem; /* [수정] 아이콘 아래 여백 축소 */
    display: flex;
    align-items: center;
    justify-content: center; /* [핵심] 가운데 정렬 */
    /* 배경색을 넣어 영역을 확인하고 싶으면 주석 해제 */
    /* background-color: rgba(255, 255, 255, 0.05); border-radius: 1rem; */
}

.card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 비율 유지하며 영역 안에 모두 표시 */
}

.card-content {
    flex-grow: 1; /* 남은 공간을 채우도록 설정 */
}

.svc-card h3 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.card-sub {
    font-size: 1rem;
    color: var(--toss-blue);
    font-weight: 600;
    margin-bottom: 1rem; /* [수정] 여백 축소 */
    letter-spacing: 0.5px;
}

.card-desc {
    font-size: 1.1rem;
    color: var(--text-gray);
    line-height: 1.6;
    word-break: keep-all;
    margin-bottom: 2rem; /* 화살표와의 간격 확보 */
}

.card-arrow {
    position: absolute;
    bottom: 2.5rem; /* [수정] 위치 조정 */
    right: 2.5rem;  /* [수정] 위치 조정 */
    font-size: 2rem;
    font-weight: 300;
    color: var(--toss-blue);
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.svc-card:hover .card-arrow {
    opacity: 1;
    transform: translateX(0);
}


/* =========================================
   3. Bottom CTA
   ========================================= */
.svc-cta {
    padding: 6rem 0 8rem; /* [수정] 상하 여백 축소 */
    text-align: center;
    background: linear-gradient(180deg, var(--toss-dark) 0%, #151920 100%);
}

.svc-cta h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.svc-cta p {
    font-size: 1.25rem;
    color: var(--text-gray);
    margin-bottom: 3rem;
}

.btn-svc-contact {
    display: inline-block;
    padding: 1.25rem 3.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    background-color: var(--toss-blue);
    color: white;
    border-radius: 1.25rem;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-svc-contact:hover {
    background-color: #1B64DA;
    box-shadow: 0 0.625rem 2rem rgba(49, 130, 246, 0.3);
    transform: scale(1.03);
}


/* =========================================
   Mobile Responsive
   ========================================= */
@media (max-width: 768px) {
    .svc-header { padding: 6rem 0 3rem; } /* [수정] 모바일 여백 축소 */
    .svc-title { font-size: 2.2rem; }
    
    .svc-grid {
        grid-template-columns: 1fr; /* 모바일에서 1열 */
        gap: 1.5rem;
    }

    .svc-card {
        padding: 2rem; /* [수정] 모바일 패딩 축소 */
    }
    
    .card-icon {
        margin-bottom: 1rem; /* [수정] 모바일 아이콘 여백 축소 */
    }

    .svc-card h3 { font-size: 1.7rem; }
    
    .card-desc {
        margin-bottom: 1rem;
    }

    /* 모바일에서는 화살표 항상 보임 */
    .card-arrow {
        position: static;
        opacity: 1;
        transform: none;
        margin-top: 1rem; /* [수정] 여백 축소 */
        text-align: right;
    }

    .svc-cta { padding: 4rem 0 6rem; } /* [수정] 모바일 CTA 여백 축소 */
    .svc-cta h2 { font-size: 1.8rem; }
    .btn-svc-contact { width: 100%; text-align: center; }
}