@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* ===========================================
   글로벌 색상 변수
   =========================================== */

:root {
    /* Primary Colors - 골드 계열 */
    --color-primary: #C9A86A;
    --color-primary-hover: #A57D47;
    --color-primary-light: rgba(201, 168, 106, 0.1);
    --color-primary-border: rgba(201, 168, 106, 0.2);
    --color-primary-border-light: rgba(201, 168, 106, 0.3);
    --color-primary-hover-bg: rgba(165, 125, 71, 0.2);
    /* Secondary (Emerald) — 신규/추천/성공/세컨 CTA 전용 */
    --color-accent: #2FAF72;
    /* 메인 액센트(에메랄드 600) */
    --color-accent-hover: #176E49;
    /* 호버 700 */
    --color-accent-weak: rgba(31, 138, 91, .16);
    /* 배경칩/태그 배경 */
    /* Optional Teal (데이터/링크 미세 하이라이트용) */
    --color-teal: #3BA7A0;
    /* 보조 포인트(드물게) */
    /* Base Colors */
    --color-white: #FFFFFF;
    --color-white-alpha-80: rgba(255, 255, 255, 0.8);
    --color-white-alpha-90: rgba(255, 255, 255, 0.9);
    /* Background Colors */
    --bg-dark: #161617;
    --bg-dark-2: #080808;
    --bg-overlay: #161617ba;
    --bg-overlay-2: #080808ba;
    --bg-overlay-dark: rgba(26, 26, 26, 0.95);
}


/* WordPress 관리자 바 여백 제거 */

html {
    margin-top: 0 !important;
}

body {
    background-color: var(--bg-dark);
    color: var(--color-white);
}


/* 페이지 초기 로딩 상태 - 깜빡임 방지 */

body:not(.page-loaded) {
    opacity: 1;
}

body.page-loaded {
    opacity: 1;
    transition: opacity 0.2s ease;
}

.poppins {
    font-family: "Poppins", sans-serif !important;
}

.fw-container {}


/* 스크롤 인디케이터 스타일 */

.scroll-indicator {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0;
    animation: fadeInScroll 1s ease-out 4s forwards;
    z-index: 10;
    cursor: unset;
    transition: opacity 0.3s ease;
}


/* .scroll-indicator:hover .scroll-icon {
    border-color: var(--membership-gold);
}

.scroll-indicator:hover .scroll-text {
    color: var(--membership-gold);
} */

.scroll-icon {
    width: 28px;
    height: 45px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    position: relative;
    transition: border-color 0.3s ease;
}

.scroll-wheel {
    width: 4px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 5px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollWheel 2s ease-in-out infinite;
}

.scroll-text {
    font-size: 10px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
    font-family: "Poppins", sans-serif !important;
}


/* 애니메이션 정의 */

@keyframes fadeInScroll {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes scrollWheel {
    0%,
    100% {
        top: 8px;
        opacity: 1;
    }
    50% {
        top: 20px;
        opacity: 0.3;
    }
}

@keyframes scrollBounce {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(5px);
    }
}

.desktop-only {
    display: block !important;
}

.mobile-only {
    display: none !important;
}


/* 모바일 반응형 */

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
    .mobile-only {
        display: block !important;
    }
    .scroll-indicator {
        bottom: 0px;
    }
    .scroll-text {
        font-size: 10px;
        letter-spacing: 1.5px;
    }
    .scroll-icon {
        width: 22px;
        height: 35px;
        border-width: 1px;
    }
    .scroll-wheel {
        width: 3px;
        height: 6px;
    }
}