/* ═══════════════════════════════════════════════════════════════════════════
   5230 — 모바일 햄버거 메뉴 (2026-09-27) · 짝: js/mnav5230.js
   메인 스토어 테마(main5230.css)와 LOOK 테마(look5230.css) 양쪽에서 쓴다 —
   색은 두 테마가 함께 정의하는 토큰(--ink · --bg · --line · --grey)만 읽는다.
   데스크톱(>820px)에는 아무것도 바뀌지 않는다.
   ═══════════════════════════════════════════════════════════════════════════ */

.mnav-btn { display: none; }
.mnav { display: none; }

@media (max-width: 820px) {
  /* ── 헤더: [☰] [로고 가운데] [장바구니] ──
     스크립트가 돌기 전 첫 화면부터 이 모양이어야 아이콘이 잠깐 보였다 사라지는 깜빡임이 없다.
     그래서 서랍으로 갈 아이콘은 CSS 가 먼저 감춘다(서랍으로 옮겨지면 이 선택자에서 빠진다).
     !important 는 auth-header.js 가 로그아웃 버튼에 거는 인라인 display 를 이기기 위한 것. */
  .header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0;
  }
  .header-inner > .logo { grid-column: 2; grid-row: 1; justify-self: center; }
  .header-inner > .header-icons,
  .header-inner > .header-actions { grid-column: 3; grid-row: 1; justify-self: end; }
  .header-inner > .header-icons > :not(.cart-btn),
  .header-inner > .header-actions > :not(.cart-btn),
  .header-inner > .header-tag { display: none !important; }

  .mnav-btn {
    grid-column: 1; grid-row: 1; justify-self: start;
    display: grid; place-items: center;
    width: 40px; height: 40px;
    margin-left: -3px;               /* 아이콘 선을 오른쪽 장바구니와 같은 안쪽 여백에 맞춘다 */
    color: var(--ink);
  }
  .mnav-btn svg { width: 22px; height: 22px; }

  /* 메인 — 카테고리 · 필터 · 정렬이 서랍으로 간 뒤의 빈 머리 칸 */
  [data-mnav="shop"][data-mnav-away] { padding-top: 0; padding-bottom: 0; }
  [data-mnav="shop"] { scroll-margin-top: 66px; }

  /* ── 서랍 ──
     열기 · 닫기는 같은 길(왼쪽)로 오간다. 곡선은 iOS 서랍 곡선, 300ms.
     닫힌 동안은 visibility 로 초점 · 보조기기에서도 빠진다(닫힘 트랜지션이 끝난 뒤). */
  .mnav {
    --mnav-ease: cubic-bezier(0.32, 0.72, 0, 1);
    display: block;
    position: fixed;
    inset: 0;
    z-index: 250;
    visibility: hidden;
    transition: visibility 0s linear 300ms;
  }
  .mnav--open { visibility: visible; transition-delay: 0s; }

  .mnav-dim {
    position: absolute;
    inset: 0;
    background: rgba(43, 38, 32, 0.4);
    opacity: 0;
    transition: opacity 300ms var(--mnav-ease);
  }
  .mnav--open .mnav-dim { opacity: 1; }

  .mnav-panel {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: min(340px, 86vw);
    display: flex;
    flex-direction: column;
    background: var(--bg);
    box-shadow: 12px 0 40px rgba(43, 38, 32, 0.18);
    transform: translateX(-100%);
    transition: transform 300ms var(--mnav-ease);
  }
  .mnav--open .mnav-panel { transform: none; }

  html.mnav-lock, html.mnav-lock body { overflow: hidden; }

  .mnav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 0 12px 0 22px;
    border-bottom: 1px solid var(--line);
  }
  .mnav-title { font-size: 14px; font-weight: 800; letter-spacing: 0.2em; color: var(--ink); }
  .mnav-close { display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink); }
  .mnav-close svg { width: 20px; height: 20px; }

  .mnav-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }

  /* 검색 · 관심상품 · 마이페이지 · 로그인 — 원래 헤더 아이콘 그대로, 이름을 달아 한 줄 타일로 */
  .mnav-tools {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    border-bottom: 1px solid var(--line);
  }
  .mnav-tools:empty { display: none; }
  .mnav-tools > .icon-btn {
    width: auto;
    height: auto;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 8px;
    padding: 18px 4px 16px;
    color: var(--ink);
    font-size: 11.5px;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .mnav-tools > .icon-btn::after { content: attr(aria-label); }
  .mnav-tools > .icon-btn [data-auth-name] { display: none; }
  .mnav-tools > .icon-btn .wish-count { top: 11px; right: auto; left: calc(50% + 5px); }

  /* 메인 SHOP 칸 — 원래 카테고리 · 가격 · 정렬 요소를 서랍 폭에 맞게 줄인다. 누르면 바로 적용된다. */
  .mnav-shop { display: none; padding: 22px 22px 24px; border-bottom: 1px solid var(--line); }
  .mnav--shop .mnav-shop { display: block; }
  .mnav-h { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; color: var(--grey); margin-bottom: 14px; }
  .mnav-shop .cat-tabs { gap: 6px; margin-bottom: 20px; }
  .mnav-shop .cat-tab { padding: 10px 15px; font-size: 12.5px; letter-spacing: 0.1em; }
  .mnav-shop .filter-bar { margin-bottom: 18px; }
  .mnav-shop .filter-group { gap: 6px; }
  .mnav-shop .filter-key { flex-basis: 100%; margin-bottom: 4px; }
  /* 개수 · 적용 중인 필터 태그 한 줄, 그 아래 정렬 — 태그가 붙어도 줄이 들쭉날쭉하지 않게 세로로 쌓는다 */
  .mnav-shop .toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .mnav-shop .sort-select { width: 100%; padding: 11px 12px; }
  .mnav-apply {
    width: 100%;
    margin-top: 20px;
    padding: 15px 0;
    background: var(--ink);
    color: var(--bg);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
  }

  /* 사이트 메뉴 — GNB 링크(와 LOOK 페이지의 글자 버튼)를 세로 목록으로 */
  .mnav-links { padding: 6px 22px 32px; }
  .mnav-links .gnb { display: flex; flex-direction: column; gap: 0; }
  .mnav-links .gnb-link,
  .mnav-links > .myshop-btn {
    display: block;
    width: 100%;
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: none;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-align: left;
  }
  .mnav-links .gnb-link--look { color: var(--accent); }
  .mnav-links > .myshop-btn[hidden] { display: none; }
  /* 메인에서는 카테고리 링크가 SHOP 칸과 겹친다 — 목록에서는 뺀다 */
  .mnav--shop .mnav-links [data-cat-link] { display: none; }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  /* 움직임은 빼고 나타나기만 한다 */
  .mnav-panel { transform: none; opacity: 0; transition: opacity 200ms ease; }
  .mnav--open .mnav-panel { opacity: 1; }
}