/* [DEV_MAP] admin/assets/mobile.css - 좁은 화면 보정과 드로어 - v2.0 (2026-09-03)
   [목적] ≤720px 에서 사이드바를 드로어로 바꾸고 상단바를 한 줄로 만든다
   [핵심] 열림 상태는 body.is-drawer 하나로만 관리한다. 스크롤 락은 common.js
   [연관] tokens.css · app.css(먼저 로드) · common.js(드로어 제어) · _header.php(마크업)
   [주의] 🔴 여기에 hex 를 쓰지 않는다. 색은 tokens.css 의 var() 만 쓴다.
          🔴 열림 상태를 두 곳에서 켜고 끄지 않는다. 한쪽만 닫히면 스크롤 락이 안 풀린다 */

@media (max-width: 720px) {

  /* 상단바 한 줄: 햄버거 · 화면명 · 사용자명 · 로그아웃
     🔴 기존 가로 스크롤 탭은 없앤다. 뒤쪽 항목이 스크롤 밖에 있으면
        있는 줄 모르고 못 찾는다. */
  .shell { flex-direction: column; }

  .hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--touch); height: var(--touch); flex: 0 0 var(--touch);
    margin-left: calc(-1 * var(--s2));
    border: 0; border-radius: var(--r-sm);
    background: transparent; color: var(--text); cursor: pointer;
  }
  .hamburger svg { width: 22px; height: 22px; }

  /* z 층: 본문 0 · 상단바 30 · 스크림 40 · 드로어 45 · 햄버거 50 · 모달 60
     🔴 숫자를 여기저기 흩지 않는다. 층은 design.md 에 적어 두었다. */
  .top {
    gap: var(--s2); padding: 0 var(--s4);
    position: sticky; top: 0; z-index: 30;
  }
  /* 🔴 상단바 햄버거를 스크림 위로 올리려 했으나 되돌렸다. 두 가지 이유다.
     ① `.top` 이 sticky + z-index 라 **자체 스태킹 컨텍스트**를 만든다.
        그 안에서 z 를 아무리 올려도 바깥의 스크림·드로어와 비교되지 않는다.
     ② 드로어(268px)가 햄버거 자리를 물리적으로 덮는다. z 와 무관하게 못 누른다.
     닫기는 드로어 안의 X · 스크림 · ESC · 메뉴 선택 네 경로로 한다. 전부 실측했다. */
  .top__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top__who { gap: var(--s2); }
  .top__who .btn { min-height: var(--touch); }

  /* 드로어 본체 */
  .side {
    position: fixed; top: 0; left: 0;
    /* 🔴 iOS Safari 는 주소창이 스크롤에 따라 커졌다 작아진다. 그때 100vh 가
       실제 보이는 화면보다 커져 드로어 하단이 잘린다. dvh 는 그 변화를 따라간다.
       앞 줄(100vh)은 dvh 를 모르는 브라우저용 fallback 이다. 순서를 바꾸지 않는다.
       ⚠️ 실기기로 확인하지 못했다. 방어일 뿐 검증이 아니다 (todo.md) */
    height: 100vh;
    height: 100dvh;
    width: var(--drawer-w); max-width: 86vw;
    flex: none; z-index: 45;
    border-right: 1px solid var(--border-strong);
    box-shadow: var(--shadow-modal);
    transform: translateX(-100%);
    transition: transform .18s ease-out;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  body.is-drawer .side { transform: translateX(0); }

  /* 드로어 안에서는 세로 목록 그대로. 항목 8개가 전부 보인다 */
  .side__nav { flex-direction: column; gap: 2px; padding: var(--s3) var(--s2); overflow: visible; }
  .side__group { display: block; }
  .side__link { min-height: var(--touch); }
  .side__brand { position: sticky; top: 0; background: var(--surface); z-index: 1; }

  /* 뒤 배경. 누르면 닫힌다 */
  .scrim {
    /* 🔴 inset:0 대신 명시 높이를 쓴다. iOS 에서 주소창이 접히면 스크림이
       화면 아래까지 안 닿아, 눌러도 드로어가 안 닫히는 구간이 생긴다 */
    display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    height: 100vh;
    height: 100dvh;
    background: var(--scrim); opacity: 0; pointer-events: none;
    transition: opacity .18s ease-out;
  }
  body.is-drawer .scrim { opacity: 1; pointer-events: auto; }

  /* 🔴 스크롤 락. 잠그지 않으면 드로어를 열어도 뒤 내용이 같이 움직여
     어디를 만지는지 알 수 없다. position:fixed 로 잠그고 common.js 가
     스크롤 위치를 --lock-top 으로 보존한다. */
  body.is-drawer {
    position: fixed; width: 100%; overflow: hidden;
    top: var(--lock-top, 0);
  }

  .content { padding: var(--s4); }
  .card { padding: var(--s4); border-radius: var(--r-sm); }
  .table__wrap { margin: 0 calc(-1 * var(--s4)); padding: 0 var(--s4); }
  .toast-wrap { left: var(--s4); right: var(--s4); bottom: var(--s4); }

  /* 🔴 일일 입력은 세로로 쌓지 않는다. 가로 스크롤을 허용한다.
     엑셀형 그리드가 이 화면의 핵심이고 배치가 달라지면 오히려 못 쓴다 (design.md) */
  .grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* 모션을 줄이도록 설정한 사용자에게는 미끄러지는 동작을 없앤다 */
@media (prefers-reduced-motion: reduce) {
  .side, .scrim { transition: none; }
}

@media (max-width: 480px) {
  .card__head { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .btn { min-height: var(--touch); }
}