@charset "utf-8";

/**
 * [에이스그린 애니메이션 라이브러리 - 최종 통합 보정본]
 * 수정사항:
 * 1. 이동형(up/down/left/right) 초기값 및 등장 로직 강화
 * 2. transition-delay와 animation-delay 강제 동기화
 * 3. 스티키 및 다크모드 텍스트 보호 로직 유지
 */

/* ==========================================================================
   [01] 베이스 설정 (초기 상태 및 딜레이 연동)
   ========================================================================== */
[data-animate-in] {
    opacity: 0;
    will-change: transform, opacity;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s ease;
    /* transition-delay는 JS에서 인라인으로 직접 주입하므로 여기서는 생략 */
}

/* 등장 완료 상태 (플립을 제외한 일반 이동형/스케일 효과 전용) */
[data-animate-in].in-view:not([data-animate-in^="flip"]) {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
}

/* ==========================================================================
   [02] 방향 및 스케일 애니메이션 초기값 (Transition 기반)
   ========================================================================== */
/* 중요: !important를 통해 초기 위치를 확실히 잡아줍니다. */
[data-animate-in="up"]    { transform: translate3d(0, 50px, 0) !important; }
[data-animate-in="down"]  { transform: translate3d(0, -50px, 0) !important; }
[data-animate-in="left"]  { transform: translate3d(-50px, 0, 0) !important; }
[data-animate-in="right"] { transform: translate3d(50px, 0, 0) !important; }
[data-animate-in="zoomIn"]  { transform: scale(0.85) !important; }
[data-animate-in="zoomOut"] { transform: scale(1.15) !important; }
[data-animate-in="fadeInUp"] { opacity: 0; transform: translate3d(0, 40px, 0); }
/* ==========================================================================
   [03] 플립 애니메이션 (Keyframes 기반)
   ========================================================================== */
[data-animate-in^="flip"] {
    transform-style: preserve-3d;
    backface-visibility: visible !important;
    /* 초기 투명도 설정 */
    opacity: 0;
}

[data-animate-in^="flip"].in-view {
    opacity: 1 !important;
    transition-property: none !important;
    animation-duration: 0.9s;
    animation-fill-mode: both;
}
[data-animate-in].in-view:not([data-animate-in^="flip"]) {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
}
/* 효과별 키프레임 연결 */
[data-animate-in="flipInY"].in-view     { animation-name: flipInY_Embank; }
[data-animate-in="flipInX"].in-view     { animation-name: flipInX_Embank; }
[data-animate-in="flipInY_Rv"].in-view  { animation-name: flipInY_Reverse_Embank; }
[data-animate-in="flipInX_Rv"].in-view  { animation-name: flipInX_Reverse_Embank; }

/* ==========================================================================
   [04] Keyframes (플립 상세 로직)
   ========================================================================== */
@keyframes flipInY_Embank {
    from { transform: perspective(900px) rotate3d(0, 1, 0, 90deg); opacity: 0; }
    40%  { transform: perspective(900px) rotate3d(0, 1, 0, -18deg); }
    60%  { transform: perspective(900px) rotate3d(0, 1, 0, 10deg); opacity: 1; }
    80%  { transform: perspective(900px) rotate3d(0, 1, 0, -4deg); }
    to   { transform: perspective(900px) rotate3d(0, 1, 0, 0deg); opacity: 1; }
}

@keyframes flipInX_Embank {
    from { transform: perspective(900px) rotate3d(1, 0, 0, 90deg); opacity: 0; }
    40%  { transform: perspective(900px) rotate3d(1, 0, 0, -18deg); }
    60%  { transform: perspective(900px) rotate3d(1, 0, 0, 10deg); opacity: 1; }
    80%  { transform: perspective(900px) rotate3d(1, 0, 0, -4deg); }
    to   { transform: perspective(900px) rotate3d(1, 0, 0, 0deg); opacity: 1; }
}

@keyframes flipInY_Reverse_Embank {
    from { transform: perspective(900px) rotate3d(0, 1, 0, -90deg); opacity: 0; }
    40%  { transform: perspective(900px) rotate3d(0, 1, 0, 18deg); }
    60%  { transform: perspective(900px) rotate3d(0, 1, 0, -10deg); opacity: 1; }
    80%  { transform: perspective(900px) rotate3d(0, 1, 0, 4deg); }
    to   { transform: perspective(900px) rotate3d(0, 1, 0, 0deg); opacity: 1; }
}

