/* 세무회계홍인 업무시스템 — 휴대폰·태블릿 대응
   각 화면의 <style> 뒤에 불러와서 덮어쓴다. 데스크톱(901px 이상)은 손대지 않는다.

   설계 원칙
   - 표는 가로 스크롤로 밀지 않고 "한 건 = 카드 한 장"으로 접는다. 손가락으로 읽는 게 우선.
   - 누르는 것은 전부 44px 이상. 그보다 작으면 오타가 난다.
   - 입력칸 글씨는 16px 이상. 그 아래면 iOS가 화면을 확대해 버린다.
*/

/* ── 대행 보기 띠 (전 화면 공통) ───────────────────────── */
.imp-bar {
  position: sticky; top: 0; z-index: 200;
  background: #b45309; color: #fff; font-size: 13px; font-weight: 700;
  padding: 9px 14px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding-top: calc(9px + env(safe-area-inset-top));
}
.imp-bar .who { font-weight: 500; opacity: .85; }
.imp-bar button {
  margin-left: auto; height: 32px; padding: 0 13px; border: none; border-radius: 8px;
  background: #fff; color: #b45309; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer;
}
body.has-imp header { top: auto; }

/* ── 상단 로고 (전 화면 공통) ─────────────────────────────
   app.js 가 글자만 있던 자리를 심볼 이미지 + 이름으로 바꾼다. */
header .logo.brand { display: flex; align-items: center; gap: 8px; }
header .logo.brand img { height: 26px; width: auto; display: block; }
header .logo.brand .logo-txt {
  font-weight: 800; letter-spacing: -0.2px; color: #fff;
}

/* ── 아래 탭바 — 휴대폰에서만 보인다 ─────────────────────── */
.tabbar, .more-sheet { display: none; }

/* ── 태블릿 이하 ─────────────────────────────────────────── */
@media (max-width: 900px) {
  /* 두 칸 레이아웃(본문 + 고정폭 사이드바)을 한 칸으로 편다.
     계산기·보고서·멘트·매뉴얼·체크표·비교검증이 300~420px 사이드바를 갖고 있어
     이걸 안 풀면 화면이 통째로 옆으로 밀린다. */
  .grid, .wrap { grid-template-columns: 1fr !important; }
  main, .wrap { padding-left: 12px !important; padding-right: 12px !important; }

  /* 그리드 칸은 기본 최소폭이 "내용 크기"라, 안에 nowrap 표가 있으면 칸이 그만큼 벌어진다.
     min-width:0 을 줘야 칸이 화면 폭을 지키고 표가 안에서 스크롤된다. */
  .grid > *, .wrap > *, .card { min-width: 0 !important; }
  .card { max-width: 100%; }

  /* 빽빽한 표(체크표 등)는 태블릿 폭에서도 넘치므로 상자가 스크롤을 맡는다 */
  .card, .sheet, .panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* 사이드바는 위에 붙어 따라다니지 않게 (모바일에선 화면만 잡아먹는다) */
  aside, .panel {
    position: static !important; top: auto !important;
    width: auto !important; max-width: none !important; max-height: none !important;
  }
}

