/* ============================================================
   모바일 인터페이스 (2026-09-05 시안 반영)
   시안 구성:  [햄버거 | 로고 | 장바구니]
               [검색창]
               [카테고리 탭 6종]
               ... 본문 ...
               [하단 고정탭 5종: 홈 / 마이페이지(관심상품) / 배송지역조회 / 우리농산물 / 로그인·가입]

   - 768px 이하에서만 동작한다. PC 헤더(.ma-topbar/.ma-header/.ma-nav)는 _header.php 인라인 스타일이 숨긴다.
   - style768.css 의 구 .mobile-header (fixed·56px) 는 이 파일의 .m-head 로 대체됐다.
     구 마크업은 #main-content 로 여백을 보정하도록 돼 있었는데 그런 요소가 뷰에 없어
     본문이 헤더에 가려졌다. 새 헤더는 고정하지 않고 문서 흐름에 두어 겹침 자체를 없앤다.
   - 슬라이드 메뉴(.mobile-menu)와 그 토글 JS 는 그대로 재사용한다(.mobile-menu-trigger).
   ============================================================ */

.m-head, .m-head-cats, .m-bottom { display: none; }

@media screen and (max-width: 768px) {

/* ---------- 상단 헤더 ---------- */
.m-head {
    display: block;
    position: relative;
    z-index: 85;   /* 고정되는 .m-head-cats(88) 보다 낮게 */
    background: #fff;
    /* 아래 경계선은 .m-head-cats 의 border-top 이 대신한다 (둘 다 주면 2px 로 겹쳐 보인다) */
}

/* 1줄: 햄버거 | 로고 | 장바구니 */
.m-head-bar {
    display: flex;
    align-items: center;
    height: 58px;
    padding: 0 6px;
    box-sizing: border-box;
}
.m-head-bar > .m-head-btn { flex: 0 0 52px; }

.m-head-btn {
    width: 52px; height: 52px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 5px;
    border: 0; background: none; padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* 구 style768.css 의 20x2px 규격을 시안(굵은 3줄)에 맞춰 덮어쓴다 */
.m-head-btn span {
    display: block;
    width: 24px; height: 2.5px;
    background: #211C1A;
    border-radius: 2px;
    transition: transform .3s ease, opacity .3s ease;
}

.m-head-logo {
    flex: 1 1 auto;
    min-width: 0;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
}
.m-head-logo img { height: 40px; width: auto; max-width: 100%; display: block; }

.m-head-cart {
    flex: 0 0 52px;
    position: relative;
    height: 52px;
    display: flex; align-items: center; justify-content: center;
    color: #211C1A;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.m-head-cart .cart_count {
    position: absolute; top: 4px; right: 2px;
    min-width: 17px; height: 17px; padding: 0 4px;
    box-sizing: border-box;
    background: var(--ma-accent, #1565AD); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 17px;
    text-align: center; border-radius: 999px;
    margin: 0;
}

/* 2줄: 검색 */
.m-head-search { padding: 4px 14px 12px; }
.m-head-search form {
    display: flex; align-items: center;
    height: 44px;
    padding: 0 5px 0 18px;
    border: 1.5px solid #211C1A;
    border-radius: 999px;
    background: #fff;
    box-sizing: border-box;
}
.m-head-search input[type="text"] {
    flex: 1 1 auto; min-width: 0;
    border: 0; outline: none; background: transparent;
    color: #1C1A18;
    /* iOS 사파리는 16px 미만 입력창에 포커스하면 화면을 확대해 버린다 → 16px 고정 */
    font-size: 16px;
}
.m-head-search input::placeholder { color: #A89C8E; font-size: 13.5px; }
.m-head-search button {
    flex: 0 0 34px;
    width: 34px; height: 34px;
    border: 0; border-radius: 999px;
    background: var(--ma-accent, #1565AD);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}

/* 3줄: 카테고리 탭 */
/* 시안은 6개가 한 줄에 다 보이지만 '육가공·양념육' 같은 긴 분류명이 있어 실제 폭에 안 들어간다.
   분류명을 임의로 줄이면 관리자 분류표와 어긋나므로, 이름은 그대로 두고 가로 스크롤로 처리한다. */
/* 스크롤을 내려도 이 줄만 상단에 붙어 있는다 (PC 의 .ma-nav 와 같은 동작).
   ★ sticky 는 '부모 박스' 안에서만 붙으므로 이 요소는 #wrap 직계여야 한다 — _header.php 주석 참고.
   ★ 높이를 44px 로 못박아 둔다. 아래에서 .ajax-filter-bar 를 이 줄 밑에 붙이는 데 쓰고,
     theme.css 의 모바일 규칙(.ajax-filter-bar{top:44px})과 값이 맞아야 겹치지 않는다. */
.m-head-cats {
    display: flex;
    align-items: stretch;
    height: 44px;
    box-sizing: border-box;
    position: -webkit-sticky; position: sticky; top: 0;
    z-index: 88;
    background: #fff;
    border-top: 1px solid var(--ma-line, #ECE3D9);
    border-bottom: 1px solid var(--ma-line, #ECE3D9);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.m-head-cats::-webkit-scrollbar { display: none; }
/* 상단에 붙었을 때만 그림자 (붙었는지 여부는 _header.php 의 스크롤 리스너가 표시한다) */
.m-head-cats.is-stuck { box-shadow: 0 6px 16px -12px rgba(33, 28, 26, .65); }
.m-head-cats a {
    flex: 1 0 auto;
    display: flex; align-items: center; justify-content: center;
    padding: 0 11px;
    font-size: 13px; font-weight: 700; letter-spacing: -.05em;
    color: #2A2521; text-decoration: none; white-space: nowrap;
    border-left: 1px solid var(--ma-line, #ECE3D9);
    box-sizing: border-box;
}
.m-head-cats a:first-child { border-left: 0; }
.m-head-cats a.on { color: var(--ma-accent, #1565AD); box-shadow: inset 0 -3px 0 var(--ma-accent, #1565AD); }

/* ---------- 하단 고정 탭 ---------- */
.m-bottom {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 95;
    background: #fff;
    border-top: 1px solid var(--ma-line-2, #E4D9CD);
    box-shadow: 0 -4px 14px -10px rgba(33,28,26,.5);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.m-bottom a {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 1px;
    height: 56px;
    padding: 0 2px;
    font-size: 11.5px; font-weight: 700; letter-spacing: -.05em; line-height: 1.25;
    color: #3B342E; text-align: center; text-decoration: none;
    border-left: 1px solid var(--ma-line, #ECE3D9);
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}
.m-bottom a:first-child { border-left: 0; }
.m-bottom a small { display: block; font-size: 10px; font-weight: 600; color: #8A7F73; letter-spacing: -.06em; }
.m-bottom a.on { color: var(--ma-accent, #1565AD); }
.m-bottom a.on small { color: var(--ma-accent-l, #5BA6E8); }

/* 하단 탭이 본문 끝을 가리지 않도록 문서 전체에 여백을 준다 */
body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

/* 카카오 상담 버튼이 하단 탭 위로 올라오게 (겹치면 탭이 눌리지 않는다) */
#kakao-talk-channel-chat-button {
    right: 14px !important;
    bottom: calc(56px + 14px + env(safe-area-inset-bottom, 0px)) !important;
}
#kakao-talk-channel-chat-button img { width: 58px !important; }

/* 레거시 검색 아이콘(.search_icon)은 그것을 여는 스크립트가 없는 오버레이(.search, display:none)를
   가리키는 죽은 버튼이다. position:absolute·top:50% 라 모바일에서는 본문 중간에 떠 오탭을 만든다.
   새 헤더에 검색창이 생겼으므로 모바일에서는 감춘다. (PC 는 손대지 않음) */
.search_icon { display: none !important; }

}