@charset "utf-8";
/* ================================================================
    스크롤배너 widget.css
================================================================ */
/* 폰트 로드 */
@import url('https://fonts.googleapis.com/css2?family=Gmarket+Sans+TTF:wght@700&family=Noto+Sans+KR:wght@500;700&display=swap');
/* Font Awesome 아이콘 사용을 위한 링크 (테마에 이미 포함되어 있다면 생략 가능) */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

/* 위젯 전체를 감싸는 컨테이너 */
.scroll-widget-container {width: 152px;margin: 0 auto;background-color: #ffffff;border-radius: 5px;overflow: hidden;position: absolute;right: -16px;}

/* 위젯 헤더 */
.scroll-widget-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 12px 15px;
    display: flex;
    justify-content: center; /* [수정] 제목을 중앙 정렬 */
    align-items: center;
    border-bottom: solid 1px #dbdbdb;
}
.scroll-widget-title {
    font-family: 'Gmarket Sans TTF', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

/* [제거] 헤더 네비게이션 버튼 관련 스타일 */

/* 배너 목록이 표시될 본문 영역 */
.scroll-widget-body {
    padding: 0px 0;
     /* 보여질 높이 지정 */
     /* 내용이 많아지면 스크롤바 생성 */
}
/* 스크롤바 디자인 (웹킷 브라우저용) */
.scroll-widget-body::-webkit-scrollbar {
    width: 4px;
}
.scroll-widget-body::-webkit-scrollbar-thumb {
    background: #d8d8d8;
    border-radius: 4px;
}
.scroll-widget-body::-webkit-scrollbar-track {
    background: transparent;
}


/* =============================================== */
/* ▼▼▼ 개별 배너 아이템 디자인 ▼▼▼ */
/* =============================================== */
.widget-scroll_wing ul { list-style: none; padding: 0; margin: 0; }
.widget-scroll_wing .na-glowing-item {
    padding: 0;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
}
.widget-scroll_wing .na-glowing-item:last-child {
    margin-bottom: 0;
}

/* [수정] 링크 래퍼(하나의 카드 역할) */
.scroll-item-wrapper {
    display: block;
    text-decoration: none;
    width: 100%; /* 내부 컨텐츠 너비와 동일하게 조정 */
    background: #ffffff;
    transition: all 0.3s ease-in-out;
    box-sizing: border-box;
    overflow: hidden; /* ★★★ [추가] 내부 요소가 모서리를 벗어나지 않도록 클리핑 */
}

/* [제거] .scroll-outer-box 스타일 */

.scroll-info-box {
    width: 100%;
    margin: 0;
    background-color: #f8f9fa;
    border-radius: 0; /* ★★★ [수정] 부모가 모서리를 제어하므로 제거 */
    padding: 8px;
    border: solid 1px #d5d5d5;
    border-top: none; /* 썸네일과의 경계선을 부드럽게 */
    box-sizing: border-box;
}
.scroll-banner-location,
.scroll-banner-category {
    display: block;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}
.scroll-banner-location {font-size: 12px;color: #343a40;}
.scroll-banner-category { font-size: 12px; font-weight: 500; color: #868e96; margin-top: 3px; }
.scroll-banner-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #e9ecef;
    border-radius: 0; /* ★★★ [수정] 부모가 모서리를 제어하므로 제거 */
}

/* [수정] 호버 효과 대상 변경 */
.scroll-item-wrapper:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.scroll-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
}
.scroll-item-wrapper:hover .scroll-banner-bg { transform: scale(1.08); }