/* ── 휴대폰 ──────────────────────────────────────────────── */
@media (max-width: 700px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }

  /* 상단 바 — 로고만 남기고 메뉴는 아래 탭바로 내린다 */
  header {
    padding: 10px 14px !important;
    gap: 8px !important;
    position: sticky; top: 0; z-index: 50;
    box-shadow: 0 1px 8px rgba(0,0,0,.14);
  }
  header nav { display: none !important; }
  header .logo.brand img { height: 30px !important; }
  header .logo.brand .logo-txt { font-size: 16px !important; }
  header .sub, header .right, header > a[href="/api/logout"] { display: none !important; }
  header .who { font-size: 12px !important; margin-left: auto !important; opacity: .75; }

  /* 아래 탭바 */
  .tabbar {
    display: flex !important;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: rgba(255,255,255,.96);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--line, #e5e7eb);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar .tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 2px 7px; text-decoration: none;
    color: #9aa3af; font-size: 11px; font-weight: 700;
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar .tab svg { width: 22px; height: 22px; }
  .tabbar .tab.on { color: var(--navy, #1a2b4a); }
  .tabbar .tab.on svg { stroke-width: 2.1; }
  .tabbar .tab:active { background: #f1f3f6; }
  /* 탭바에 가려지지 않게 본문 아래를 비워둔다 */
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)) !important; }

  /* '더보기' 시트 — 아래에서 올라온다 */
  .more-sheet { display: block !important; position: fixed; inset: 0; z-index: 95;
                pointer-events: none; }
  .more-sheet .more-bg {
    position: absolute; inset: 0; background: rgba(15,23,42,.4);
    opacity: 0; transition: .2s;
  }
  .more-sheet .more-box {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: #fff; border-radius: 18px 18px 0 0;
    padding: 10px 14px calc(20px + env(safe-area-inset-bottom));
    transform: translateY(102%); transition: transform .24s cubic-bezier(.32,.72,0,1);
    box-shadow: 0 -8px 32px rgba(0,0,0,.18);
  }
  .more-sheet.open { pointer-events: auto; }
  .more-sheet.open .more-bg { opacity: 1; }
  .more-sheet.open .more-box { transform: translateY(0); }
  .more-grip { width: 38px; height: 4px; border-radius: 4px; background: #d7dbe0; margin: 4px auto 12px; }
  .more-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .more-list a {
    display: flex; align-items: center; justify-content: center;
    min-height: 50px; border: 1px solid var(--line, #e5e7eb); border-radius: 12px;
    text-decoration: none; color: var(--navy, #1a2b4a); font-weight: 700; font-size: 14px;
  }
  .more-list a:active { background: #f1f3f6; }
  .more-list a.out { grid-column: 1 / -1; color: #dc2626; border-color: #fca5a5; }

  main, .wrap { padding: 12px 10px !important; }
  .card { padding: 13px 12px !important; border-radius: 12px !important; }
  h1 { font-size: 19px !important; }
  h2 { font-size: 15px !important; }

  /* 필터 줄 — 가로로 늘어놓지 않고 접는다 */
  .bar, .filters, .toolbar, .gen-grid {
    flex-wrap: wrap !important;
    display: flex !important; gap: 7px !important;
    grid-template-columns: 1fr !important;
  }
  .bar > *, .filters > * { flex: 1 1 46%; min-width: 0; }
  .bar .spacer, .filters .spacer { display: none !important; }
  .hint { flex-basis: 100%; font-size: 12px !important; }

  /* 손가락 크기 맞추기. 입력 글씨 16px 미만이면 iOS가 확대한다 */
  input, select, textarea, button, .btn {
    min-height: 44px !important;
    font-size: 16px !important;
  }
  .btn.sm { min-height: 38px !important; font-size: 14px !important; }
  table input, table select, table textarea { min-height: 40px !important; }

  /* ── 표를 카드로 접기 ──
     thead를 숨기고 각 칸 앞에 항목 이름(data-label)을 붙인다.
     data-label이 없는 표는 아래 .scroll-x 규칙으로 가로 스크롤 처리된다. */
  table.cards, table.cards thead, table.cards tbody,
  table.cards tr, table.cards td { display: block; width: 100%; }
  table.cards thead { display: none; }
  table.cards tr {
    border: 1px solid var(--line, #e5e7eb); border-radius: 11px;
    padding: 10px 12px; margin-bottom: 9px; background: #fff;
  }
  table.cards td {
    border: none !important; padding: 4px 0 !important;
    display: flex; align-items: flex-start; gap: 9px;
    font-size: 14px;
  }
  table.cards td::before {
    content: attr(data-label);
    flex: 0 0 74px; color: var(--gray, #6b7280);
    font-size: 12px; font-weight: 700; padding-top: 2px;
  }
  /* 첫 칸(대개 거래처명)은 제목처럼 크게, 이름표 없이.
     선택용 체크박스 칸이 앞에 있으면 그 다음 칸이 제목이 된다. */
  table.cards td:first-child:not(.ckcell),
  table.cards td.ckcell + td {
    font-size: 16px; font-weight: 800; color: var(--navy, #1a2b4a);
    padding-bottom: 7px !important; margin-bottom: 5px;
    border-bottom: 1px solid #f1f2f4 !important;
  }
  table.cards td:first-child:not(.ckcell)::before,
  table.cards td.ckcell + td::before { display: none; }

  /* 체크박스는 카드 오른쪽 위 구석에 띄운다 */
  table.cards tr { position: relative; padding-right: 44px; }
  table.cards td.ckcell {
    position: absolute; top: 8px; right: 10px; width: auto;
    padding: 0 !important; border: none !important; margin: 0 !important;
  }
  table.cards td.ckcell::before { display: none; }
  table.cards td.ckcell input { width: 22px !important; height: 22px !important; min-height: 0 !important; }

  /* 일괄 변경 바는 탭바 위에 뜬다 */
  #bulkbar { bottom: calc(70px + env(safe-area-inset-bottom)) !important; width: calc(100vw - 20px); }
  #bulkbar b { flex-basis: 100%; }
  table.cards td:empty { display: none; }
  table.cards td > input, table.cards td > select, table.cards td > textarea { flex: 1; }

  /* 카드로 접지 않은 표는 옆으로 밀어서 본다.
     표 자체에 display:block 을 주면 thead 가 바깥으로 삐져나가므로,
     스크롤은 표를 감싼 상자(.card 등)가 맡는다. */
  .card, .sheet, .panel, .scroll-x {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .card > table:not(.cards) { font-size: 12.5px; }
  .card > table:not(.cards) th, .card > table:not(.cards) td { white-space: nowrap; }

  /* 통계 카드 — 두 칸씩 */
  .stats { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  .stat { min-width: 0 !important; padding: 10px 12px !important; }
  .stat .num { font-size: 21px !important; }

  /* 팝업은 화면을 꽉 채운다 */
  dialog {
    width: 100vw !important; max-width: 100vw !important;
    height: 100dvh !important; max-height: 100dvh !important;
    margin: 0 !important; border-radius: 0 !important;
  }
  dialog .dlg-body, dialog .bd {
    max-height: calc(100dvh - 116px) !important; padding: 14px !important;
  }
  dialog .dlg-head, dialog .hd { padding: 13px 14px !important; }
  dialog .x { min-width: 44px; min-height: 44px; }

  /* 상세의 항목 나열은 한 줄에 하나 */
  .kv { grid-template-columns: 1fr !important; }
  .kv .w2, .kv .w4 { grid-column: auto !important; }
  .edit-row { flex-direction: column !important; align-items: stretch !important; }
  .edit-row label { width: 100% !important; }

  /* 신고대상 체크 — 두 칸 */
  .svc-edit { grid-template-columns: 1fr 1fr !important; }

  /* 인쇄용 A4 미리보기(보고서·체크표)는 화면 폭에 맞춘다.
     원래 940px 고정이라 그대로 두면 3배로 삐져나간다. */
  .paper, .preview, .sheet {
    width: 100% !important; min-width: 0 !important;
    padding: 15px 13px !important; transform: none !important;
  }
  .sheet h1 { font-size: 17px !important; letter-spacing: 3px !important; }

  /* 여러 칸으로 나뉜 입력·요약 블록을 한두 칸으로 접는다 */
  .types, .g2, .row2, .rates, .sum, .r-meta, .ev, .approve, .row3, .hd3, .ox-row {
    grid-template-columns: 1fr !important;
  }
  .types { grid-template-columns: 1fr 1fr !important; }   /* 종류 선택 버튼만 두 칸 유지 */
  .fld, .fld input, .fld select { min-width: 0 !important; width: 100% !important; }

  /* 체크표 상단 정보칸 — 이름표와 값이 한 줄씩 */
  .meta { grid-template-columns: 88px 1fr !important; }
  .meta .k, .meta .v { border-right: none !important; }

  /* 항목이 빽빽한 표(체크표·비교검증·계산기)는 카드로 접으면 오히려 읽기 어렵다.
     옆으로 밀어서 보되, 화면 자체는 밀리지 않게 감싼다. */
  table.ck, table.v, table.c, table.items { font-size: 12.5px !important; }

  /* 결과 문구 상자는 화면 높이를 다 먹지 않게 */
  #out, textarea { min-height: 260px !important; }

  /* 매뉴얼 본문 표도 옆으로 밀어서 */
  main#main { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── 아주 작은 화면 ──────────────────────────────────────── */
@media (max-width: 380px) {
  .stats { grid-template-columns: 1fr; }
  .svc-edit { grid-template-columns: 1fr !important; }
  table.cards td::before { flex-basis: 66px; }
}

/* 홈 화면에 추가해서 앱처럼 띄웠을 때 상단 노치 영역 확보 */
@media (display-mode: standalone) {
  header { padding-top: calc(9px + env(safe-area-inset-top)) !important; }
  body { padding-bottom: env(safe-area-inset-bottom); }
}