/* static/css/style.css */

/* =====================================================================
   1. 전역 스타일 및 스크롤바 커스텀 (가장 세련된 Pretendard 서체 100% 통일)
   ===================================================================== */
body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
    background-color: #FAFAF8; /* BG-1: 아이보리 화이트 */
    color: #2E2926; /* Text-Primary: 차콜 블랙 */
    overflow-x: hidden;
}

/* 프리미엄 딥 포레스트 그린 테마 스크롤바 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #FAFAF8;
}
::-webkit-scrollbar-thumb {
    background: #8C8278; /* 스톤 그레이 */
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #5C5148;
}

/* 
   [전면 개편] 
   개별 마크업에 남아있던 구형 명조체(Serif) 클래스들을 
   가장 세련되고 가독성 높은 Pretendard 산세리프 서체로 완전 강제 통립시킵니다 [1].
*/
.font-serif-kr, .text-serif-italic {
    font-family: 'Pretendard', sans-serif !important;
    font-style: normal !important;
}

/* =====================================================================
   3. 메인 히어로 시네마틱 줌아웃 & 크로스페이드 트랜지션 (밝기 상향 완료)
   ===================================================================== */
@keyframes zoomout {
    0% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1.0);
    }
}

/* 이미지 기본 배율 설정 (로딩 깜빡임 방지) */
#hero-image,
.hero-media-image {
    transform: scale(1.15);
    will-change: transform;
}

/* 슬라이드 크로스페이드 처리 */
.hero-slide {
    transition: opacity 2.0s cubic-bezier(0.4, 0, 0.2, 1), 
                filter 2.0s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, filter;
}

/* 슬라이드 활성화 상태 (밝기를 75%로 화사하게 유지) */
.slide-active {
    opacity: 1 !important;
    z-index: 10 !important;
    filter: blur(0px) brightness(75%) grayscale(10%) contrast(95%);
}

/* 슬라이드 비활성화 상태 */
.slide-inactive {
    opacity: 0 !important;
    z-index: 0 !important;
    filter: blur(4px) brightness(55%) grayscale(15%) contrast(90%);
}

/* =====================================================================
   4. 디지털 분향소 마이크로 인터랙션 (촛불 흔들림 & 국화꽃 상승)
   ===================================================================== */
/* 촛불 불꽃 쉐이프 및 미세 바람 흔들림 효과 */
.candle-flame {
    width: 14px;
    height: 32px;
    background: linear-gradient(to bottom, #ffffff 0%, #E8A87C 30%, rgba(232,168,124,0) 100%);
    border-radius: 50% 50% 20% 20%;
    box-shadow: 0 0 20px 4px rgba(232, 168, 124, 0.6);
    animation: flicker 1.8s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes flicker {
    0% { transform: scale(1) rotate(-1.5deg); }
    100% { transform: scale(1.12) rotate(2deg); }
}

/* 국화꽃 하늘로 둥실 떠오르기 효과 (추모의 벽 전용) */
.flower-float {
    position: absolute;
    bottom: 0px;
    animation: floatUp 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    will-change: transform, opacity;
}

@keyframes floatUp {
    0% {
        transform: translateY(0px) scale(0.6) rotate(0deg);
        opacity: 0;
    }
    20% {
        opacity: 0.9;
    }
    80% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-280px) scale(1.1) rotate(25deg);
        opacity: 0;
    }
}

/* =====================================================================
   5. 기념패 (Plaque) 프리미엄 음영
   ===================================================================== */
.plaque-gold-glow {
    box-shadow: 0 12px 48px rgba(44, 74, 62, 0.08);
    border: 4px solid #C4A882; /* Accent: 밝은 골드 베이지 */
}