/* ═══ 클래스업 뷰 · 매장 관리(/staff) — 폰 모양 (2026-09-26) ═══════════════════════════════
   눈으로 보는 정본 = 대표가 본 모바일 프로토타입 view-mobile.html. 주소는 같은 /staff.
   규칙: 색은 ds.css 토큰만(새 색 짓지 않음) · ds.css 는 고치지 않고 여기서 덮어씀(ds.css 뒤에 실림).
         폰 폭 = 640px 이하 · 누르는 자리 44px 이상 · 아래 띠는 안전 영역(env(safe-area-inset-bottom))만큼 띄움.
   넓은 화면(641px 이상) = 틀 모양 그대로 — 아래 탭·서랍은 숨김. 641~900px 은 ds.css 의 옛 아래 띠(.mob-nav) 그대로.
   짝 = assets/mobile-shell.js(아래 탭 · 더보기 서랍 · 알림 받기) · 할 일 답하기 창(.ow-sheet · UI.drawer)도 폰에서 전체 화면.
   ═════════════════════════════════════════════════════════════════════════════════ */

/* ── 넓은 화면에서도 쓰는 조각(알림 받기 줄 · 사람 표시 누름) ── */
.mtabs{display:none}
.top .who[data-mwho]{cursor:pointer;border-radius:var(--pill);padding:2px 8px 2px 2px}
.top .who[data-mwho]:hover{background:var(--ac-t3)}
.top .who[data-mwho]:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.mpush{display:grid;gap:10px}
.mpush-t{display:flex;align-items:center;gap:8px;font-size:var(--f-m)}
.mpush-t .sp{flex:1}
.mpush-n{margin:0;font-size:var(--f-s);color:var(--mute)}
.mpush-b{display:flex;gap:8px;flex-wrap:wrap}
.mpush-b .btn{flex:1 1 0}
.mpush-m{margin:0;font-size:var(--f-xs);font-weight:700;color:var(--red-ink)}
.mpush-m.ok{color:var(--mint-ink)}

/* ── 더보기 서랍(아래 탭의 [더보기]) — 왼쪽 메뉴 모양(ds.css .side 와 같은 토큰) ── */
.mmore-dim{position:fixed;inset:0;background:rgba(17,15,40,.45);z-index:94;animation:fade .15s}
.mmore{position:fixed;top:0;bottom:0;left:0;width:min(320px,86vw);z-index:95;background:var(--side);color:var(--side-ink);
  overflow:auto;display:flex;flex-direction:column;gap:8px;padding:12px 10px calc(16px + env(safe-area-inset-bottom));animation:mmoreIn .2s ease-out}
