/* 통합홈케어 - 커스텀 스타일 */

/* 전역 스타일 */
* {
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
}

/* 네비게이션 애니메이션 */
.nav-link {
    position: relative;
    transition: all 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 50%;
    background: linear-gradient(90deg, #0ea5e9, #0284c7);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* 스크롤 시 네비게이션 스타일 */
.navbar-scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 히어로 섹션 애니메이션 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Hero Content 애니메이션 딜레이 제거 - 페이지 로드 후 즉시 보이도록 */
.hero-content > * {
    animation: fadeInUp 0.8s ease-out;
}

/* Hero Image Slider 스타일 (카드 스택 효과) - 최종 조정 */
#hero-slider {
    perspective: 1000px; /* 3D 효과를 위한 원근 설정 */
}

.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 모든 상태 변화에 적용되는 부드러운 전환 */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease-in-out; 
    transform-origin: center center;
    backface-visibility: hidden;
    z-index: 10;
    border-radius: 1rem; /* 모든 카드에 border radius 적용 */
    object-fit: cover; /* 🟢 비율을 유지하며 영역을 가득 채우는 수정 🟢 */
}

/* 카드 상태: 맨 앞 (Active) */
.hero-image[data-state="active"] {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    z-index: 15;
    /* 불러올 때 살짝 튀어나오는 애니메이션 */
    animation: popIn 0.5s ease-out; 
}

