<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
?>

<link rel="stylesheet" href="<?php echo G5_URL ?>/rb/rb.widget/rb.icon_menu/style.css">

<!--
경로 : /rb/rb.widget/rb.icon_menu/
사용자코드를 입력하세요.
-->

<style>
    /* ✅ 강제 오버라이드(다른 CSS가 덮어써도 적용되게) */
    .rb_icon_menu_wrap{
        padding-top:20px !important;
        padding-bottom:20px !important;
        box-sizing:border-box !important;
    }
    .rb_icon_menu_tit{
        font-size:22px !important;
        text-align:center !important;
        margin:0 !important;
        line-height:1.2 !important;
    }
    .rb_icon_menu_tit_sub{
        color:#999 !important;
        font-size:14px !important;
        margin-top:6px !important;
        text-align:center !important;
        line-height:1.2 !important;
    }

    /* ✅ 카드 영역(배경/여백/라운드) */
    .rb_icon_menu_wrap .rb_icon_menu{
        margin-top:16px !important;
        border-radius:14px !important;
        background-color:#f3f4f6 !important; /* 회색 배경 */
        height:auto !important;
        padding-top:18px !important;
        padding-bottom:18px !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
        border:1px solid rgba(0,0,0,.06) !important;
    }

    /* ✅ 기존 SVG 숨김 */
    .rb_icon_menu_wrap .rb_icon_menu_inner svg{display:none !important;}

    /* ✅ 아이콘(PNG) 표시 */
    .rb_icon_menu_wrap .rb_icon_menu_inner li dd:first-child{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        height:56px !important;
    }
    .rb_icon_menu_wrap .rb_icon_menu_inner li dd:first-child img{
        width:44px !important;
        height:44px !important;
        object-fit:contain !important;
        display:block !important;
    }

    /* ✅ 텍스트 스타일 */
    .rb_icon_menu_wrap .rb_icon_menu_inner li dd:last-child{
        text-align:center !important;
        font-weight:800 !important;
        font-size:14px !important;
        line-height:1.2 !important;
        margin-top:10px !important;
        color:#374151 !important;
    }

    /* ✅ 클릭 가능하게 */
    .rb_icon_menu_wrap .rb_icon_menu_inner li{
        cursor:pointer !important;
    }

    /* ✅ 모바일 튜닝 */
    @media (max-width:1024px){
        .rb_icon_menu_wrap{
            padding:16px !important;
            border-top:1px solid #eee !important;
        }
        .rb_icon_menu_tit{
            font-size:20px !important;
            padding-left:10px !important;
            padding-right:10px !important;
        }
        .rb_icon_menu_wrap .rb_icon_menu{
            padding-top:16px !important;
            padding-bottom:14px !important;
            border-radius:14px !important;
        }
        .rb_icon_menu_wrap .rb_icon_menu_inner li dd:last-child{
            font-size:13px !important;
            margin-top:9px !important;
        }
    }
</style>

<div class="rb_icon_menu_wrap">
    <div class="rb_icon_menu_tit font-B">카테고리 바로가기</div>
    <div class="rb_icon_menu_tit_sub">PNG 아이콘/제목 커스텀</div>

    <div class="rb_icon_menu swiper-container swiper-container-rb_icon_menu">
        <ul class="rb_icon_menu_inner swiper-wrapper swiper-wrapper-rb_icon_menu">

            <li class="swiper-slide swiper-slide-rb_icon_menu menu-spa" onclick="location.href='/bbs/board.php?bo_table=spa'">
                <dd><img src="/theme/<?php echo G5_THEME; ?>/img/icons/spa.png" alt="스파"></dd>
                <dd>스파</dd>
            </li>

            <li class="swiper-slide swiper-slide-rb_icon_menu menu-massage" onclick="location.href='/bbs/board.php?bo_table=massage'">
                <dd><img src="/theme/<?php echo G5_THEME; ?>/img/icons/massage.png" alt="마사지"></dd>
                <dd>마사지</dd>
            </li>

            <li class="swiper-slide swiper-slide-rb_icon_menu menu-barber" onclick="location.href='/bbs/board.php?bo_table=barber'">
                <dd><img src="/theme/<?php echo G5_THEME; ?>/img/icons/barber.png" alt="이발소"></dd>
                <dd>이발소</dd>
            </li>

            <li class="swiper-slide swiper-slide-rb_icon_menu menu-hotel" onclick="location.href='/bbs/board.php?bo_table=hotel'">
                <dd><img src="/theme/<?php echo G5_THEME; ?>/img/icons/hotel.png" alt="호텔"></dd>
                <dd>호텔</dd>
            </li>

            <li class="swiper-slide swiper-slide-rb_icon_menu menu-restaurant" onclick="location.href='/bbs/board.php?bo_table=restaurant'">
                <dd><img src="/theme/<?php echo G5_THEME; ?>/img/icons/restaurant.png" alt="식당"></dd>
                <dd>식당</dd>
            </li>

            <li class="swiper-slide swiper-slide-rb_icon_menu menu-bar" onclick="location.href='/bbs/board.php?bo_table=bar'">
                <dd><img src="/theme/<?php echo G5_THEME; ?>/img/icons/bar.png" alt="BAR"></dd>
                <dd>BAR</dd>
            </li>

            <li class="swiper-slide swiper-slide-rb_icon_menu menu-ktv" onclick="location.href='/bbs/board.php?bo_table=ktv'">
                <dd><img src="/theme/<?php echo G5_THEME; ?>/img/icons/ktv.png" alt="KTV"></dd>
                <dd>KTV</dd>
            </li>

        </ul>
    </div>

    <script>
        var swiper = new Swiper('.swiper-container-rb_icon_menu', {
            slidesPerView: 7,
            slidesOffsetBefore: 50,
            slidesOffsetAfter: 50,
            observer: true,
            observeParents: true,
            touchRatio: 1,
            loop: true,
            autoplay: {
                delay: 4000,
                disableOnInteraction: false,
            },
            breakpoints: {
                1024: {
                    slidesPerView: 7,
                    spaceBetween: 0,
                },
                10: {
                    slidesPerView: 3.5,
                    slidesOffsetBefore: 20,
                    slidesOffsetAfter: 20,
                    spaceBetween: 0,
                }
            }
        });
    </script>

</div>