/* ===
Ad Components (coupang partners via goto.php redirection)
=== */

/* -- Common -- */
.ad-label {
    display: inline-block; font-size: 10px; letter-spacing: 1px; color: rgba(255,255,255,0.35);
    text-transform: uppercase; margin: 0 0 4px;
}

/* -- Horizontal strip banner (between content sections) -- */
.ad-strip {
    margin: 25px auto; text-align: center;
}
.ad-strip a {
    display: inline-block; position: relative; border-radius: 8px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12); background-color: #fff;
    transition: transform 0.2s, box-shadow 0.2s; line-height: 0;
}
.ad-strip a:hover {transform: translateY(-2px); box-shadow: 0 6px 18px rgba(255,0,102,0.15);}
.ad-strip img {width: 480px; max-width: 100%; height: auto; display: block;}
.ad-strip .ad-label {display: block;}

/* -- Native card ad (blends into game list) -- */
.game-item.ad-native .img-bx {position: relative;}
.game-item.ad-native .ad-creative {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 8px; width: 100%; aspect-ratio: 4 / 5; box-sizing: border-box; padding: 10% 12%;
    border-radius: inherit;
    background: linear-gradient(135deg, #1b2c53 0%, #27356b 55%, #492653 100%);
}
.game-item.ad-native .ad-creative .big {
    font-size: clamp(16px, 1.6vw, 22px); font-weight: 800; color: #fff; line-height: 1.3;
}
.game-item.ad-native .ad-creative .big em {font-style: normal; color: #ffd34d;}
.game-item.ad-native .ad-creative .small {font-size: clamp(11px, 1vw, 13px); color: rgba(255,255,255,0.75);}
.game-item.ad-native .ad-creative .cta {
    margin-top: 6px; font-size: clamp(11px, 1vw, 13px); font-weight: 700; color: #fff;
    background-color: var(--color-highlight-blue); padding: 5px 14px; border-radius: 20px;
}
.game-item.ad-native .sub-bx .coin-info {display: block;}
.game-item.ad-native .coin-info .coupang-mark {
    font-weight: 800; font-size: 13px;
    background: linear-gradient(90deg,#a52c22,#e05a00,#f7b500,#4ba614,#0074c8,#7b3fa4);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* -- Rolling image fade -- */
.ad-roll-img {transition: opacity 0.3s ease;}

/* -- Sticky bottom bar (PC/모바일 공통, X로 닫으면 이번 페이지에서만 숨김) -- */
.ad-sticky-bottom {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background-color: rgba(12,12,24,0.96); border-top: 1px solid rgba(255,255,255,0.15);
    padding: 6px 40px 6px 8px; text-align: center;
    box-shadow: 0 -4px 14px rgba(0,0,0,0.45);
}
.ad-sticky-bottom.show {display: block; animation: adSlideUp 0.35s ease;}
.ad-sticky-bottom.hide {animation: adSlideDown 0.3s ease forwards;}
.ad-sticky-bottom a {display: inline-block; line-height: 0;}
.ad-sticky-bottom img {max-width: 100%; width: 320px; height: auto; border-radius: 4px;}
.ad-sticky-bottom .ad-close {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border-radius: 50%;
    background-color: rgba(255,255,255,0.15); color: #fff; font-size: 15px; line-height: 28px;
    border: none; cursor: pointer; padding: 0;
}
.ad-sticky-bottom .ad-close:hover {background-color: rgba(255,255,255,0.3);}
@keyframes adSlideUp {from {transform: translateY(110%);} to {transform: translateY(0);}}
@keyframes adSlideDown {from {transform: translateY(0); opacity: 1;} to {transform: translateY(110%); opacity: 0;}}
/* PC: 하단 중앙 플로팅 필 형태 */
@media screen and (min-width:769px) {
    .ad-sticky-bottom {
        left: 50%; right: auto; bottom: 14px; transform: translateX(-50%);
        border: 1px solid rgba(255,255,255,0.18); border-radius: 12px;
        padding: 8px 44px 8px 12px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.55);
    }
    .ad-sticky-bottom img {width: 400px;}
    .ad-sticky-bottom.show {animation: adSlideUpPC 0.35s ease;}
    .ad-sticky-bottom.hide {animation: adSlideDownPC 0.3s ease forwards;}
    @keyframes adSlideUpPC {from {transform: translate(-50%, 140%);} to {transform: translate(-50%, 0);}}
    @keyframes adSlideDownPC {from {transform: translate(-50%, 0); opacity: 1;} to {transform: translate(-50%, 140%); opacity: 0;}}
}

/* -- Center popup (앱 광고 스타일) -- */
.ad-popup {
    position: fixed; inset: 0; z-index: 990;
    display: flex; align-items: center; justify-content: center;
    background-color: rgba(0,0,0,0.6);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.ad-popup.show {opacity: 1; pointer-events: auto;}
.ad-popup .pop-box {
    position: relative; max-width: min(340px, 85vw);
    transform: scale(0.88) translateY(14px);
    transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.ad-popup.show .pop-box {transform: scale(1) translateY(0);}
.ad-popup .pop-box a {display: block; line-height: 0;}
.ad-popup .pop-box img {
    display: block; width: 100%; max-height: 66vh; object-fit: cover;
    border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,0.6);
}
.ad-popup .pop-close {
    position: absolute; top: -14px; right: -14px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25);
    background-color: rgba(20,20,32,0.92); color: #fff; font-size: 18px; line-height: 32px;
    cursor: pointer; padding: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.ad-popup .pop-close:hover {background-color: rgba(60,60,80,0.95);}
.ad-popup .pop-caption {
    margin: 10px auto 0; text-align: center; color: rgba(255,255,255,0.65); font-size: 12px;
}
@media screen and (max-width:768px) {
    .ad-popup .pop-box {max-width: 78vw;}
    .ad-popup .pop-box img {max-height: 62vh;}
    .ad-popup .pop-close {top: -12px; right: -12px;}
}

/* -- Fullscreen interstitial (event completed page) -- */
.ad-interstitial {
    display: none; position: fixed; inset: 0; z-index: 1000;
    background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center;
}
.ad-interstitial.show {display: flex;}
.ad-interstitial .inter-box {position: relative; max-width: 92vw;}
.ad-interstitial .inter-box a {display: block; line-height: 0;}
.ad-interstitial img {
    display: block; max-height: 82vh; max-width: 92vw; width: auto; height: auto;
    border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}
.ad-interstitial .inter-timer {
    position: absolute; top: 10px; right: 10px;
    min-width: 34px; height: 34px; line-height: 34px; border-radius: 17px; padding: 0 6px;
    background-color: rgba(0,0,0,0.65); color: #fff; text-align: center; font-size: 14px;
    box-sizing: border-box;
}
.ad-interstitial .inter-close {
    position: absolute; top: 10px; right: 10px; display: none;
    width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
    background-color: rgba(0,0,0,0.65); color: #fff; font-size: 17px; line-height: 34px; padding: 0;
}
.ad-interstitial .inter-close.show {display: block;}
.ad-interstitial .inter-caption {
    margin: 12px auto 0; text-align: center; color: rgba(255,255,255,0.6); font-size: 12px;
}

/* keep footer content clear of the sticky bar on mobile */
@media screen and (max-width:768px) {
    body.has-sticky-ad .footer {padding-bottom: 70px;}
}