@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;
    
    /* ★★★ [핵심 수정 1] overflow: hidden 삭제! (설정 버튼이 잘리는 주범) ★★★ */
    /* overflow: hidden; */ 
    
    /* ★★★ [핵심 수정 2] absolute -> relative 변경! (설정 버튼 위치 확보) ★★★ */
    position: relative; 
    
    /* 위치를 살짝 옮기고 싶으시면 relative 기준인 left/margin 등을 사용하세요 */
    /* right: -16px;  <- absolute일 때 쓰던 거라 삭제 */
    /* margin-left: 10px; <- 필요시 사용 */
}

/* 위젯 헤더 */
.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;
    
    /* 헤더 모서리만 둥글게 처리 (container에서 overflow 뺐으니까 여기서 처리) */
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.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);
    margin: 0; /* 제목 여백 초기화 */
}

/* 배너 목록 본문 */
.scroll-widget-body {
    padding: 0;
    /* 본문 하단 둥글게 */
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* =============================================== */
/* ▼▼▼ 개별 배너 아이템 디자인 ▼▼▼ */
/* =============================================== */
.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; /* 내부는 잘려도 됨 */
    
    /* 여기서 둥근 모서리 관리 */
    border-radius: 5px; 
}

.scroll-info-box {
    width: 100%;
    margin: 0;
    background-color: #f8f9fa;
    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;
}

/* 호버 효과 */
.scroll-item-wrapper:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    z-index: 10; /* 호버 시 위로 올라오게 */
}
.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); }