/* ─────────────────────────────────────────────────────────────────────────────
   admin/mobile.css — IMMS 모바일(스마트폰) 공통 보정 (2026-09-18)
   admin_header.php 에서 admin.css 다음에 읽는다. 767px 이하에서만 동작하며
   PC 화면은 건드리지 않는다. 화면별 보정은 아래 "화면별" 절에 클래스로 묶어 둔다.
   원칙: 글자 15px 이상, 입력칸 16px(iOS 자동확대 방지)·높이 42px, 터치 목표 40px 이상,
         가로로 긴 표는 카드 또는 가로 스크롤.
   ───────────────────────────────────────────────────────────────────────────── */
/* 폰 전용 뒤로가기 버튼 — admin_top_menu.php 가 찍고, 767px 이하에서만 보인다 */
.mobBack { display: none; }

@media (max-width: 767px) {
  .mobBack { display: flex; position: fixed; left: 14px; bottom: 18px; z-index: 1050; width: 48px; height: 48px; border-radius: 50%;
             background: #151D28; color: #fff; align-items: center; justify-content: center; text-decoration: none;
             box-shadow: 0 4px 14px rgba(0,0,0,.28); opacity: .92; -webkit-tap-highlight-color: transparent; }
  .mobBack:active { transform: scale(.94); opacity: 1; }
  .mobBack:hover, .mobBack:focus { color: #fff; text-decoration: none; }

  /* ── 공통 ─────────────────────────────────────────────────────────────── */
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 15px; line-height: 1.5; padding-top: 50px; }
  .container { padding-left: 12px; padding-right: 12px; }
  h1 { font-size: 24px; } h2 { font-size: 21px; } h3 { font-size: 18px; } h4 { font-size: 16px; }

  /* 입력칸 — 16px 미만이면 iOS 가 화면을 자동 확대한다 */
  input[type=text], input[type=password], input[type=number], input[type=date], input[type=search],
  input[type=email], input[type=tel], select, textarea, .form-control {
    font-size: 16px !important; min-height: 42px; line-height: 1.3;
  }
  textarea, textarea.form-control { min-height: 96px; }
  .btn { min-height: 42px; font-size: 15px; padding-top: 9px; padding-bottom: 9px; }
  .btn-xs, .btn-sm { min-height: 36px; font-size: 14px; padding-top: 6px; padding-bottom: 6px; }
  .btn-group .btn { margin-bottom: 4px; }

  /* 부트스트랩 인라인 폼은 세로로 쌓는다 */
  .form-inline .form-group, .form-inline .form-control, .form-inline select { display: block; width: 100%; margin-bottom: 6px; }
  .form-horizontal .control-label { text-align: left; padding-top: 4px; margin-bottom: 2px; }

  /* 부트스트랩 표 — 폰 폭보다 넓으면 표 자체가 가로 스크롤 */
  .table-responsive { border: none; margin-bottom: 10px; }
  table.table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; font-size: 14px; }
  table.table > thead > tr > th, table.table > tbody > tr > td { padding: 9px 8px; white-space: nowrap; }

  /* 상단 메뉴 */
  .navbar-brand { font-size: 18px; }
  .navbar-inverse .navbar-nav > li > a { font-size: 15.5px; padding: 12px 15px; }
  .navbar-inverse .navbar-nav .dropdown-menu > li > a { font-size: 15px; padding: 9px 20px; }
  .navbar-inverse .navbar-nav .dropdown-header { font-size: 12.5px; }
  .navbar-text { margin-left: 15px; font-size: 14px; }

  .pagination > li > a, .pagination > li > span { padding: 8px 12px; font-size: 14px; }
  .modal-dialog { margin: 8px; }
  .well { padding: 12px; }
  .label { font-size: 85%; }

  /* ── 화면별: 프로젝트 리스트 (prj_list.php · .prjWrap) ─────────────────── */
  body .prjWrap { padding: 12px 10px 60px; font-size: 14.5px; }
  .prjWrap .prjHead { flex-wrap: wrap; gap: 6px 10px; margin-bottom: 10px; }
  .prjWrap .prjHead h2 { font-size: 22px; }
  .prjWrap .prjHead .cnt { font-size: 13px; }

  /* 검색줄 — 한 줄에 억지로 넣지 않고 [건수|정렬] [방법|검색어] [기간] [시작~종료] [버튼×3] */
  .prjWrap .prjBar { gap: 5px; margin-bottom: 8px; }
  .prjWrap .prjBar select, .prjWrap .prjBar input[type=text], .prjWrap .prjBar input[type=date] { height: 36px; min-height: 36px; font-size: 16px !important; padding: 0 6px; border-radius: 8px; }
  .prjWrap .prjBar .btnq { height: 36px; min-height: 36px; border-radius: 8px; }
  .prjWrap .prjBar .w6, .prjWrap .prjBar .w9, .prjWrap .prjBar .w12, .prjWrap .prjBar .w14 { width: auto; min-width: 0; }
  .prjWrap .prjBar select[name=searchList] { flex: 0 0 30%; }
  .prjWrap .prjBar select[name=searOrdBy] { flex: 1 1 60%; }
  .prjWrap .prjBar select[name=searType] { flex: 0 0 42%; }
  .prjWrap .prjBar input[name=searValue] { flex: 1 1 40%; width: 100px; min-width: 0; }
  .prjWrap .prjBar .gap { display: none; }
  .prjWrap .prjBar select[name=searchDate] { flex: 1 1 100%; }
  .prjWrap .prjBar input[type=date] { flex: 1 1 40%; min-width: 0; padding: 0 6px; }
  .prjWrap .prjBar .tilde { flex: 0 0 auto; font-size: 14px; }
  .prjWrap .prjBar .btnq { flex: 1 1 30%; padding: 0 8px; font-size: 14px; }
  .prjWrap .prjHint { display: none; }   /* 범례는 폰에서 접는다 — 읽을 공간이 없다 */


  /* 프로젝트 리스트(2026-09-19 개정): 카드가 아니라 프로젝트당 한 줄 표. 옆으로 드래그해서 본다.
     프로젝트명·기간·계약금액·진행금액·입금확인만 — 담당자·계산서·결재와 보조 줄(발행·미발행·VAT·미입금)은 숨김.
     프로젝트명은 왼쪽에 고정(sticky)돼 옆으로 밀어도 어느 건인지 보인다. 상단 금액 요약은 폰에서 숨긴다 */
  /* 금액 요약 — 폰에서도 보이게, 대신 아주 촘촘하게(2026-09-19).
     한 줄에 4칸씩 2줄(계약·발행·미발행·입금완료 / 입금예정·남은발행·남은입금 + 전체 계약금액).
     칸을 누르면 그 조건의 프로젝트만 걸러 보는 동작은 PC 와 같다. */
  .prjWrap .prjSum { display: block; margin: 0 0 8px; gap: 0; }
  .prjWrap .prjMon { width: 100%; margin: 0; padding: 7px 8px 6px; border: 1px solid var(--line2); border-radius: 10px; background: #fff; }
  .prjWrap .prjMon .mHead { display: block; margin-bottom: 5px; }
  .prjWrap .prjMon .mTtl { font-size: 11.5px; font-weight: 800; }
  .prjWrap .prjMon .mNote { display: none; }
  .prjWrap .prjMon .mRow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px 4px; flex-wrap: nowrap; }
  .prjWrap .prjMon .mc { min-width: 0; padding: 3px 5px; border-left: none; text-align: left; border-radius: 7px;
                         background: #F8FAFC; }
  .prjWrap .prjMon .mc.nx { border-left: none; background: #FFF8F1; }
  .prjWrap .prjMon .mc .l { font-size: 9.5px; margin-bottom: 1px; letter-spacing: -.02em; }
  .prjWrap .prjMon .mc .v { font-size: 12.5px; letter-spacing: -.03em; }
  .prjWrap .prjMon .mc .p { font-size: 9px; margin-top: 0; }
  /* '지금 할 일' 3칸 — 요약 위에 가로 3등분으로 */
  .prjWrap .prjSum .tile { display: none; }
  .prjWrap .prjSum .tile.act { display: block; float: none; width: calc(33.333% - 4px); min-width: 0;
      margin: 0 0 6px; padding: 6px 8px; text-align: left; }
  .prjWrap .prjSum .tile.act:nth-of-type(2) { margin-left: 6px; margin-right: 6px; }
  .prjWrap .prjSum .tile.act .lbl { font-size: 10px; letter-spacing: -.03em; margin-bottom: 2px; }
  .prjWrap .prjSum .tile.act b.big { font-size: 18px; }
  .prjWrap .prjSum .tile.act b.big small { font-size: 10.5px; }
  .prjWrap .prjSum { display: flex; flex-wrap: wrap; }
  .prjWrap .prjMon { order: 5; }
  .prjWrap .prjTbl { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
  .prjWrap .prjScroll { max-height: none; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; }
  /* 칸 너비를 고정해 빈 공간이 생기지 않게 한다(table-layout:fixed). 합계 = 화면보다 약간 넓어 옆으로 드래그 */
  .prjWrap table.prj { table-layout: fixed; width: 490px; min-width: 490px; }
  .prjWrap table.prj thead th, .prjWrap table.prj tbody td { white-space: nowrap; padding: 6px 7px; vertical-align: middle; line-height: 1.3; }
  .prjWrap table.prj thead th { position: static; font-size: 11px; padding-top: 7px; padding-bottom: 7px; }
  .prjWrap table.prj th .h2 { display: none; }
  .prjWrap table.prj tbody td { border-bottom: 1px solid #EFF1F5; }
  .prjWrap table.prj th.c-who, .prjWrap table.prj td.c-who,
  .prjWrap table.prj th.c-tax, .prjWrap table.prj td.c-tax,
  .prjWrap table.prj th.c-pay, .prjWrap table.prj td.c-pay,
  .prjWrap table.prj th.c-apv, .prjWrap table.prj td.c-apv { display: none; }

  /* ① 프로젝트명 — 왼쪽 고정, 두 줄까지 */
  .prjWrap table.prj th.c-name, .prjWrap table.prj td.c-name { position: sticky; left: 0; z-index: 2; background: #fff;
      width: 132px; box-shadow: 1px 0 0 var(--line); white-space: normal; }
  .prjWrap table.prj thead th.c-name { background: #F7F9FC; z-index: 3; }
  .prjWrap table.prj tbody tr:nth-child(even) td.c-name { background: #FAFBFD; }
  .prjWrap table.prj tbody tr.row-ok td:first-child, .prjWrap table.prj tbody tr.row-warn td:first-child { box-shadow: 1px 0 0 var(--line); }
  .prjWrap table.prj td.c-name a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden; font-size: 12px; font-weight: 700; line-height: 1.3; word-break: break-all; }

  /* ② 기간 — 시작·마감 두 줄, 완료 표시는 마감 옆에 작게 */
  /* 날짜 글자폭에 딱 맞춰 좁히고, 오른쪽 여백을 없애 옆의 계약금액과 붙인다 */
  .prjWrap table.prj th.c-term, .prjWrap table.prj td.c-term { width: 66px; font-size: 10.5px; color: var(--ink3);
      padding-left: 6px; padding-right: 0; letter-spacing: -.02em; }
  .prjWrap table.prj td.c-term .d { display: block; line-height: 1.35; }
  .prjWrap table.prj td.c-term .d.e { display: block; margin-left: 0; }
  .prjWrap table.prj td.c-term .chip { display: inline-block; margin: 0; padding: 0 3px; font-size: 9.5px; background: none; }

  /* ③④ 계약금액 · 진행금액 */
  .prjWrap table.prj th.c-dep, .prjWrap table.prj td.c-dep,
  .prjWrap table.prj th.c-ing, .prjWrap table.prj td.c-ing { width: 84px; text-align: right; padding-left: 2px; padding-right: 6px; }
  .prjWrap .c-num .sub { display: none; }
  .prjWrap .c-num .mo, .prjWrap .c-num .mo.big { font-size: 12.5px; }
  .prjWrap table.prj td.c-dep.unpaid .mo { color: #D92D20; }          /* 아직 입금 안 된 계약금 */

  /* ⑤ 계산서 발행일 + 입금 여부 — 발행완료(승인) 회색, 발행예정 빨강 */
  .prjWrap table.prj th.c-mob, .prjWrap table.prj td.c-mob { display: table-cell; width: 124px; padding-left: 8px; }
  .prjWrap table.prj td.c-mob .mline { display: block; font-size: 11.5px; line-height: 1.4; white-space: nowrap;
                                       font-variant-numeric: tabular-nums; }
  .prjWrap table.prj td.c-mob .mline + .mline { margin-top: 1px; }
  .prjWrap table.prj td.c-mob .mline.ok { color: #8A93A0; }
  .prjWrap table.prj td.c-mob .mline.plan { color: #D92D20; font-weight: 700; }
  .prjWrap table.prj td.c-mob .mline em { font-style: normal; margin-left: 5px; font-size: 10.5px; font-weight: 700; }
  .prjWrap table.prj td.c-mob .mline.ok em { color: #B0B7C3; }

  /* 완료된 프로젝트는 줄 전체를 흐리게 — 볼 일이 끝난 건이 눈에 걸리지 않게 */
  .prjWrap table.prj tbody tr.row-done td,
  .prjWrap table.prj tbody tr.row-done td a,
  .prjWrap table.prj tbody tr.row-done td .mo,
  .prjWrap table.prj tbody tr.row-done td .mline,
  .prjWrap table.prj tbody tr.row-done td .mline em,
  .prjWrap table.prj tbody tr.row-done td .chip { color: #B6BCC6; font-weight: 500; }
  .prjWrap table.prj tbody tr.row-done td .chip { background: none; }
  .prjWrap table.prj tbody tr.row-done td.c-name a { font-weight: 600; }
  .prjWrap table.prj tbody tr.row-done td.c-name { background: #FBFCFD; }

  .prjWrap .prjPg { gap: 6px; margin-top: 14px; }
  .prjWrap .prjPg .pg { min-width: 38px; height: 38px; font-size: 14px; }
  .prjWrap .prjPg .pgInfo { width: 100%; text-align: center; margin: 4px 0 0; font-size: 13px; }
}