@charset "utf-8";

@import url('base.css');
@import url('layout.css');

@import url('compent.css');
@import url('font.css');

@import url('contents.css');
@import url('response.css');

/* 전체 오버레이 */
.loader-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: none; /* 기본 숨김 */
    justify-content: center;
    align-items: center;
    z-index: 9999999;
}

/* 스피너 */
.loader {
    border: 8px solid #8d3e1e;
    border-top: 8px solid #c96f39;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    animation: spin 1s linear infinite;
}

/* 회전 애니메이션 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}




/*상단한줄공지*/
/* [1. 전체 영역: 투명 배경 유지] */
.luxury-top-bar {
    width: 50%;
    padding: 15px 0;
    background: transparent;
    display: flex;
    justify-content: center;
    overflow: visible; /* ★파티클이 밖으로 퍼지게 */
    z-index: 1000;
}

/* [2. 둥근 캡슐바: 짙은 블랙 + ★금색 네온 광채] */
.notice-pill {
    position: relative;
    width: 90%;
    max-width: 900px;
    height: 42px;
    background: rgba(0, 0, 0, 0.95); /* 더 짙은 블랙 */
    border: 1.5px solid #ffca28; /* ★더 밝고 진한 금색 테두리 */
    border-radius: 50px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    overflow: hidden; /* 내부 글자는 가림 */

    /* ★테두리 주변에 퍼지는 금색 네온 광채 (Glow) */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6),
    0 0 15px rgba(255, 202, 40, 0.5);
}

/* ★[핵심 추가 - 반짝임 파티클]★
   캡슐 뒤에서 미세한 금색 가루들이 반짝이는 효과 */
.notice-pill::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;

    /* 무작위 점 무늬 그라데이션으로 반짝이 표현 */
    background-image:
            radial-gradient(#fff 1px, transparent 1px),
            radial-gradient(#fff 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;

    /* 금색 네온 색상 입히기 */
    filter: drop-shadow(0 0 5px #ffca28);
    opacity: 0.15;

    /* 무작위로 깜빡이는 애니메이션 */
    animation: twinkle 4s infinite linear;
    pointer-events: none;
}

/* [3. HOT 배지: 은은한 숨쉬기 효과] */
.badge {
    background: linear-gradient(135deg, #ffca28, #ff8f00);
    color: #000;
    font-size: 11px;
    font-weight: 900;
    padding: 4px 14px;
    border-radius: 50px;
    flex-shrink: 0;
    margin-right: 15px;
    box-shadow: 0 0 8px rgba(255, 202, 40, 0.6);
    z-index: 10;
    /* 배지도 은은하게 숨쉼 */
    animation: badge-pulse 2s infinite ease-in-out;
}

/* [4. 흐르는 텍스트 컨테이너] */
.scroll-container {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    z-index: 5;
}

/* [5. 흐르는 텍스트: 무한 스크롤 + ★금색 광채 숨쉬기] */
.scrolling-text {
    display: inline-block;
    color: #fff; /* ★기본 글자는 흰색으로 */
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.5px;

    /* ★글자 자체에서 퍼지는 금색 광채 & 무한 스크롤 */
    animation: marquee 20s linear infinite,
    text-glow 1.5s infinite ease-in-out;
}

/* ========================================= */
/* ★★★ 애니메이션 정의 (가장 중요) ★★★ */
/* ========================================= */

/* 1. 무한 스크롤 */
@keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* 2. 글자 금색 광채 숨쉬기 (Text Glow) */
@keyframes text-glow {
    0%, 100% {
        text-shadow: 0 0 5px #ffca28, 0 0 10px #ffca28, 0 0 20px #ff8f00;
        color: #fff;
    }
    50% {
        text-shadow: 0 0 2px #ffca28;
        color: #f1d27b; /* 약간 어두워짐 */
    }
}

/* 3. 파티클 반짝임 (Twinkle) */
@keyframes twinkle {
    0% { transform: translate(0, 0); opacity: 0.15; }
    25% { transform: translate(5px, 5px); opacity: 0.05; }
    50% { transform: translate(-5px, 10px); opacity: 0.15; }
    75% { transform: translate(10px, -5px); opacity: 0.05; }
    100% { transform: translate(0, 0); opacity: 0.15; }
}

/* 4. 배지 숨쉬기 */
@keyframes badge-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(255, 202, 40, 0.6); }
    50% { transform: scale(1.03); box-shadow: 0 0 15px rgba(255, 202, 40, 0.9); }
}