@keyframes popIn {
    0% { transform: translate3d(0, 0, 0) scale(1.02); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* 임시 상태: Active에서 사라지는 부드러운 애니메이션 */
.hero-image[data-state="disappear"] {
    opacity: 0; 
    transform: translate3d(0, 0, 0) scale(1.05) rotate(0deg); /* 살짝 확대되며 투명해짐 */
    z-index: 20; 
}


/* 카드 상태: 뒤에 겹쳐 보임 (Next-1) - 왼쪽 위로 45도 꺾임 */
.hero-image[data-state="next-1"] {
    opacity: 1;
    /* X축 이동 증가, Y축 이동 증가, 축소율 감소, 45도 회전 */
    transform: translate3d(-35px, -10px, -20px) scale(0.98) rotate(-5deg); 
    z-index: 14;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* 카드 상태: 뒤에 겹쳐 보임 (Next-2) - 오른쪽 위로 45도 꺾임 */
.hero-image[data-state="next-2"] {
    opacity: 1;
    /* X축 이동 증가, Y축 이동 증가, 축소율 감소, -45도 회전 (오른쪽으로 기울어짐) */
    transform: translate3d(35px, -10px, -40px) scale(0.95) rotate(5deg); 
    z-index: 13;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 카드 상태: 완전히 숨겨짐 (Hidden) - 부드럽게 뒤로 숨음 */
.hero-image[data-state="hidden"] {
    opacity: 0; 
    /* 뒤로 이동 및 축소하여 스택 효과 유지, 회전 초기화 */
    transform: translate3d(0px, 0px, -60px) scale(0.90) rotate(0deg); 
    z-index: 11;
}

/* 인디케이터 디자인 개선 */
#slider-radio-buttons {
    /* 기존 스타일 유지하면서 위치 조정 */
    right: 0;
    left: auto;
    transform: none;
    margin-right: 1.5rem; 
}

.slider-indicator {
    width: 24px; /* 비활성화 시 길이 */
    height: 4px;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5); /* 얇은 흰색 테두리 */
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-indicator.active {
    width: 32px; /* 활성화 시 길이 증가 */
    background-color: #ffffff; /* 흰색 채우기 */
    border-color: #ffffff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}


/* 플로팅 애니메이션 */
.float-animation {
    animation: float 3s ease-in-out infinite;
}

/* 서비스 카드 호버 효과 (모든 움직임 제거) */
.service-card {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.1), transparent);
    transition: left 0.5s ease;
}

.service-card:hover::before {
    left: 100%;
}

.service-card:hover {
    transform: none; /* 움직임 효과 제거 */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* 아이콘 호버 효과 (회전 제거) */
.icon-rotate {
    transition: transform 0.3s ease;
}

.service-card:hover .icon-rotate {
    transform: none; /* 회전 효과 제거 */
}

/* 갤러리 아이템 호버 효과 (확대 효과만 유지) */
.gallery-item:hover img {
    transform: scale(1.05); /* 확대 효과 유지 */
}

/* 그라디언트 텍스트 애니메이션 */
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.gradient-text {
    background: linear-gradient(-45deg, #0ea5e9, #0284c7, #0369a1, #075985);
    background-size: 400% 400%;
    animation: gradient 3s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 버튼 호버 효과 */
.btn-primary {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn-primary:hover::before {
    left: 100%;
}

/* 섹션 구분선 */
.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
    margin: 4rem 0;
}

/* 통계 숫자 호버 효과 (Hero Section) - 확대 제거 */
.stat-number {
    transition: all 0.3s ease;
}

.stat-card:hover .stat-number {
    transform: none; /* 확대 효과 제거 */
    color: #0ea5e9;
}

/* 폼 스타일 개선 */
.form-input {
    transition: all 0.3s ease;
    border: 2px solid #e5e7eb;
}

.form-input:focus {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
    transform: translateY(-2px);
}

/* 컨택트 카드 호버 효과 (About Section 약속 카드 및 문의하기 버튼) - 이동 및 확대 제거 */
.contact-item {
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: none; /* 기본 그림자 완전히 제거 */
    border-radius: 0; /* 테두리 모서리 둥글기 제거 */
}

.contact-item:hover {
    transform: none; /* 이동 효과 제거 */
    background: rgba(14, 165, 233, 0.05);
    /* padding 변경 효과 제거 */
    border-radius: 12px;
    /* 그림자만 강조 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); 
}

/* 문의하기 섹션 버튼 내부 div에 적용된 padding 1rem을 원래대로 유지 (hover 시) */
.contact-item:hover > div {
    /* 내부 div가 hover 시 translate되지 않도록 강제 */
    transform: none !important;
}

.contact-item:hover .contact-icon {
    transform: none; /* 확대 효과 제거 */
}

/* 푸터 링크 호버 효과 */
.footer-link {
    position: relative;
    transition: all 0.3s ease;
}

.footer-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background: #60a5fa;
    transition: width 0.3s ease;
}

.footer-link:hover::after {
    width: 100%;
}

/* 스크롤바 스타일 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #0ea5e9, #0284c7);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #0284c7, #0369a1);
}

/* 모바일 메뉴 애니메이션 */
.mobile-menu {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.mobile-menu.closed {
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
}

/* 로딩 애니메이션 */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* 카드 그림자 효과 */
.card-shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.card-shadow:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 백그라운드 패턴 애니메이션 */
@keyframes backgroundFloat {
    0%, 100% {
        transform: translateY(0px) translateX(0px) scale(1);
    }
    33% {
        transform: translateY(-10px) translateX(5px) scale(1.05);
    }
    66% {
        transform: translateY(5px) translateX(-5px) scale(0.95);
    }
}

.bg-pattern-circle {
    animation: backgroundFloat 6s ease-in-out infinite;
}

.bg-pattern-circle:nth-child(2) {
    animation-delay: -2s;
}

.bg-pattern-circle:nth-child(3) {
    animation-delay: -4s;
}

/* 텍스트 강조 효과 */
.text-highlight {
    background: linear-gradient(120deg, #60a5fa 0%, #3b82f6 100%);
    background-repeat: no-repeat;
    background-size: 100% 0.2em;
    background-position: 0 88%;
    transition: background-size 0.25s ease-in;
}

.text-highlight:hover {
    background-size: 100% 0.8em;
}

/* 반응형 디자인 개선 */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem !important;
    }
    
    .hero-subtitle {
        font-size: 1.125rem !important;
    }
    
    .service-card {
        margin-bottom: 1.5rem;
    }
    
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    /* 모바일에서 카드 스택 효과 비활성화 (화면 넘침 방지) */
    .hero-image[data-state="next-1"],
    .hero-image[data-state="next-2"],
    .hero-image[data-state="hidden"] {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
        opacity: 0;
    }
    .hero-image[data-state="active"] {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
}

@media (max-width: 640px) {
    .hero-title {
        font-size: 2rem !important;
    }
    
    .section-title {
        font-size: 2rem !important;
    }
    
    .stat-grid {
        grid-template-columns: 1fr;
    }
}

/* 접근성 개선 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 고대비 모드 지원 */
@media (prefers-contrast: high) {
    .bg-gradient-to-br {
        background: white !important;
    }
    
    .text-primary-600 {
        color: #000080 !important;
    }
    
    .border-gray-300 {
        border-color: #000000 !important;
    }
}

/* 다크 모드 기본 준비 */
@media (prefers-color-scheme: dark) {
    .bg-white {
        background-color: #1f2937;
    }
    
    .text-gray-900 {
        color: #f9fafb;
    }
    
    .text-gray-600 {
        color: #d1d5db;
    }
}

/* 커스텀 유틸리티 클래스 */
.bg-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 성능 최적화 */
.will-change-transform {
    will-change: transform;
}

/* 인터랙션 제거 */
.interactive-scale {
    transition: none;
}

.interactive-scale:hover {
    transform: none;
}

.interactive-scale:active {
    transform: none;
}