/* ================================================================
   MIDAM 모바일/태블릿 공통 CSS
   ================================================================ */

/* ---------- 1) 전역 ---------- */
@media (max-width: 1100px) {
    main, .wrap {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}
@media (max-width: 650px) {
    main, .wrap {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 45px !important;
    }
    body { font-size: 14px; }
    h1 { font-size: 22px; }
    h2 { font-size: 20px; }
}

/* ---------- 2) 헤더 (56px 한 줄) ---------- */
@media (max-width: 650px) {
    .site-header {
        height: 56px !important;
        min-height: 56px !important;
        padding: 0 16px !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 10px !important;
    }
    .site-header .brand { font-size: 22px; flex: 0 0 auto; }
    .site-header .brand small { display: none; }
    .site-header .nav { display: none !important; }
    .site-header .cart-link {
        margin-left: auto;
        font-size: 13px;
    }
    .site-header #cart-count {
        min-width: 18px;
        padding: 0 5px;
        font-size: 10px;
    }
    .site-header .account {
        font-size: 12px;
        gap: 6px;
    }
    .site-header .search { display: none !important; }
}

/* ---------- 3) 히어로 ---------- */
@media (max-width: 650px) {
    .hero {
        height: auto !important;
        min-height: auto !important;
        background: none !important;
    }
    .hero img { display: block; width: 100%; height: auto; }
    .hero-link { display: none; }
}
/* ---------- 4) 혜택 ---------- */
 @media (max-width: 650px) {
     .benefits-row {
         grid-template-columns: 1fr 1fr !important;
         gap: 8px !important;
         margin: 14px 0 24px !important;
     }
     .benefits-row > div {
         padding: 12px 8px !important;
         font-size: 12px !important;
         line-height: 1.3 !important;
     }
 }

/* ---------- 5) 카테고리 타일 (16:9) ---------- */
@media (max-width: 1100px) {
    .category-row {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
        gap: 16px !important;
    }
}
@media (max-width: 650px) {
    .category-row {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 10px !important;
        padding-bottom: 24px !important;
    }
    .tile-img {
        aspect-ratio: 16 / 9 !important;
        padding: 6px !important;
    }
    .tile-info { padding: 8px 10px; }
    .tile-text b { font-size: 13px; }
    .tile-text span { font-size: 10px; }
    .tile-arrow { font-size: 18px; }
    .section-intro {
        align-items: start;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 8px;
    }
    .section-intro h2, .section-title h2 { font-size: 20px; }
    .section-intro p, .section-title p { font-size: 12px; }
}

