        html, body {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            width: 100%;
            overflow-x: hidden;
            -webkit-text-size-adjust: 100%;
        }
        *, *:before, *:after { box-sizing: inherit; }

        .bottom-nav {
            position: fixed;
            left: 0;
            right: 0;
            bottom: -2px;
            display: flex;
            align-items: stretch;
            background: #FFF9F2;
            padding: 10px 0;
            box-shadow: 0 -3px 5px rgba(0,0,0,0.06);
            z-index: 1000;
        }

        .bottom-nav .nav-item {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            padding: 10px 0;
            text-decoration: none;
            border-right: 1px solid rgba(0, 0, 0, 0.15);
        }
        .bottom-nav .nav-item:last-child {
            border-right: none;
        }

        .bottom-nav .icon {
        width: 30px;
        height: 30px;
        display: block;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        }

        .bottom-nav .icon.main {
        background-image: url("../images/home-img.png");
        }

        .bottom-nav .icon.menu {
        background-image: url("../images/menu-img.png");
        }

        .bottom-nav .icon.reserve{
        background-image: url("../images/cart-img.png");
        }

        .bottom-nav .icon.aggregation{
            background-image: url("../images/aggregate.png");
        }

        .bottom-nav .icon.inquiry {
        background-image: url("../images/history-img.png");
        }

        .bottom-nav .icon.profile {
        background-image: url("../images/person-img.png");
        }

        .bottom-nav .icon.resist {
        background-image: url("../images/resist.png");
        }

        .bottom-nav .icon.store-menu {
        background-image: url("../images/resist.png");
        }

        .bottom-nav .icon.aggregate {
        background-image: url("../images/aggregate.png");
        }



        .bottom-nav.page-main .icon.main {
        background-image: url("../images/home-active-img.png");
        }

        .bottom-nav.page-menu .icon.menu {
        background-image: url("../images/menu-active-img.png");
        }

        .bottom-nav.page-reserve .icon.reserve {
        background-image: url("../images/cart-active-img.png");
        }

        .bottom-nav.page-inquiry .icon.inquiry {
        background-image: url("../images/history-active-img.png");
        }

        .bottom-nav.page-aggregation .icon.aggregation {
            background-image: url("../images/aggregate_active.png");
        }

        .bottom-nav.page-profile .icon.profile {
        background-image: url("../images/person-active-img.png");
        }

        .bottom-nav.page-store-menu .icon.store-menu {
        background-image: url("../images/resist_active.png");
        }



        
        .bottom-nav .nav-item.active .icon.main { background-image: url("../images/home-active-img.png"); }
        .bottom-nav .nav-item.active .icon.menu { background-image: url("../images/menu-active-img.png"); }
        .bottom-nav .nav-item.active .icon.reserve { background-image: url("../images/cart-active-img.png"); }
        .bottom-nav .nav-item.active .icon.inquiry { background-image: url("../images/history-active-img.png"); }
        .bottom-nav .nav-item.active .icon.aggregation { background-image: url("../images/aggregate_active.png"); }
        .bottom-nav .nav-item.active .icon.profile { background-image: url("../images/person-active-img.png"); }
        .bottom-nav .nav-item.active .icon.resist { background-image: url("../images/resist_active.png"); }
        .bottom-nav .nav-item.active .icon.aggregate { background-image: url("../images/aggregate_active.png"); }
        .bottom-nav .nav-item.active .icon.store-menu { background-image: url("../images/resist_active.png"); }

        .nav-item:hover img {
            opacity: 0.8;
        }

        /* Ensure main content is not hidden behind fixed bottom nav
           Reserve space equal to nav height + safe-area inset on mobile */
        body > main,
        .content,
        .container,
        .main-contents,
        .main-contetns {
            padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        }
