/* 셸 C — 모바일(≤768px) 헤더·드로어·하단 탭바 (2026-09-12)
 *
 * 설계 = sample/shell/c-unified.html (사용자 확정 9/12 — PC 는 D, 모바일은 C).
 * ⭐적용 방식 = 오버라이드 레이어(`body.shell-m`, _shell_d.css 와 같은 원칙) — 레이아웃·_sidebar_styles 의 레거시 모바일
 *   규칙은 그대로 두고 특이성으로 덮는다. 되돌리기 = <body> 의 `shell-m` 클래스 제거.
 *   레거시 모바일 규칙 중 (0,2,0) 짜리(`.ordars-sidebar.mobile-open` 등)가 인라인 <style> 로 «뒤에» 오므로
 *   여기서는 `html body.shell-m` 접두(0,3,0 이상)로 통일한다.
 *
 * 구성
 *   · 헤더 52px 흰 바: [ODAS][회사명 ▾] … [접속 👤N ▾][요약 ⋯ ▾](hs-more = 접힌 요약 전부) · 햄버거·더보기 드롭다운 없음
 *   · 드로어(280px, 좌측): 머리(브랜드·워크스페이스·✕) → 1차 메뉴 세로 목록 + 활성 패널 아코디언(컨트롤러가 활성 패널 DOM 을
 *     1차 항목 뒤로 «이동», .m-acc-open) → 하단 액션(단축키·테마·로그아웃) → 발(근태·계정)
 *   · 하단 탭바 62px 고정 [메뉴|채팅|홈|소식|내정보] — 본문(.ordars-main)은 탭바 위에서 끝난다(가림 0)
 *   · 앱(html.ordars-app): 탭바는 `html.web-tabbar`(앱 ≥ 1.3.0, 네이티브 바 제거본) 일 때만 — 구버전 앱은 네이티브 바 유지
 */

/* 탭바·드로어 머리/발은 PC 에서 존재하지 않는다 */
.m-tabbar, .m-drawer-head, .m-drawer-att, .m-drawer-foot { display: none; }
.hs-more-m { display: none; }