/* ---------- 6) 상품 그리드 ---------- */
@media (max-width: 1100px) {
    .products {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
        gap: 14px !important;
    }
    .product-photo { height: 280px; }
}
@media (max-width: 650px) {
    .section-title { margin: 24px 0 12px; flex-wrap: wrap; }
    .section-title button { font-size: 12px; }
    .products {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 8px !important;
    }
    .product { min-width: 0; overflow: hidden; }
    .product-photo { height: 150px; padding: 6px; }
    .product-photo img {
        transform: scale(1);
        width: 100%; height: 100%;
        object-fit: contain;
    }
    .product-info { padding: 8px; min-height: auto; min-width: 0; overflow: hidden; }
    .product-info strong {
        font-size: 12px; line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: keep-all;
        overflow-wrap: break-word;
    }
    .product-meta { display: block; margin-top: 6px; }
    .product-meta .price {
        display: block;
        font-size: 12px; font-weight: 800; color: #9d6a30;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .product-meta .stock { display: none; }
}

/* ---------- 7) 베스트 슬라이더 ---------- */
@media (max-width: 900px) {
    .best-slider__item { flex: 0 0 calc((100% - 18px) / 2); }
}
@media (max-width: 650px) {
    .best-slider__item { flex: 0 0 100%; }
    .best-slider__arrow { width: 34px; height: 34px; font-size: 18px; }
    .best-slider__arrow--prev { left: 4px; }
    .best-slider__arrow--next { right: 4px; }
}

/* ---------- 8) 상품 상세 ---------- */
@media (max-width: 900px) {
    .detail { grid-template-columns: 1fr !important; gap: 30px !important; }
    .photo { max-width: 650px; }
}
@media (max-width: 650px) {
    .breadcrumb { font-size: 12px; padding: 16px 0; }
    .detail { padding-top: 0; padding-bottom: 40px; }
    .photo { padding: 16px; border-radius: 6px; }
    .info h1 { font-size: 22px; }
    .facts { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    .fact:last-child { grid-column: 1 / -1; }
    .fact { min-height: 65px; padding: 10px 6px; }
    .actions button { font-size: 14px; height: 50px; }
    .detail-nav { gap: 8px; margin-top: 12px; }
    .detail-nav__btn { padding: 8px 14px; font-size: 13px; }
    .description { padding: 24px 0 40px; }
    .description h2 { font-size: 18px; margin-bottom: 16px; }
    .description-body { font-size: 14px; line-height: 1.7; }
}

/* ---------- 9) 장바구니 ---------- */
@media (max-width: 700px) {
    .cart-row {
        display: grid !important;
        grid-template-columns: 24px 70px 1fr auto !important;
        grid-template-areas:
            "check thumb info    remove"
            "check thumb price   remove"
            "check thumb stepper remove" !important;
        gap: 6px 10px !important;
        padding: 14px 12px !important;
        align-items: start;
        position: relative;
    }
    .cart-row > .row-check   { grid-area: check;   align-self: start; margin-top: 4px; }
    .cart-row > .thumb       { grid-area: thumb;   width: 70px !important; height: 70px !important; }
    .cart-row > .info        { grid-area: info;    min-width: 0; }
    .cart-row > .price-cell  { grid-area: price;   text-align: left !important; padding-top: 6px; }
    .cart-row > .stepper     { grid-area: stepper; justify-self: start; margin-top: 6px; }
    .cart-row > .remove-btn  { grid-area: remove;  align-self: start; }

    .cart-row img { width: 70px !important; height: 70px !important; object-fit: cover; }
    .cart-row .info .name { font-size: 13px !important; line-height: 1.35; }
    .cart-row .info .opts { font-size: 11px !important; }
    .cart-row .price-cell .total { font-size: 14px !important; }
    .cart-row .price-cell .unit,
    .cart-row .price-cell .orig  { font-size: 10px !important; }

    .stepper { height: 34px !important; }
    .stepper button { width: 32px !important; height: 32px !important; font-size: 16px !important; }
    .stepper input  { width: 40px !important; height: 32px !important; font-size: 14px !important; }

    .toolbar { font-size: 12px; flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
    .toolbar button { padding: 5px 10px; font-size: 11px; }
    .summary { padding: 18px; }
    .summary-row { font-size: 13px; padding: 8px 0; }
    .summary-row.total { font-size: 17px; }
    .checkout { height: 52px; font-size: 15px; }
}

/* ---------- 10) 주문서 / 완료 ---------- */
@media (max-width: 650px) {
    .item-row { grid-template-columns: 60px 1fr auto !important; gap: 10px !important; }
    .item-row img { width: 60px; height: 60px; }
    .item-name { font-size: 13px; }
    .item-opts { font-size: 11px; }
    .item-price { font-size: 13px; }
    .field-row { grid-template-columns: 1fr !important; }
    .field input, .field textarea { font-size: 14px; }
    .pay-btn { height: 52px; font-size: 15px; }
    .card { padding: 24px 18px; }
    .info-row { font-size: 13px; }
    .info-row strong {
        max-width: 60%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ---------- 11) 공통 유틸 ---------- */
@media (max-width: 650px) {
    img { max-width: 100%; height: auto; }
    .product, .tile, .cart-row, .item-row, .info, .photo { min-width: 0; }
}


/* ==========================================================
   모바일 상품 카드 정렬 (2열 / 1열)
   ========================================================== */
@media (max-width: 900px) {

    /* 그리드: 2열, 카드 높이 균일하게 */
    .products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
        align-items: stretch;    /* ← 행끼리 높이 맞춤 */
    }

    .product {
        height: 100%;            /* ← grid 셀 높이 채움 */
        display: flex;
        flex-direction: column;
    }

    /* 사진 영역: 고정 비율 (1:1) */
    .product-photo {
        height: auto;
        aspect-ratio: 1 / 1;     /* ← 정사각형 고정 */
        padding: 8px;
        border-bottom: 1px solid #f0efed;
    }
    .product-photo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transform: scale(1.05);
    }

    /* 정보 영역: 남은 높이 채움 */
    .product-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 10px 12px 14px;
        min-height: 0;
    }

    /* 제목: 2줄 고정 (1줄이어도 2줄 자리) */
    .product-info strong {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 13px;
        line-height: 1.35;
        min-height: 2.7em;
    }

    /* 메타: 카드 바닥 고정 */
    .product-info .product-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 6px 8px;
        margin-top: auto;
        padding-top: 8px;
    }
    .product-info .product-meta .price {
        font-size: 14px;
    }
    .product-info .product-meta .stock {
        font-size: 11px;
    }

    /* 잠금 배지: 모바일에서 작게 */
    .price--locked {
        font-size: 11px;
        padding: 3px 7px;
        gap: 3px;
    }

    /* 베스트 슬라이더: 모바일 1개 */
    .best-slider__item {
        flex: 0 0 100% !important;
    }
    .best-slider__arrow {
        width: 32px; height: 32px; font-size: 18px;
    }
    .best-slider__arrow--prev { left: 4px; }
    .best-slider__arrow--next { right: 4px; }
}