@keyframes mmoreIn{from{transform:translateX(-24px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){ .mmore,.mmore-dim{animation:none} }
.mmore-hd{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 10px;color:#fff;font-size:var(--f-s)}
.mmore-hd .sp{flex:1}
.mmore-hd .btn.icon{width:44px;height:44px;color:var(--side-ink)}
.mmore-nav{display:flex;flex-direction:column;gap:2px}
.mmore-nav .logo{display:none}
.mmore-nav .grp{font-size:11px;font-weight:700;color:#7d79b6;letter-spacing:.06em;padding:12px 12px 6px;display:flex;align-items:center;gap:6px}
.mmore-nav a{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border-radius:10px;color:var(--side-ink);font-weight:600;font-size:var(--f-m)}
.mmore-nav a.on{background:var(--ac);color:#fff}
.mmore-nav a>span:first-of-type{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mmore-nav a .cnt{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:var(--pill);background:var(--mint);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center}
.mmore-nav a .cnt.hot{background:var(--red)}
.mmore-nav a .cnt:empty{display:none}
.mmore-nav a .subcaret{margin-left:auto;display:inline-flex;opacity:.6}
.mmore-nav a .cnt+.subcaret{margin-left:6px}
.mmore-nav a.sub{padding:6px 12px 6px 40px;font-size:var(--f-s)}
.mmore-nav a.sub.on{background:var(--side-2);color:#fff;box-shadow:inset 3px 0 0 var(--mint)}
.mmore-nav .admin-zone{margin:10px 0 6px;padding:4px 0 6px;border-radius:12px;background:rgba(245,158,11,.10);box-shadow:inset 0 0 0 1px rgba(245,158,11,.28)}
.mmore-nav .admin-zone .grp{color:#f5b454}
.mmore-nav .foot{padding:12px;font-size:12px;color:#7d79b6}
.mmore-nav .foot .ver{display:block;margin-top:2px;font-variant-numeric:tabular-nums}
.mmore-push{background:var(--card);color:var(--ink);border-radius:var(--r);padding:12px}
.mmore-out{width:100%;height:44px;background:transparent;color:var(--side-ink);border-color:var(--side-2)}

/* ═════ 폰 폭 ═════ */
@media (max-width:640px){
  /* 아래 탭 — 옛 아래 띠(.mob-nav · 메뉴 전부 가로 스크롤) 대신 넷 */
  .mob-nav{display:none !important}
  .mtabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--card);border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
  .mtabs a,.mtabs button{position:relative;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    border:0;background:none;font:inherit;font-size:11px;font-weight:700;color:var(--mute-2);cursor:pointer;padding:4px 0;text-decoration:none}
  .mtabs .tl{white-space:nowrap}
  .mtabs .on{color:var(--ac)}
  .mtabs .cnt{position:absolute;top:2px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:var(--pill);
    background:var(--red);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center}
  .mtabs .cnt:empty{display:none}
  body,body.has-mtabs{padding-bottom:calc(64px + env(safe-area-inset-bottom))}

  /* 상단바 — 제목과 사람 동그라미만(지점 이름·로그아웃은 더보기 서랍으로) */
  .top{padding:0 12px;gap:8px}
  .top h1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .top .crumb,.top .who .nm,.top #btnLogout{display:none}
  .shell .page,.page{padding:12px}
  .page-head h2{font-size:var(--f-xl)}

  /* 누르는 자리 44px 이상 */
  .btn{height:44px}
  .btn.sm{height:36px}
  .btn.icon{width:44px}
  .pager button{min-width:40px;height:40px}
  .chip{height:36px}
  .in,select.in{height:44px;font-size:16px}   /* 16px 아래면 iOS 가 칸을 누를 때 화면을 키움 */
  textarea.in{font-size:16px}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom));max-width:calc(100% - 32px);text-align:center}

  /* 창(UI.modal) — 아래에서 올라오는 판 */
  .dim{padding:0;place-items:end stretch}
  .modal{width:100% !important;border-radius:20px 20px 0 0;max-height:92vh;padding-bottom:env(safe-area-inset-bottom)}

  /* 서랍(UI.drawer · 할 일 답하기 · 알림 확인 · 사진 보고) — 전체 화면 · 아래 단추 고정 */
  .drawer{left:0;width:100%;border-radius:0}
  .drawer .hd{padding:10px 12px 10px 16px}
  .drawer .ft{position:sticky;bottom:0;background:var(--card);padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
  .drawer .ft .btn{height:48px}
  .drawer .ft .btn.pri{flex:2 1 0}

  /* 옛 할 일 답하기 창(.ow-sheet · order-worker.js) — 전체 화면 + 아래 고정 단추(옛 파일은 안 고침) */
  .ow-dlg.on{padding:0;align-items:stretch}
  .ow-sheet{max-width:none;min-height:100%;margin:0;border-radius:0;padding:16px 16px calc(92px + env(safe-area-inset-bottom))}
  .ow-ft{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:71;background:var(--card);border-top:1px solid var(--line);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));flex-wrap:nowrap}
  .ow-ft .btn{flex:1 1 0;height:48px}
  .ow-b{min-height:48px}
  .ow-big{min-height:64px}
  .ow-x{width:28px;height:28px}
  .ow-sheet textarea{font-size:16px}

  /* 알림 확인 · 보낸 보고 · 대화 — 뷰가 제 옷(<style>)을 이 파일 뒤에 넣으므로 body 를 앞에 붙여 무게를 올림 */
  body .v-review .rv-sum b{font-size:22px}
  body .v-review .rv-sum button{padding:10px;min-height:64px}
  body .rv-kv{grid-template-columns:64px minmax(0,1fr)}
  body .v-mine .mn-shoot{min-height:72px}
  body .mn-slot .x{width:32px;height:32px}
  body .v-talk .tk-room{height:calc(100dvh - var(--top-h) - 64px - env(safe-area-inset-bottom) - 28px);min-height:360px;border-radius:var(--r)}
  body .tk-ib{width:44px;height:44px}
  body .tk-quick button{height:36px}
  body .tk-compose .in{height:44px}
  body .tk-msg{max-width:86%}
}