/* common.css 또는 각 페이지 CSS 공통 적용 */
html, body {
    height: 100%; /* 전체 높이를 브라우저 높이에 맞춤 */
    margin: 0;
}

body {
    display: flex;
    flex-direction: column; /* 위에서 아래로 정렬 */
}

main {
    flex: 1; /* 남는 모든 공간을 차지하여 푸터를 아래로 밀어냄 */
}

.service-page {width: 100%; height: 100%; overflow: hidden;}
section { margin: 80px 60px 0 0; width: 100%;}
/* --- What We Do Grid --- */
.service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 0;
}

.service-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    background: #f5f5f5;
}

.service-item h4 {
    text-align: center;
    margin-top: 15px;
    color: #666;
}

/* --- Working Timeline 애니메이션 핵심 --- */
.timeline-wrapper {
    display: flex;
    position: relative; /* 선(line) 배치를 위한 기준 */
    gap: 0;
    width: 100%;
    margin-top: 80px;
    padding-top: 10px;
}

/* 숫자들을 잇는 가로 선 */
.timeline-line {
    position: absolute; /* 절대 위치로 공중에 띄움 */
    
    /* [핵심] step-num의 지름이 24px + 보더(4px*2) = 총 32px이므로, 
       그 절반인 16px 지점에 선이 오도록 배치합니다. */
    top: 24px; 
    
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-index: 1; /* 숫자가 위로 와야 하므로 숫자의 z-index보다 낮게 설정 */
}
.step {
    flex: 1;
    position: relative;
    z-index: 2; /* 선보다 앞으로 */
}

.step-num {
    width: 24px;
    height: 24px;
    background: #333;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    font-weight: bold;
    margin-bottom: 25px;
    
    /* 흰색 테두리를 줘서 선이 원을 뚫고 지나가는 느낌을 줍니다 */
    border: 4px solid #fff; 
    box-sizing: content-box; 
    position: relative;
    z-index: 3;
}

/* 하이라이트 컨테이너 및 바 (기존 유지) */
.highlight-container {
    position: relative;
    height: 45px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    overflow: hidden;
}

.highlight-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background-color: var(--bg-color);
    z-index: 1;
    /* 도미노 애니메이션: 앞 단계가 끝나면 시작 (0.4s 간격) */
    animation: fillHighlight 0.4s linear forwards;
    animation-delay: calc((var(--delay) - 1) * 0.4s);
}

.highlight-container h4 {
    position: relative;
    z-index: 2;
    margin: 0;
    font-size: 0.9rem;
    color: #333;
}

/* 7단계 완료 시 숫자 원 색상 변경 (디테일) */
.step {
    animation: activateStep 0.1s forwards;
    animation-delay: calc((var(--delay) - 1) * 0.4s + 0.2s);
}

@keyframes activateStep {
    to { /* 하이라이트가 지나갈 때 숫자의 배경색을 바꿀 수 있습니다 */ }
}

@keyframes fillHighlight {
    from { width: 0; }
    to { width: 100%; }
}

/* 설명 문구 스타일 */
.timeline-wrapper .step p {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.4;
    padding: 20px 5px;
    word-break: keep-all;
}
.scroll-indicator {
    display: none; /* 기본적으로 데스크탑에서는 숨김 */
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    color: #999;
    font-size: 1.1rem;
    font-weight: 500;
}

@keyframes slideArrow {
    0% { transform: translateX(0); }
    50% { transform: translateX(5px); }
    100% { transform: translateX(0); }
}
.arrow-icon {
    animation: slideArrow 1.5s infinite ease-in-out;
}

/* --- 반응형 (Mobile) --- */
@media (max-width: 1024px) {
    html, body {
    height: auto; /* 전체 높이를 브라우저 높이에 맞춤 */
    margin: 0;
}

main {
    flex: 1; /* 남는 모든 공간을 차지하여 푸터를 아래로 밀어냄 */
}

    section { margin: 50px 0 0; width: 100%;}
    .service-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    section { margin: 50px 0x 0 0; width: 100%;}
     .timeline-wrapper {
        /* 1. 가로 스크롤 활성화 */
        overflow-x: auto !important; 
        justify-content: flex-start !important; /* 왼쪽부터 차례대로 정렬 */
        gap: 0; /* 모바일에서 아이템 간 간격 확보 */
        padding-left: 0; /* 시작 지점 여백 */
        padding-right: 0; /* 끝 지점 여백 */
        
        /* 터치 스크롤 최적화 */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* 파이어폭스 스크롤바 숨기기 */
    }
    .scroll-indicator { display: flex;}
    .timeline-wrapper .step {
        flex: 0 0 150px; /* 모바일에서도 간격 없이 붙어서 스크롤 */
    }
}