/* ============================================================
   GoodPlus - Responsive Styles
   ============================================================ */

@media (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
    .checkout-layout {
        grid-template-columns: 1fr 340px;
        gap: 20px;
    }
    .nav-list li a { padding: 0 18px; font-size: 0.85rem; }
}

@media (max-width: 768px) {
    html { font-size: 13px; }

    /* Header mobile */
    .header-top-inner { height: 32px; }
    .header-link { font-size: 0.72rem; }
    .header-top-right { gap: 10px; }

    .header-mid-inner { height: 56px; }
    .logo-text { font-size: 1.4rem !important; letter-spacing: 2px !important; }
    .logo img { height: 28px; }

    .header-nav { display: none; }
    .mobile-menu-btn { display: block; }

    /* Carousel */
    .carousel-slide img { max-height: 280px; }
    .banner-placeholder { padding: 60px 20px; }
    .banner-ph-title { font-size: 1.8rem; }
    .carousel-btn { width: 36px; height: 36px; font-size: 1rem; }

    /* Product section */
    .product-section { padding: 40px 0; }
    .section-title { font-size: 1.1rem; margin-bottom: 24px; }
    .section-sub { font-size: 0.8rem; margin-top: -14px; margin-bottom: 24px; }

    /* Checkout */
    .checkout-layout { grid-template-columns: 1fr; }
    .order-summary { position: static; }

    /* Product grid */
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    /* Payment methods */
    .payment-methods { grid-template-columns: 1fr; }

    /* Form row */
    .form-row { grid-template-columns: 1fr; }

    /* Tables */
    .table th, .table td { padding: 10px 12px; font-size: 0.8rem; }

    /* Cards */
    .card-body { padding: 16px; }
    .card-header { padding: 14px 16px; }

    /* Point display */
    .point-balance-display { padding: 28px 16px; }
    .point-balance-display .amount { font-size: 2rem; }

    /* Auth */
    .auth-wrap { margin: 20px auto; }

    /* Mypage nav */
    .mypage-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
    .mypage-nav a { white-space: nowrap; padding: 12px 16px; font-size: 0.85rem; }

    /* Main */
    .site-main > .container { padding-top: 24px; padding-bottom: 24px; }
    .banner-carousel-wrap { margin: 0; }

    /* Footer */
    .footer-info p { font-size: 0.75rem; }

    /* Policy bar */
    .policy-bar { font-size: 0.8rem; }
}

@media (max-width: 480px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .product-card .info { padding: 10px 0; }
    .product-card .name { font-size: 0.82rem; }
    .product-card .price { font-size: 0.9rem; }

    .btn { height: 44px; padding: 0 16px; font-size: 0.85rem; }
    .btn-lg { height: 50px; padding: 0 24px; }
    .btn-sm { height: 32px; padding: 0 12px; }

    .form-control { height: 44px; font-size: 0.9rem; }

    .pagination { gap: 1px; }
    .page-link { min-width: 32px; height: 32px; padding: 0 8px; font-size: 0.8rem; }

    .bank-info-row { flex-direction: column; align-items: flex-start; gap: 4px; }
    .bank-info-row .value { text-align: left; }

    .carousel-slide img { max-height: 200px; }
    .carousel-btn { width: 30px; height: 30px; font-size: 0.9rem; }
    .carousel-prev { left: 8px; }
    .carousel-next { right: 8px; }

    .header-top-right { gap: 8px; }
    .header-link { font-size: 0.7rem; }

    .footer-info p { display: block; margin-bottom: 4px; }
}