/* ========================================
   Global Responsive Overrides
   Task #24: Perfect Mobile Layout
   ======================================== */

/* ========================================
   Brand Color Unification (Green Concept)
   ======================================== */
:root {
    --mro-brand-green: #56ab55;
    --mro-brand-green-rgb: 86, 171, 85;
    --base-color: #56ab55;
    --bs-primary: #56ab55;
    --bs-primary-rgb: 86, 171, 85;
    --bs-link-hover-color: #56ab55;
    --bs-link-hover-color-rgb: 86, 171, 85;
    --bs-focus-ring-color: rgba(86, 171, 85, 0.25);
}

/* Bootstrap/text utility hover follow brand green */
.text-primary-hover:hover,
.btn-link:hover,
.btn-link:focus-visible {
    color: var(--mro-brand-green) !important;
}

/* Gnuboard header/nav hover blue -> green */
#gnb .gnb_1dli:hover > a,
a.gnb_2da:hover,
.gnb_wrap .gnb_empty a,
#gnb_all .gnb_al_li .gnb_al_a {
    color: var(--mro-brand-green) !important;
}

/* Prevent horizontal scroll - CRITICAL */
html,
body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative;
}

/* Keep predictable sizing without clamping every element width */
*,
*::before,
*::after {
    box-sizing: border-box !important;
}

/* Media should shrink within containers */
img,
video,
svg,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}

