@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css');

html,
body,
body *,
button,
input,
select,
textarea {
    font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif !important;
}

.bottom-nav {
    z-index: 10030 !important;
}

.reward-tag,
.featured-reward,
.reward-badge,
.badge.reward-rate,
.badges .badge.green {
    background: transparent !important;
}

.featured-reward::before,
.reward-badge span,
.badges .badge.green::before {
    background: transparent !important;
}

@media (min-width: 600px) {
    html,
    body {
        width: 100%;
        min-width: 100%;
        background: #f5f7f4 !important;
    }

    body {
        overflow-x: hidden;
    }

    .app,
    .wrap,
    .login-app,
    .ref-app {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .app > main,
    .wrap > main,
    .wrap > form,
    .app > form {
        width: 100% !important;
        max-width: 1180px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    .app > .hero,
    .app > .header,
    .wrap > .header,
    .login-app > .header,
    .ref-app > .header {
        padding-left: max(32px, calc((100vw - 1180px) / 2 + 32px)) !important;
        padding-right: max(32px, calc((100vw - 1180px) / 2 + 32px)) !important;
    }

    .categories,
    .category-scroll {
        overflow-x: visible !important;
    }

    .chip {
        flex: 0 0 auto !important;
        min-width: 118px !important;
    }

    .promotion-showcase,
    .notice,
    .featured,
    .section,
    .quick-order,
    .point-card,
    .status-grid,
    .quick-menu,
    .summary,
    .result,
    .reset-area,
    .fs-shop-footer {
        max-width: 1180px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .promotion-card {
        min-height: 270px !important;
        grid-template-columns: minmax(0, 1fr) 240px !important;
        padding: 26px 24px 26px 28px !important;
    }

    .promotion-title {
        font-size: 28px !important;
    }

    .promotion-desc {
        font-size: 14px !important;
        max-width: 620px !important;
    }

    .promotion-visual {
        width: 220px !important;
        height: 220px !important;
    }

    .category-lowest-card {
        min-height: 270px !important;
        padding: 16px 12px 18px !important;
    }

    .category-lowest-img {
        width: min(220px, 100%) !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }

    .category-lowest-img img {
        width: 100% !important;
        height: 100% !important;
    }

    .quick-order {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .product-row {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)) !important;
        overflow: visible !important;
        gap: 18px !important;
    }

    .product {
        min-width: 0 !important;
    }

    .product-list {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
        gap: 18px !important;
    }

    .product-card {
        min-width: 0 !important;
    }

    .event-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .menu-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .bottom-nav {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        transform: none !important;
        padding-left: max(12px, calc((100vw - 1180px) / 2 + 12px)) !important;
        padding-right: max(12px, calc((100vw - 1180px) / 2 + 12px)) !important;
    }

    .bottom-inner {
        max-width: 1180px !important;
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    .fs-more-drawer {
        right: 0 !important;
        width: min(420px, 86vw) !important;
    }

    .fs-shop-footer {
        margin-top: 40px !important;
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
}