@charset "utf-8";
/* ================================================================
    광고 위젯 타입별 최종 커스텀 스타일 (완전 분리) widget.css
================================================================ */
.category_premium-home-section {
    margin-top: 23px;
    clear: both;
}

/* --- 공통 애니메이션 정의 --- */
@keyframes na-pulsate-glow {
    
 0% {
        border-color: rgba(60, 60, 60, 0.8);
        box-shadow: 0 0 8px rgba(30, 30, 30, 0.5);
    }

    
 50% {
        border-color: rgba(120, 120, 120, 1);
        box-shadow: 0 0 18px rgba(60, 60, 60, 0.7);
    }

    
 100% {
        border-color: rgba(60, 60, 60, 0.8);
        box-shadow: 0 0 8px rgba(30, 30, 30, 0.5);
    }
}

/* ================================================================
    1. 프리미엄 광고 위젯 (★ 흰색 배경에 맞는 박스형 디자인으로 수정 ★)
================================================================ */
.category_premium-gallery-widget .na-glowing-item {
    width: 25% !important;
    position: relative;
    filter: none !important;
    padding: 0 8px;
    
    /* [수정] 3D 공간 설정을 제거하여 2D 렌더링으로 유도 */
}

.category_premium-gallery-widget .glowing-card {
    background: #ffffff;
    position: relative;
    border: solid 1px #d5d5d5;
    /* [수정] 3D 스타일 제거 */
    /* transform-style: preserve-3d; */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
    animation: none;
    will-change: transform;
}

.category_premium-gallery-widget .glowing-card:hover {
    /* [수정] 3D scale을 2D scale로 변경 */
    transform: scale(1.05);
}

.category_premium-gallery-widget .card-content {
    position: relative;
    z-index: 3;
    background: #ffffff;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: #1f2937;
    border: none;
}

.glowing-card .card-image-wrap {
    padding-bottom: 43.33% !important; /* 예시: 3:4 비율 (세로로 길게). (세로/가로 * 100) */
                                        /* 정사각형으로 하려면 100%, 가로로 넓게 하려면 75% 등으로 조절하세요. */
}

.category_premium-gallery-widget .card-image-wrap {
    margin-bottom: 6px;
    /* [수정] 3D 스타일 제거 */
    /* transform-style: preserve-3d; */
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 1:1 비율 */
    background-color: #f3f4f6;
    overflow: hidden;
}

.category_premium-gallery-widget .card-image-wrap img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
}

.category_premium-gallery-widget .card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 6px;
    flex-grow: 1;
    text-shadow: none;
    min-height: 40px;
    text-align: center;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
    border-image: none;
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, transparent, rgba(100, 100, 100, 0.8), transparent) 1;
}

.category_premium-gallery-widget .card-title a {
    color: #333;
    text-decoration: none;
}
.category_premium-gallery-widget .card-title a:hover {
    color: #4f46e5;
}

/* [최종 수정] 아이콘이 예쁘게 표시되도록 스타일을 추가합니다. */
.category_premium-gallery-widget .ad-info-box {
    font-size: 13px;
    color: #6b7280;
    margin-top: -4px;
    text-align: center;
    padding-bottom: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; /* 아이콘과 텍스트, 구분선 사이의 간격 */
}

.category_premium-gallery-widget .ad-info-box span {
    display: flex;
    align-items: center;
    gap: 4px; /* 아이콘과 텍스트 사이 간격 */
}

.category_premium-gallery-widget .ad-info-box .px-1 {
    padding-left: 0;
    padding-right: 0;
}


/* --- ★★★ [추가] 네모 박스 '강력추천' 뱃지 ★★★ --- */
.category_premium-gallery-widget .recommend-badge {
    position: absolute;
    top: -16px;
    left: 0px;
    z-index: 10;
    background-color: #325793de; /* 파란색 배경 */
    color: white;
    padding: 2px 6px; /* 타원형 모양을 위한 패딩 */
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 2px; /* 타원형 모양 */
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse-glow 2.5s infinite ease-in-out;
}

@keyframes pulse-glow {
    0% {
        /* 어두운 남색(44, 62, 80) 계열의 그림자로 변경합니다. */
        box-shadow: 0 0 5px rgba(44, 62, 80, 0.6);
    }
    50% {
        box-shadow: 0 0 5px rgba(44, 62, 80, 1);
    }
    100% {
        box-shadow: 0 0 5px rgba(44, 62, 80, 0.6);
    }
}

.category_premium-gallery-widget .recommend-badge::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 0;
    border-top: 8px solid #4f46e5;
    border-left: 8px solid transparent;
}

/* [ ★★★ 기존 뱃지 스타일 유지 ★★★ ] */
.category_premium-gallery-widget .badge-container {
    position: absolute;
    top: -14px; /* 위치 조정 */
    right: 0px;
    z-index: 11;
    display: flex;
    flex-direction: row;
    gap: 4px;
}

.category_premium-gallery-widget .status-badge {
    position: static !important;
    padding: 0px 3px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}
.category_premium-gallery-widget .status-badge.badge-urgent { background: #ef4444de; }
.category_premium-gallery-widget .status-badge.badge-recommend { background: #f39c12de; }
.category_premium-gallery-widget .status-badge.badge-open { background: #22c55ede; }
.category_premium-gallery-widget .status-badge.badge-guarantee { background: #3b82f6de; }

/* 무료 광고는 뱃지 숨김 */
/* ================================================================
    게시글 제목 꾸미기 옵션 스타일
================================================================ */
.opt-bold {
    font-weight: 800 !important;
}

.opt-underline {
    text-decoration: underline !important;
}

.opt-italic {
    font-style: italic !important;
}

.fg-hotpink {
    color: #FF69B4 !important;
}

.fg-blue {
    color: #3498DB !important;
}

.fg-spring {
    color: #2ECC71 !important;
}

.fg-yellow {
    color: #F1C40F !important;
}

.fg-white {
    color: #FFFFFF !important;
}

.bg-yellow, .bg-hotpink, .bg-teal {
    padding: 6px 3px;
    border-radius: 4px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    color: #ffffff !important;
    display: inline-block;
}

.bg-yellow {
    background-color: #F1C40F;
}

.bg-hotpink {
    background-color: #FF69B4;
}

.bg-teal {
    background-color: #1abc9c;
}