/* ---------- 대리점 승급 모바일 대응 ---------- */
@media (max-width: 650px) {
    .site-header .dealer-link {
        padding: 5px 8px !important;
        font-size: 11px !important;
        border-radius: 5px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 480px) {
    .site-header .dealer-link .dealer-text {
        display: none !important;
    }
    .site-header .dealer-link {
        padding: 5px 8px !important;
    }
}

/* 모바일 계정 영역 (로그인/로그아웃/아이디) 보이게 */
@media (max-width: 650px) {
    .site-header .account,
    .site-header .auth,
    .site-header .user-info {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        font-size: 11px !important;
        white-space: nowrap;
    }

    /* 로그아웃 버튼 폼도 보이게 */
    .site-header form[action*="logout"] {
        display: inline !important;
        margin: 0 !important;
    }
}
@media (max-width: 700px) {
    /* 수량 stepper 정렬 강제 */
    .cart-row .stepper,
    .cart-row .qty-stepper {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0 !important;
        grid-column: auto !important;
    }

    /* stepper 버튼 */
    .stepper button,
    .qty-stepper button {
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        font-size: 16px !important;
    }

    .stepper input,
    .qty-stepper input {
        width: 40px !important;
        height: 32px !important;
    }

    /* - 기호가 깨졌으면 폰트 문제 */
    .stepper button {
        font-family: Arial, sans-serif !important;
    }
}
/* 모바일 로그아웃 버튼 강제 표시 */
@media (max-width: 650px) {
    .site-header {
        overflow-x: auto !important;  /* 넘치면 스크롤 가능 */
    }

    .site-header .account {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .site-header .account .username {
        font-size: 11px !important;
    }

    .site-header .account form {
        display: inline !important;
    }

    .site-header .account form button {
        padding: 4px 8px !important;
        font-size: 11px !important;
        background: rgba(255,255,255,0.1) !important;
        border-radius: 4px !important;
    }
}