/* ============================================================================
   NSNTEK ERP — 폰 화면 (사용자 요청 2026-09-11)

   주소는 하나(erp.nsntek.com)다. m. / t. 같은 별도 주소·기기 감지는 두지 않는다
   (사용자 확정 2026-09-11 — 반응형 한 가지). 화면 폭이 768px 이하면 이 파일의
   규칙이 켜진다. 크롬 F12 → Ctrl+Shift+M 으로 본다.

   폰에서 되는 것은 **골라 둔 화면뿐**이다 —
     · 폰용 홈      templates/home/dashboard.html 의 .mh
     · 전자결재     templates/gw/m_approval.html (+ approval_doc.js 의 시트)
   그 화면은 <body class="m-ok"> 를 단다(base.html 의 body_class 블록).
   상단바는 폰에서 로고 + 오른쪽 ☰ 하나만 남기고, 모듈 탭·리본·시계·이름·
   테마·설정·로그아웃은 ☰ 서랍(_topbar.html #m-nav) 안으로 들어간다
   (사용자 요청 2026-09-15 — "리본 메뉴를 오른쪽 하나로 묶어서").
   PC용 화면도 잘리지는 않게 맞춘다 (사용자 요청 2026-09-15 "전체 페이지") —
   shell.js 의 폰 맞춤(표 감싸기·줄바꿈·고정 폭 풀기) + 이 파일 끝의 규칙.
   나머지 화면은 PC 화면이 그대로 나오고 위에 "PC용" 안내 한 줄만 붙는다
   (_topbar.html 의 .m-pc-note). 표를 억지로 구겨 넣지 않는다 — 화면마다
   폰용을 따로 만드는 것은 필요해질 때 하나씩 한다.

   'PC 화면 보기'(body.force-pc, sessionStorage) 를 누르면 그 탭에서는
   폰용 홈·안내를 끄고 PC 화면 그대로 보여 준다(기준서 §7.4).
   ============================================================================ */

/* 폰용 요소는 기본 숨김 — 아래 미디어 규칙이 켠다 */
.m-pc-note, .mh, .m-only, .m-nav, .m-menu-btn { display: none; }

/* ── 폰용 홈 타일 ──────────────────────────────────────────────────────── */
.mh-tile {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 14px; margin-bottom: 10px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  color: inherit; text-decoration: none;
}
.mh-tile:active { border-color: var(--accent); }
.mh-tile .ic { font-size: 22px; width: 36px; text-align: center; color: var(--accent); }
.mh-tile .tx { flex: 1; min-width: 0; }
.mh-tile b { display: block; font-size: 15px; }
.mh-tile .sub { font-size: 12px; color: var(--text-dim); }
.mh-tile .cnt {
  min-width: 30px; height: 30px; padding: 0 9px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 13px;
}
.mh-tile .cnt.zero { background: var(--panel-2); color: var(--text-mute); }
.mh-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 18px; font-size: 12px; color: var(--text-mute);
}

/* ── 결재 문서 시트 (approval_doc.js — 폰에서는 창 대신 화면을 꽉 채운다) ── */
.ad-sheet {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--text); font-family: var(--font);
}
.ad-sheet-tb {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 700;
}
.ad-sheet-tb .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-sheet-tb button {
  background: transparent; border: 0; color: #fff; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 2px 6px;
}
.ad-sheet-body { flex: 1; overflow: auto; padding: 12px; -webkit-overflow-scrolling: touch; }
/* 결재판·양식 표는 폰보다 넓을 수 있다 — 그 칸 안에서만 옆으로 민다 */
.ad-sheet-body .ad-head { flex-direction: column; align-items: stretch; gap: 8px; }
.ad-sheet-body .ad-stamps { align-items: flex-start; overflow-x: auto; }
.ad-sheet-body .ad-body, .ad-sheet-body .ad-body-print { overflow-x: auto; }
/* 양식 표는 폰 폭으로 눌리면 글자가 세로로 쌓인다 — 넓이를 지키고 옆으로 민다 */
.ad-sheet-body .ad-body table { min-width: 600px; }
.ad-sheet-foot {
  flex: none; display: flex; gap: 8px; padding: 10px 12px;
  border-top: 1px solid var(--border); background: var(--panel-2);
}
.ad-sheet-foot:empty { display: none; }
.ad-sheet-foot .hr-btn { flex: 1; padding: 12px 8px; font-size: 14px; }