@media (max-width: 768px) {
  html body.shell-m {
    /* 색은 테마 토큰(components/_theme_tokens.css)에서 (2026-10-01) */
    --shm-line: var(--ord-line);
    --shm-band: var(--ord-band);
    --shm-ch: var(--ord-accent);
    --shm-ch-d: var(--ord-accent-strong);
    --shm-ch-l: var(--ord-accent-soft);
    --shm-tab-h: 62px;
    /* 하단 안전영역 — 앱(WebView)은 시스템 내비 여백을 네이티브 spacer 가 채우는데 WebView 가 창 인셋을 그대로 받아
       env() 가 내비 바 높이(≈48dp)를 내놓는다 → 탭바 아래 흰 띠(9/12 앱 1.3.0 실기). 앱에서는 0 으로 고정(아래 override). */
    --shm-safe-b: env(safe-area-inset-bottom, 0px);
    --shm-header-h: 52px;
    background: var(--ord-surface-2);
  }

  /* ---------- 헤더 ---------- */
  html body.shell-m .ordars-header {
    height: var(--shm-header-h);
    padding: 0 12px;
    gap: 6px;
    background: var(--ord-panel);
    border-bottom: 1px solid var(--shm-line);
  }
  html body.shell-m .ordars-header-left { gap: 6px; flex: 1; min-width: 0; }
  html body.shell-m .shd-brand { display: inline-flex; align-items: center; gap: 0; }
  html body.shell-m .shd-brand .ordars-toggle-btn { display: none; }          /* [메뉴]는 탭바 */
  html body.shell-m .ordars-logo { display: inline; font-size: 17px; font-weight: 900; letter-spacing: -.03em; color: var(--ord-text); text-decoration: none; }
  html.ordars-app body.shell-m { --shm-safe-b: 0px; }   /* 앱: 시스템 내비 여백은 네이티브 spacer 몫 */

  html body.shell-m .ordars-app-company-selector { margin-left: 6px; min-width: 0; }
  html body.shell-m .ordars-app-company-btn { height: 28px; padding: 0 9px; border-radius: 999px; background: var(--shm-band); border: 1px solid var(--shm-line); max-width: 42vw; }
  html body.shell-m .ordars-app-company-name { font-size: 11px; font-weight: 700; color: var(--ord-text-2); }
  html body.shell-m .ordars-app-company-menu { left: auto; right: -40px; }
  /* 상태 pill → 칩 (기존 _shell_d.css 모바일 블록과 동일 규격) · 헤더 우측으로 */
  html body.shell-m .shd-status { margin-left: auto; order: 9; }
  /* 헤더 요약: 전체를 「요약 ▾」 칩으로 접는다(fit 컨트롤러 모바일 분기가 그룹을 전부 숨기고 chip 을 켠다) */
  html body.shell-m .hs-wrap { display: inline-flex !important; order: 10; flex-shrink: 0; }
  html body.shell-m .hs-wrap > .hs-group { display: none !important; }   /* 직계만 — 패널(.hs-panel) 안의 복제본은 보여야 한다 */
  html body.shell-m .hs-wrap > .hs-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 8px 0 10px;
    border: 1px solid var(--shm-line);
    border-radius: 999px;
    background: var(--ord-panel);
    font-size: 11px;
    color: var(--ord-text-3);
  }
  html body.shell-m .hs-more-m { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
  html body.shell-m .hs-more-m b { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--ord-tint-blue-fg); font-size: 12px; }
  html body.shell-m .hs-more-m:not(:empty) + .hs-more-count { display: none; }
  html body.shell-m .hs-more-count { background: var(--ord-head-bg); }
  html body.shell-m .hs-panel { left: auto; right: 0; width: min(320px, calc(100vw - 24px)); }
  /* 헤더 우측 — 더보기 드롭다운·PC 아이콘·이름 숨김(탭바가 맡는다). 폴백(브릿지 없는 앱)은 아래 */
  html body.shell-m .ordars-header-right { gap: 6px; }
  html body.shell-m .header-more-dropdown { display: none !important; }
  html body.shell-m .ordars-app-version { display: none; }
  /* 구버전 앱(네이티브 바 유지)에서도 더보기 드롭다운은 불필요 — 채팅·소식·내정보는 네이티브 바, 근태는 드로어 발 */
  /* 상태 드롭다운·요약 패널: 모바일에선 앵커 무관 «헤더 아래 전폭 카드»(pill 이 어디 있든 잘리지 않는다) */
  html body.shell-m .shd-status-menu,
  html body.shell-m .hs-panel {
    position: fixed;
    top: calc(var(--shm-header-h) + 6px);
    left: 10px;
    right: 10px;
    width: auto;
    min-width: 0;
    max-height: calc(100vh - var(--shm-header-h) - var(--shm-tab-h) - 24px);
    overflow-y: auto;
  }
  html body.shell-m #screen-protection-debug.sp-off { display: flex !important; }       /* 레거시 「OFF 면 숨김」 해제 — 켤 수 있어야 한다 */
  html body.shell-m .shd-status-sec--dev,
  html body.shell-m .shd-status-row--dev { display: none !important; }                  /* 개발자 계기판은 PC 전용 */

  /* ---------- 본문: 탭바 «위»에서 끝난다 ---------- */
  html body.shell-m .ordars-main {
    top: var(--shm-header-h);
    left: 0;
    right: 0;
    bottom: calc(var(--shm-tab-h) + var(--shm-safe-b));
    border-radius: 0;
    box-shadow: none;
  }
  html.ordars-app:not(.web-tabbar) body.shell-m .ordars-main { bottom: 0; }
  html body.shell-m.m-kbd .ordars-main { bottom: 0; }                          /* 가상 키보드 중 */
  html body.shell-m .ordars-overlay { top: 0; z-index: 60; }

  /* ---------- 하단 탭바 ---------- */
  html body.shell-m .m-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--shm-tab-h) + var(--shm-safe-b));
    padding-bottom: var(--shm-safe-b);
    background: var(--ord-panel);
    border-top: 1px solid var(--shm-line);
    display: flex;
    z-index: 55;                                   /* 헤더(50) 위·오버레이(60)·모달(1400+) 아래 */
  }
  html.ordars-app:not(.web-tabbar) body.shell-m .m-tabbar { display: none; }
  html body.shell-m.m-kbd .m-tabbar { display: none; }
  html body.shell-m .m-tab {
    flex: 1;
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    color: var(--ord-text-4);
    position: relative;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  html body.shell-m .m-tab svg { width: 22px; height: 22px; }
  html body.shell-m .m-tab.is-on { color: var(--shm-ch); }
  html body.shell-m .m-tab.is-on::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--shm-ch); }
  html body.shell-m .m-tab:disabled { opacity: .35; }
  html body.shell-m .m-tab-badge {
    position: absolute;
    top: 6px;
    right: 22%;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--ord-badge);
    color: var(--ord-on-solid);
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    border: 2px solid var(--ord-panel);
    box-sizing: content-box;
  }
  /* 최소화 태스크바·코너 토스트·스낵바가 탭바에 가리지 않도록 */
  /* ⚠gem 태스크바는 숨김을 translateY(100%) 로 한다 — bottom 을 올리면 «숨긴» 바가 탭바 위에 겹쳐 클릭을 가로챈다(실측).
     → 보일 때(.rmm-taskbar-visible)만 올리고, 숨김 상태는 pointer-events 를 끈다 */
  html body.shell-m .rmm-taskbar { pointer-events: none; }
  html body.shell-m .rmm-taskbar.rmm-taskbar-visible { pointer-events: auto; bottom: calc(var(--shm-tab-h) + var(--shm-safe-b)); }
  html.ordars-app:not(.web-tabbar) body.shell-m .rmm-taskbar.rmm-taskbar-visible { bottom: 0; }

  /* ---------- 드로어 ---------- */
  html body.shell-m .ordars-sidebar {
    top: 0;
    bottom: 0;
    left: 0;
    width: 280px;
    max-width: 86vw;
    z-index: 61;                                   /* 오버레이(60) 위 */
    display: flex;
    flex-direction: column;
    background: var(--ord-panel);
    border-right: none;
    box-shadow: none;
    transform: translateX(-100%);
    transition: transform .22s ease;
    overflow: hidden;
  }
  html body.shell-m .ordars-sidebar.mobile-open { transform: translateX(0); box-shadow: 12px 0 40px rgba(15, 23, 42, .25); }
  html body.shell-m .ordars-sidebar.secondary-closed { width: 280px; }

  html body.shell-m .m-drawer-head {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 8px 0 16px;
    border-bottom: 1px solid var(--shm-line);
    flex-shrink: 0;
  }
  html body.shell-m .m-drawer-brand { font-size: 17px; font-weight: 900; letter-spacing: -.03em; color: var(--ord-text); }
  html body.shell-m .m-drawer-ws { font-size: 11px; font-weight: 700; color: var(--ord-text-2); background: var(--shm-band); border: 1px solid var(--shm-line); border-radius: 999px; padding: 3px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  html body.shell-m .m-drawer-close { margin-left: auto; width: 34px; height: 34px; border: none; background: transparent; border-radius: 9px; color: var(--ord-text-3); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
  html body.shell-m .m-drawer-close svg { width: 18px; height: 18px; }

  /* 1차 = 세로 목록(아이콘+라벨 한 줄) */
  html body.shell-m .sidebar-primary {
    width: 100%;
    min-width: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: var(--ord-panel);
    border-right: none;
    display: flex;
    flex-direction: column;
  }
  html body.shell-m .sidebar-primary-menu { padding: 6px 10px; gap: 1px; }
  html body.shell-m .sidebar-primary-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 9px 10px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ord-text-2);
    text-align: left;
  }
  html body.shell-m .sidebar-primary-item svg { width: 18px; height: 18px; color: var(--ord-nav-muted); }
  html body.shell-m .sidebar-primary-label { font-size: 13px; max-width: none; text-align: left; letter-spacing: 0; flex: 1; }
  html body.shell-m .sidebar-primary-item:hover { background: var(--shm-band); }
  html body.shell-m .sidebar-primary-item.active { background: transparent; color: var(--shm-ch-d); box-shadow: none; }
  html body.shell-m .sidebar-primary-item.active svg { color: var(--shm-ch); }
  html body.shell-m .sidebar-primary-item.active::before { display: none; }
  /* 패널 있는 항목 = 펼침 화살표 (활성·펼침이면 회전) */
  html body.shell-m .sidebar-primary-item[data-menu]::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--ord-line-2);
    border-bottom: 1.5px solid var(--ord-line-2);
    transform: rotate(45deg);
    margin-right: 4px;
    transition: transform .15s;
    flex-shrink: 0;
  }
  html body.shell-m .sidebar-primary-item[data-menu].active::after { border-color: var(--shm-ch); }
  html body.shell-m .sidebar-primary-item[data-menu].active + .sidebar-secondary-content.m-acc-open { display: block; }
  html body.shell-m .sidebar-primary-item[data-menu]:has(+ .m-acc-open)::after { transform: rotate(-135deg); margin-top: 4px; }
  html body.shell-m .sidebar-primary-item .sidebar-board-badge { position: static; margin-left: auto; border: none; }
  /* 2차 패널 건수 배지 — 모바일은 즐겨찾기 별이 항상(opacity .5) 보이므로 겹침 방지 여백을 항상 확보 */
  html body.shell-m .sidebar-menu-item-wrap:has(> .sidebar-favorite-btn, > .sidebar-email-group-del-form, > .sidebar-email-group-del) .sidebar-board-count-badge { margin-right: 18px; }

  /* 2차 컨테이너는 숨김 — 활성 패널은 컨트롤러가 1차 항목 뒤로 옮겨 놓는다 */
  html body.shell-m .sidebar-secondary { display: none !important; }
  html body.shell-m .sidebar-primary-menu > .sidebar-secondary-content { display: none; }
  html body.shell-m .sidebar-primary-menu > .sidebar-secondary-content.m-acc-open {
    display: block;
    margin: 2px 0 6px 19px;
    padding: 2px 0 2px 10px;
    border-left: 1px solid var(--ord-line);
  }
  html body.shell-m .sidebar-secondary-content .sidebar-group-header { padding: 8px 8px 2px; }
  html body.shell-m .sidebar-secondary-content .sidebar-group-title { font-size: 10px; font-weight: 800; color: var(--ord-nav-label); letter-spacing: .05em; text-transform: uppercase; }
  html body.shell-m .sidebar-secondary-link { padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--ord-text-2); }
  html body.shell-m .sidebar-secondary-link::before { display: none; }
  html body.shell-m .sidebar-secondary-link.active { background: var(--shm-ch-l); color: var(--shm-ch-d); font-weight: 700; }
  html body.shell-m .sidebar-secondary-link.active::after { content: ""; position: absolute; left: -11px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--shm-ch); }

  /* 스크롤 목록 안의 하단 액션(단축키·테마·로그아웃)은 숨김 — 테마·로그아웃은 드로어 발(계정 우측)로 (9/12 사용자 지정) */
  html body.shell-m .sidebar-primary-actions { display: none; }

  /* 근태 — 머리 바로 아래 (스크롤 밖 고정) */
  html body.shell-m .m-drawer-att { display: block; flex-shrink: 0; border-bottom: 1px solid var(--shm-line); padding: 8px 10px; background: var(--shm-band); }

  /* 발: 계정 + 테마·로그아웃 아이콘 (버전은 모바일 미노출) */
  html body.shell-m .m-drawer-foot { display: block; flex-shrink: 0; border-top: 1px solid var(--shm-line); padding: 8px 10px; padding-bottom: calc(8px + var(--shm-safe-b)); }
  html body.shell-m .m-drawer-me { display: flex; align-items: center; gap: 8px; padding: 2px 4px; }
  html body.shell-m .m-drawer-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--ord-tint-cyan-line), var(--ord-head-bg)); color: var(--ord-on-solid); font-weight: 800; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
  html body.shell-m .m-drawer-name { font-size: 13px; font-weight: 700; color: var(--ord-text-2); }
  html body.shell-m .m-drawer-acts { margin-left: auto; display: inline-flex; gap: 2px; }
  html body.shell-m .m-drawer-act { width: 36px; height: 36px; border: none; background: transparent; border-radius: 9px; color: var(--ord-nav-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
  html body.shell-m .m-drawer-act:hover { background: var(--shm-band); color: var(--shm-ch); }
  html body.shell-m .m-drawer-act svg { width: 18px; height: 18px; }

}