/* style.css */

/* html과 body가 뷰포트의 전체 높이를 차지하고, body 자체를 중앙 정렬 */
html {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 0;
    padding: 0;
}
.is-header-common, .is-footer-common { /* 헤더와 푸터에 고유 클래스 적용 */
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}
body {
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f4f7f6;
    color: #333;
    width: 100%;
    max-width: 1200px;
    margin: 0;
    box-shadow: 0 0 15px rgba(0,0,0,0.05);
    flex-shrink: 0;
}

/* 로고 슬라이더 애니메이션 */
@keyframes is-slide-right-loop { /* 애니메이션 이름 변경 */
    0% { left: 100px; opacity: 0; }
    10% { left: 300px; opacity: 1; }
    90% { left: calc(100% - 300px - var(--is-logo-size)); opacity: 1; } /* 변수 이름 변경 */
    100% { left: calc(100% - 200px - var(--is-logo-size)); opacity: 0; } /* 변수 이름 변경 */
}

#is-logo-slider { /* ID 이름 변경 */
    position: absolute;
    top: 50%;
    transform: translateY(calc(-50% + 5px));
    animation: is-slide-right-loop 4s linear infinite; /* 변경된 애니메이션 이름 적용 */
    --is-logo-size: 80px; /* 변수 이름 변경 */
}

/* 반응형 로고 크기에 따른 CSS 변수 업데이트 */
@media (min-width: 640px) { /* sm */
    #is-logo-slider {
        --is-logo-size: 96px; /* 변수 이름 변경 */
    }
}
@media (min-width: 1024px) { /* lg */
    #is-logo-slider {
        --is-logo-size: 112px; /* 변수 이름 변경 */
    }
}

/* 서비스 이미지 채도 효과 및 전환 */
.is-service-item-image { /* 클래스 이름 변경 */
    filter: grayscale(100%);
    transition: filter 0.3s ease-in-out;
}

.group:hover .is-service-item-image { /* 클래스 이름 변경 */
    filter: grayscale(0%);
}

.page-title {
        text-align: center;
        margin: 20px 0;
        color: #2c3e50;
        font-size: 2em;
        border-bottom: 2px solid #eee;
        padding-bottom: 10px;
}