/* Safe area support for iOS notch */
@supports (padding: env(safe-area-inset-bottom)) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Constrain dropdowns only on mobile/tablet */
@media (max-width: 1199.98px) {
    .dropdown-menu,
    [class*="dropdown"] .dropdown-menu,
    #hd_menu .dropdown-menu {
        position: absolute !important;
        left: 0 !important;
        right: auto !important;
        max-width: 100vw !important;
        transform: none !important;
        overflow-x: hidden !important;
    }

    .dropdown-menu .container,
    .dropdown-menu .container-fluid {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Container-wide should be 1850px on desktop, 100% on mobile */
.container-wide {
    width: 100%;
    max-width: 1850px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

/* Ensure main containers respect width */
#wrapper,
.wrapper,
#container,
#content,
main,
section {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

/* Header and footer responsive */
#hd,
#ft {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Bootstrap row 기본 동작 유지 - 마진 오버라이드 최소화 */
.row {
    max-width: 100% !important;
}

@media (max-width: 767px) {
    /* row-cols 시스템은 Bootstrap 기본값 사용 */
    .row[class*="row-cols-"] {
        margin-left: -12px;
        margin-right: -12px;
    }

    .row[class*="row-cols-"] > [class*="col"] {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* 일반 row만 모바일 최적화 */
    .row:not([class*="row-cols-"]) {
        margin-left: -8px !important;
        margin-right: -8px !important;
    }

    .row:not([class*="row-cols-"]) > [class*="col-"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* Swiper containers responsive */
.swiper-container,
.swiper-wrapper,
.swiper {
    max-width: 100% !important;
    overflow: hidden !important;
}

img {
    max-width: 100%;
    height: auto;
}

/* ========================================
   Main Content Responsive
   ======================================== */
@media (max-width: 992px) {

    /* Shop grid */
    .sct_li,
    .item_list li {
        width: 50% !important;
        flex: 0 0 50% !important;
    }

    /* Sidebar stacking */
    .aside_left,
    .aside_right,
    #sit_layout_left,
    #sit_layout_right {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Product detail */
    .sit_head {
        flex-direction: column !important;
    }

    .sit_head_left,
    .sit_head_right {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Row stacking */
    .row {
        flex-wrap: wrap !important;
    }

    .row>[class*="col-lg"],
    .row>[class*="col-xl"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

@media (max-width: 768px) {

    /* Shop grid 2 columns */
    .sct_li,
    .item_list li {
        width: 50% !important;
        flex: 0 0 50% !important;
    }

    /* Container padding - 16px recommended for mobile */
    .container-wide {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* All sections 100% width */
    section,
    .section {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box !important;
    }

    /* Footer - full width */
    #ft,
    #footer,
    #ft_copy {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 20px 16px !important;
        box-sizing: border-box !important;
    }

    /* Swiper - prevent overflow */
    .swiper-container,
    .swiper {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Touch area minimum 44px */
    button,
    a.btn,
    input[type="submit"],
    input[type="button"],
    .btn,
    [role="button"] {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }

    /* Navigation touch targets */
    nav a,
    .nav-link,
    .menu a {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 12px 16px;
    }
}

@media (max-width: 576px) {

    /* Single column */
    .sct_li,
    .item_list li {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* ========================================
   Product Item Responsive
   ======================================== */
@media (max-width: 992px) {
    .item_flex {
        flex-wrap: wrap !important;
    }

    .item_flex .item_img,
    .item_flex .item_info {
        width: 100% !important;
    }
}

/* ========================================
   Order Form Responsive
   ======================================== */
@media (max-width: 768px) {
    #sod_frm {
        padding: 15px !important;
    }

    #sod_frm table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto;
    }

    #sod_frm th,
    #sod_frm td {
        display: block !important;
        width: 100% !important;
        padding: 10px 0 !important;
    }
}

/* ========================================
   Fix for Images
   ======================================== */
.sct_li img,
.item_list img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* ========================================
   Banner & Slider Responsive
   ======================================== */
@media (max-width: 768px) {

    .banner_zone,
    .section_banner {
        padding: 15px !important;
    }

    .banner_zone img,
    .section_banner img {
        width: 100% !important;
        height: auto !important;
    }

    .main_slider {
        height: auto !important;
        min-height: 200px !important;
    }

    .main_slider img {
        width: 100% !important;
        height: auto !important;
    }
}

/* ========================================
   Hide scrollbar utility
   ======================================== */
.hide-scroll::-webkit-scrollbar {
    display: none;
}

.hide-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ========================================
   Slick Slider Mobile Fixes
   ======================================== */
@media (max-width: 768px) {

    /* Prevent slick slider overflow */
    .slick-slider {
        overflow: hidden !important;
        max-width: 100vw !important;
    }

    .slick-list {
        overflow: hidden !important;
    }

    .slick-track {
        display: flex !important;
    }

    .slick-slide {
        padding: 0 5px !important;
    }

    /* Container fluid fix */
    .container-fluid {
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Product card sizing */
    .card-product,
    .our_best {
        max-width: 100% !important;
    }

    .card-product img,
    .our_best img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Section overflow */
    section {
        max-width: 100vw !important;
    }
}

/* ========================================
   Mobile Header Fixes
   ======================================== */
@media (max-width: 768px) {

    .navbar,
    .main-header,
    #hd {
        overflow: hidden !important;
    }

    .navbar-brand img {
        max-height: 40px !important;
        width: auto !important;
    }
}

/* ========================================
   Task #24: Mobile Layout Perfect Fixes
   Complete Horizontal Scroll Prevention
   ======================================== */
@media (max-width: 767px) {

    /* 1. Complete horizontal scroll removal */
    html {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative;
    }

    /* Wrapper elements */
    #wrapper,
    .wrapper,
    #container,
    #content,
    main {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* 2. All sections 100% width with proper padding */
    section,
    .section,
    .container,
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    /* Row fixes */
    .row {
        margin-left: -8px !important;
        margin-right: -8px !important;
        max-width: 100% !important;
    }

    .row > [class*="col-"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* 3. Touch area minimum 44px */
    button,
    a.btn,
    input[type="submit"],
    input[type="button"],
    .btn,
    [role="button"] {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px 16px !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }

    /* Navigation links */
    nav a,
    .nav-link,
    .menu a,
    .category-link {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        padding: 12px 16px !important;
    }

    /* Header buttons */
    #btn_hdcate,
    #btn_hdsch,
    #btn_hdcart,
    #btn_hduser {
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 4. Footer full width */
    #ft,
    #footer,
    #ft_copy {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 20px 16px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Footer with bottom nav spacing */
    body.has-bottom-nav #ft,
    body.has-bottom-nav #ft_copy {
        padding-bottom: calc(20px + 56px + env(safe-area-inset-bottom)) !important;
    }

    /* 5. Safe area support - iOS notch */
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Bottom nav safe area */
    .coupang-bottom-nav {
        height: 78px !important;
        min-height: 78px !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
    }

    /* Fixed elements safe area */
    .fixed-bottom,
    [style*="position: fixed"][style*="bottom"] {
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* 6. All images responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Product images */
    .item_img img,
    .product-image img,
    .sct_li img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover;
    }

    /* 7. Tables responsive */
    table {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        display: block !important;
    }

    /* 8. Forms full width */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    textarea,
    select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 9. Modals and overlays */
    .modal,
    .overlay,
    .popup {
        width: 100% !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* 10. Slider/Carousel fixes */
    .slick-slider,
    .swiper-container,
    .swiper,
    .carousel {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .slick-list,
    .swiper-wrapper {
        overflow: hidden !important;
    }

    /* 11. Category cards mobile */
    .category-card,
    .popular-category-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 12. Product grid mobile */
    .product-grid,
    .item_list {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 8px !important;
    }

    .product-item,
    .sct_li {
        width: calc(50% - 16px) !important;
        margin: 8px !important;
    }

    /* 13. Header full width */
    #hd,
    .header,
    .navbar {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* 14. Content containers */
    .content,
    .main-content,
    #container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
    }

    /* Footer mobile corner shape */
    #footer.shop-footer {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    /* 15. Fixed elements */
    .fixed,
    .sticky,
    [style*="position: fixed"],
    [style*="position: sticky"] {
        width: 100% !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
    }
}

/* ========================================
   Extra Small Devices (< 480px)
   ======================================== */
@media (max-width: 480px) {

    /* Smaller padding for very small screens */
    section,
    .section,
    .container,
    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #ft,
    #ft_copy {
        padding: 16px 12px !important;
    }

    /* Single column product grid */
    .product-item,
    .sct_li {
        width: calc(50% - 12px) !important;
        margin: 6px !important;
    }
}

/* ========================================
   Landscape Mobile Orientation
   ======================================== */
@media (max-width: 767px) and (orientation: landscape) {

    /* Reduce padding in landscape */
    section,
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Compact header */
    #hd {
        min-height: 48px;
    }
}

/* ========================================
   Safe Area Inset Support (iOS)
   ======================================== */
@supports (padding: env(safe-area-inset-bottom)) {

    @media (max-width: 767px) {

        /* Body padding for notch */
        body {
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
            padding-bottom: env(safe-area-inset-bottom);
        }

        /* Bottom navigation */
        .coupang-bottom-nav {
            height: calc(78px + env(safe-area-inset-bottom)) !important;
            min-height: calc(78px + env(safe-area-inset-bottom)) !important;
            padding-bottom: env(safe-area-inset-bottom) !important;
        }

        /* Fixed bottom elements */
        .fixed-bottom {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}

/* ========================================
   Mobile Hamburger Button - CRITICAL FIX
   Always show on mobile (max-width: 1199px)
   ======================================== */
@media (max-width: 1199px) {
    /* Force display of hamburger button container */
    .main-header .d-xl-none {
        display: flex !important;
    }

    /* Hamburger button itself */
    .main-header .px-3.d-xl-none button {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        border: 0 !important;
        padding: 0 12px !important;
        cursor: pointer;
    }

    /* Hamburger button icon */
    .main-header .px-3.d-xl-none .icon {
        display: block !important;
        width: 1em;
        height: 1em;
    }

    /* Hamburger button text label */
    .main-header .px-3.d-xl-none .fs-12px {
        display: block !important;
    }

    /* 헤더 1행 고정: 로고/모바일 액션 버튼을 한 줄로 유지 */
    #header .main-header .row.w-100 {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    #header .main-header .row.w-100 > .col-8.col-xl-3 {
        width: 66.6667% !important;
        max-width: 66.6667% !important;
        flex: 0 0 66.6667% !important;
    }

    #header .main-header .row.w-100 > .col-4.col-xl-4 {
        width: 33.3333% !important;
        max-width: 33.3333% !important;
        flex: 0 0 33.3333% !important;
    }

    #header .main-header .row.w-100 > .col-4.col-xl-4 > .d-flex {
        justify-content: flex-end !important;
    }
}