@keyframes flipInX_Reverse_Embank {
    from { transform: perspective(900px) rotate3d(1, 0, 0, -90deg); opacity: 0; }
    40%  { transform: perspective(900px) rotate3d(1, 0, 0, 18deg); }
    60%  { transform: perspective(900px) rotate3d(1, 0, 0, -10deg); opacity: 1; }
    80%  { transform: perspective(900px) rotate3d(1, 0, 0, 4deg); }
    to   { transform: perspective(900px) rotate3d(1, 0, 0, 0deg); opacity: 1; }
}

/* ==========================================================================
   [05] 특수 인터랙션 및 유틸리티
   ========================================================================== */
/* 박스 확장 */
[data-animate-in="box-expand"] {
    transform: scale(0.85);
    border-radius: 40px;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), border-radius 1.2s ease, opacity 1s ease;
}
[data-animate-in="box-expand"].in-view {
    transform: scale(1) !important;
    border-radius: 0px;
    opacity: 1;
}

/* 둥실둥실 */
[data-animate-in="float"].in-view {
    animation: floating 3s ease-in-out infinite alternate;
}
@keyframes floating {
    from { transform: translateY(0); }
    to { transform: translateY(-15px); }
}

/* 페이지 로드 유틸리티 */
.fade-in { opacity: 0; transition: opacity 1.5s ease; }
.page-loaded .fade-in { opacity: 1 !important; }



/* ==========================================================================
   [06] 배경색 전환 및 텍스트 변수 제어 (복구 통합본)
   ========================================================================== */
.bg-transition-section {
    /* 1. 기본 컬러 변수 (밝은 배경일 때) */
    --head-title: var(--gray_2);    /* 제목 */
    --head-point: #0048c4;          /* 포인트 */
    --head-sub: var(--gray_6);      /* 부제목/본문 */

    background-color: #ffffff;
    color: var(--gray_6);
    transition: background-color 0.8s ease, color 0.5s ease;
}

/* 2. 다크모드(.is-dark) 시 변수값 교체 */
.bg-transition-section.is-dark {
    --head-title: #33b2ff;          /* 하늘색 강조 */
    --head-point: #33b2ff;          /* 형광 파란색 */
    --head-sub: #e2f1ff;            /* 연회색 */

    background-color: #002FA7;
    color: #e2f1ff;
}

/* 3. 변수를 실제 요소에 연결 */
/* 섹션의 헤더 및 특정 텍스트들만 변수 애니메이션 적용 */
.bg-transition-section .sect_head .title_txt { color: var(--head-title); transition: color 0.5s; }
.bg-transition-section .sect_head .point_txt { color: var(--head-point); transition: color 0.5s; }
.bg-transition-section .sect_head .sub_txt   { color: var(--head-sub); transition: color 0.5s; }

/* 타이틀바 연동 */
.bg-transition-section .title_bar {
    background-color: var(--head-point);
    transition: background-color 0.6s ease;
}

/* 4. 스티키 내부 카드/리뷰 텍스트 보호 로직 (보정) */
.bg-transition-section.is-dark .ez-card {
    background-color: #ffffff !important; /* 배경 흰색 고정 */
}

/* [수정] ez-card 내부의 모든 텍스트 컬러를 어두운 색으로 강제 고정 */
.bg-transition-section.is-dark .ez-card h5,
.bg-transition-section.is-dark .ez-card p,
.bg-transition-section.is-dark .ez-card div,
.bg-transition-section.is-dark .ez-card span:not(.badge) {
    color: #3a4755 !important; /* 다크모드에서도 어두운 색 유지 */
}

/* 컬러 클래스(fc_...)를 직접 사용한 경우도 보호 */
.bg-transition-section.is-dark .ez-card [class*="fc_gray"] {
    color: inherit !important; /* 원래 지정된 회색 유지 */
}

/* 컬러 클래스(fc_...) 복구 */
.bg-transition-section.is-dark .ez-card .fc_gray_3 { color: #3a4755 !important; }
.bg-transition-section.is-dark .ez-card .fc_gray_6 { color: #98a5b3 !important; }

/* 5. 개별 강조 효과 */
.bg-transition-section.is-dark .fc_light_point {
    color: #00e5ff !important;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}

/* 편리성 극대화 섹션 전용 (간결화) */
.product_type_card {
    transition: transform 0.3s ease;
    border: 1px solid #eee;
}
.product_type_card:hover { transform: translateY(-10px); }