/* ============================================================
   상품들(product) 카드 썸네일 - 눈 내려 쌓이는 효과
   - CSP 대응: 인라인 <style>/style="" 없이 외부 CSS + 가상요소만 사용
   - DOM 추가 없음: .card-thumb-snow 의 ::before(내리는 눈) / ::after(쌓이는 눈)
   - product.php 에서만 link 되므로 다른 게시판 카드에는 영향 없음
   - PC 호환: inset 단축속성 대신 top/right/bottom/left 개별 지정
   ============================================================ */

.card-thumb-snow {
    position: relative;   /* 가상요소 기준점 (래퍼에 overflow:hidden 이미 있음) */
}

/* ── 내리는 눈 ───────────────────────────────────────────────
   100px 타일에 흩뿌린 흰 점들을 한 타일만큼 아래로 흘려 끊김 없이 반복.
   속도는 5s (처음값 그대로). */
.card-thumb-snow::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;          /* 카드 클릭 방해 안 함 */
    background-image:
        radial-gradient(1.6px 1.6px at 20px 30px, #ffffff 60%, transparent 61%),
        radial-gradient(2px 2px   at 60px 72px, #ffffff 60%, transparent 61%),
        radial-gradient(1.2px 1.2px at 86px 16px, rgba(255,255,255,.9) 60%, transparent 61%),
        radial-gradient(2px 2px   at 40px 92px, #ffffff 60%, transparent 61%),
        radial-gradient(1.5px 1.5px at 10px 64px, rgba(255,255,255,.85) 60%, transparent 61%),
        radial-gradient(1.5px 1.5px at 74px 48px, #ffffff 60%, transparent 61%),
        radial-gradient(1.3px 1.3px at 50px 6px, rgba(255,255,255,.9) 60%, transparent 61%);
    background-size: 100px 100px;
    background-repeat: repeat;
    animation: cardSnowFall 5s linear infinite;
    opacity: .95;
}

@keyframes cardSnowFall {
    from { background-position: 0 0; }
    to   { background-position: 0 100px; }   /* 한 타일 = 매끄러운 무한 루프 */
}

/* ── 쌓이는 눈 (하단 띠) ─────────────────────────────────────
   바닥에서 흰 눈더미가 자라 올라 일정 높이로 쌓였다가 사르르 사라지고 반복 */
.card-thumb-snow::after {
    content: "";
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: -1px;
    height: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.85) 45%,
        #ffffff 100%);
    border-top-left-radius: 50% 16px;
    border-top-right-radius: 50% 16px;
    filter: drop-shadow(0 -1px 1px rgba(255,255,255,.6));
    animation: cardSnowPile 10s ease-in-out infinite;
}

@keyframes cardSnowPile {
    0%   { height: 0;   opacity: 0; }
    18%  { opacity: 1; }
    60%  { height: 20%; opacity: 1; }   /* 다 쌓인 상태 */
    88%  { height: 20%; opacity: 1; }   /* 잠시 유지 */
    100% { height: 0;   opacity: 0; }   /* 녹듯이 사라지고 다시 반복 */
}