/* ── 768px 이하 ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* ★ 문서 폭을 화면 폭에 묶는다 (사용자 보고 2026-09-15 "☰ 누르면 오른쪽에 잘려서")
     PC용 화면의 넓은 표가 문서를 넓히면 크롬이 레이아웃 뷰포트를 표 폭까지 늘린다
     (거래처 화면 실측 innerWidth 714). 그러면 fixed 서랍의 right:0 이 714 기준이라
     화면 밖에 붙었다. body 를 스크롤 상자로 두면 표는 body 안에서만 옆으로 밀리고
     문서·뷰포트는 화면 폭 그대로다. sticky 상단바도 body 기준이라 그대로 붙는다. */
  html { overflow: hidden; height: 100%; }
  body { height: 100%; height: 100dvh; overflow: auto; -webkit-overflow-scrolling: touch; }

  /* 상단바 — 로고와 오른쪽 ☰ 만 남긴다. 모듈 탭·리본·시계·이름·테마·설정·
     로그아웃은 전부 서랍(#m-nav)으로 (사용자 요청 2026-09-15) */
  :root { --ribbon-h: 0px; }          /* 리본이 없으니 sticky 계산도 0 으로 */
  .tb-nav, .ribbon, .tb-who, .tb-theme-wrap,
  .tb-right .tb-icon:not(.m-menu-btn) { display: none; }
  .tb { left: 0; }                    /* 표를 옆으로 밀어도 상단바(☰)는 제자리 — sticky 가로 */
  .tb-logo { flex: 1 1 auto; border-right: 0; padding: 0 12px; gap: 4px; }
  .tb-logo-svg { height: 24px; }
  .tb-sub { font-size: 10px; padding-top: 2px; }
  .tb-right { border-left: 0; gap: 0; padding: 0 4px; }
  .m-menu-btn { display: inline-block; font-size: 20px; padding: 6px 10px; }
  .content { padding: 12px 12px 30px; }

  /* ☰ 서랍 — 오른쪽에서 열린다. 바깥(어두운 막)을 누르면 닫힌다 */
  .m-nav.open {
    display: block; position: fixed; inset: 0; z-index: 2500;
    background: rgba(0, 0, 0, .45);
  }
  .m-nav-p {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(300px, 84vw);
    display: flex; flex-direction: column;
    background: var(--panel); border-left: 1px solid var(--border);
    box-shadow: var(--shadow); font-family: var(--font); color: var(--text);
  }
  .m-nav-hd {
    flex: none; display: flex; align-items: center; gap: 8px;
    height: var(--titlebar-h); padding: 0 8px 0 14px;
    border-bottom: 1px solid var(--border);
  }
  .m-nav-hd .u {
    flex: 1; min-width: 0; font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .m-nav-hd .u small { color: var(--text-mute); margin-left: 6px; font-weight: 400; }
  .m-nav-hd .ic {
    background: none; border: 0; color: var(--text-dim); cursor: pointer;
    font-size: 17px; line-height: 1; padding: 6px 8px; font-family: inherit;
    text-decoration: none;
  }
  .m-nav-sc { flex: 1; overflow: auto; padding: 2px 0 10px; -webkit-overflow-scrolling: touch; }
  .m-nav-t { padding: 12px 14px 4px; font-size: 11px; color: var(--text-mute); letter-spacing: .04em; }
  /* 현재 모듈의 하위 메뉴 — 손가락 크기 줄 */
  .m-nav-i {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px 10px 18px; font-size: 14px;
    color: var(--text-dim); text-decoration: none;
    border-left: 3px solid transparent;
  }
  .m-nav-i:active { background: var(--panel-2); }
  .m-nav-i.on { color: var(--text); font-weight: 600; border-left-color: var(--accent); background: var(--panel-2); }
  /* 모듈 — 3열 격자 (12개를 세로로 늘어놓으면 스크롤해야 끝이 보였다) */
  .m-nav-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px 14px 6px; }
  .m-nav-c {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-height: 42px; padding: 6px 4px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2);
    color: var(--text-dim); font-size: 13px; font-weight: 600; text-decoration: none;
    text-align: center; line-height: 1.2;
  }
  .m-nav-c.on { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
  .m-nav-c.rsv { opacity: .5; }
  .m-nav-c small { font-size: 9px; font-weight: 400; color: var(--text-mute); }
  /* 발 — 테마 4종 + 폰용 홈·로그아웃 */
  .m-nav-ft {
    flex: none; display: flex; flex-direction: column; gap: 8px;
    padding: 8px 14px 10px; border-top: 1px solid var(--border);
  }
  .m-nav-th { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-mute); }
  .m-nav-th > span { margin-right: 2px; }
  .m-nav-th .theme-item {
    flex: 1; text-align: center; padding: 6px 0; font-size: 11px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--panel); font-family: inherit; cursor: pointer;
  }
  .m-nav-row { display: flex; gap: 8px; }
  .m-nav-b {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 6px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--panel-2); color: var(--text); font-size: 13px; font-weight: 600;
    text-decoration: none;
  }

  /* PC용 화면 안내 — 폰용 화면(m-ok)과 'PC 화면 보기'(force-pc)에는 안 붙는다 */
  body:not(.m-ok):not(.force-pc) .m-pc-note {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 12px; font-size: 12px;
    background: var(--accent-soft); color: var(--text-dim);
    border-bottom: 1px solid var(--border);
  }
  .m-pc-note a { color: var(--accent); font-weight: 600; }

  /* 폰용 홈 — 위젯판 대신 타일. 'PC 화면 보기'면 위젯판으로 돌아간다 */
  body:not(.force-pc) .mh { display: block; }
  body:not(.force-pc) .hm-head,
  body:not(.force-pc) #hm-grid,
  body:not(.force-pc) #hm-empty { display: none; }
  body.force-pc .m-only { display: inline-flex; }

  /* 확인창은 화면 폭 안에 */
  .ewd { width: calc(100vw - 32px) !important; max-width: 420px; }

  /* ── PC용 화면 폰 맞춤 (shell.js 의 fit 과 짝 — 사용자 요청 2026-09-15) ──
     폰용 화면(m-ok)과 'PC 화면 보기'(force-pc)는 손대지 않는다 */
  .m-tw { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  /* 폭 100% 표가 폰 폭에 눌리면 글자가 세로로 쌓인다 — 머리글은 안 꺾고 셀은 단어
     단위로만 꺾는다. 그만큼 표가 넓어지면 감싸개 안에서 옆으로 민다 */
  .m-tw th { white-space: nowrap; }
  .m-tw td { word-break: keep-all; }
  /* 머리글 sticky 는 원래 '상단바+리본' 만큼 내려 붙는데, 감싸개 안에서는 그 값이
     첫 줄을 덮는다(프로젝트 관리·설계 그래프 실측) — 감싸개 안에서는 0 */
  .m-tw thead, .m-tw thead th, .m-tw th,
  .table-wrap .m-tw thead th { top: 0 !important; }   /* erp_controls.css 의 !important 보다 세게 */
  body:not(.m-ok):not(.force-pc) img { max-width: 100%; height: auto; }
  /* 창(ErpWindow) 안의 표 — 거래처·품목 고르기처럼 열이 많다. 창 폭에 맞춰 글자
     단위로 꺾이면 읽을 수 없으니 내용 폭대로 두고 창 안에서 옆으로 민다
     (.ew-body 와 목록 상자가 overflow:auto). 폰 맞춤(shell.js)은 .ew 를 건너뛴다. */
  body:not(.m-ok):not(.force-pc) .ew-body table { width: max-content; min-width: 100%; max-width: none; }
  body:not(.m-ok):not(.force-pc) .ew-body th,
  body:not(.m-ok):not(.force-pc) .ew-body td { white-space: nowrap; }
  body:not(.m-ok):not(.force-pc) .hr-modal { width: auto; max-width: calc(100vw - 16px); }
  /* 좌측 메뉴(설정·전자결재·게시판 묶음) — 옆에 세우면 본문이 150px 뿐이라 위에 칩 줄로 */
  body:not(.m-ok):not(.force-pc) .sn-wrap,
  body:not(.m-ok):not(.force-pc) .gwb-wrap { flex-direction: column; gap: 10px; }
  body:not(.m-ok):not(.force-pc) .sn-side,
  body:not(.m-ok):not(.force-pc) .gwb-side {
    width: 100%; box-sizing: border-box; position: static; height: auto; overflow: visible;
    display: flex; flex-wrap: wrap; gap: 5px; padding: 8px;
  }
  body:not(.m-ok):not(.force-pc) .sn-side h4,
  body:not(.m-ok):not(.force-pc) .gwb-side h4 {
    width: 100%; margin: 0 0 2px; padding: 0 4px 6px; font-size: 13px;
  }
  body:not(.m-ok):not(.force-pc) .sn-item,
  body:not(.m-ok):not(.force-pc) .gwb-item {
    padding: 7px 10px; font-size: 12px; border: 1px solid var(--border); border-radius: 6px;
  }
  body:not(.m-ok):not(.force-pc) .sn-item.active,
  body:not(.m-ok):not(.force-pc) .gwb-item.active { border-color: var(--accent); }
  body:not(.m-ok):not(.force-pc) .sn-main,
  body:not(.m-ok):not(.force-pc) .gwb-main { width: 100%; }
  /* 달력은 7열을 지키고 칸만 줄인다 (fit 은 5열 이상 grid 를 건드리지 않는다) */
  body:not(.m-ok):not(.force-pc) .hr-cal-cell { --cal-px: 2px; min-height: 46px; min-width: 0; padding: 3px var(--cal-px); overflow: visible; }
  body:not(.m-ok):not(.force-pc) .hr-cal-weekday { min-width: 0; font-size: 12px; padding: 5px 0; }
  body:not(.m-ok):not(.force-pc) .hr-cal-grid { height: auto; grid-auto-rows: auto; }
  /* PC 는 글씨를 2배로 키웠다(2026-09-30) — 폰 7열에서는 원래 크기로 */
  body:not(.m-ok):not(.force-pc) .hr-cal-cell .num { font-size: 12px; }
  body:not(.m-ok):not(.force-pc) .hr-chip { --chip-px: 3px; font-size: 10px; padding: 1px var(--chip-px); }
  body:not(.m-ok):not(.force-pc) .hr-cal-nav-title { font-size: 16px; }
  body:not(.m-ok):not(.force-pc) .hr-cal-nav .hr-btn { font-size: 16px; padding: 5px 14px; }
  body:not(.m-ok):not(.force-pc) .hr-cal-legend { font-size: 12px; gap: 4px 12px; }
}