/* ─────────────────────────────────────────────────────────────
   모바일 전용 규칙 (2026-08-18)

   PC 화면은 그대로 두고, 좁은 화면에서만 켜진다. 그래서 모든 규칙을
   미디어 쿼리 안에만 둔다 — 이 파일 바깥으로 새어 나가는 규칙이 없어야
   PC UI가 바뀌지 않는다.

   핵심 결정
   · 사이드바는 화면을 가로로 먹지 않게 서랍(off-canvas)으로 바꾼다.
     열림 상태는 body.nav-open 하나로만 판단한다(PC의 .collapsed와 무관).
   · 표는 지우거나 접지 않는다. 정산 자료라 열이 다 보여야 하므로
     가로 스크롤로 두고, 첫 열만 고정해 어느 행인지 놓치지 않게 한다.
   · 손가락 조작을 위해 버튼·입력은 최소 40px 높이를 준다.
   ───────────────────────────────────────────────────────────── */

/* 서랍 뒤 어두운 막은 모바일 전용이다. PC에서는 0x0 투명이라 지금도 보이지 않지만,
   #content-row가 flex라 훗날 gap이 생기면 빈 칸이 될 수 있으니 아예 꺼 둔다. */
#nav-scrim { display: none; }

@media (max-width: 820px) {

  /* ── 상단바: 좁으니 부가 정보를 접고 핵심만 남긴다 ── */
  #topbar { padding: 0 10px; gap: 6px; }
  .topbar-left { gap: 4px; flex: 1; min-width: 0; }
  .topbar-left #page-title { font-size: 15px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .topbar-divider,
  #last-collected,                   /* '최근 수집' 시각 */
  .user-sep,
  #user-chip { display: none; }
  .header-right { gap: 6px; flex-shrink: 0; }
  #btn-collect, #btn-logout { padding: 8px 10px; font-size: 13px; }

  /* ── 사이드바: 서랍으로 ── */
  #content-row { display: block; }
  /* 상단바가 본문 칸 안으로 들어가서, 서랍은 화면 맨 위부터 덮는다 */
  #sidebar {
    position: fixed; left: 0; top: 0; z-index: 90;
    width: 264px; max-width: 84vw; height: 100vh;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 2px 0 16px rgba(0, 0, 0, .12);
  }
  body.nav-open #sidebar { transform: none; }
  /* PC의 접힘(.collapsed) 규칙이 서랍 안에서 글자를 지우지 않도록 되돌린다 */
  #sidebar.collapsed { width: 264px; }
  #sidebar.collapsed .side-adv,
  #sidebar.collapsed .nav-label,
  #sidebar.collapsed .nav-caret { display: revert; }
  #sidebar.collapsed .nav-group.open .nav-children { display: revert; }
  #sidebar.collapsed .nav-parent { justify-content: flex-start; padding: 11px 12px; }
  /* 서랍 안에서는 브랜드 블록도 접지 않는다(PC의 .collapsed 규칙을 되돌린다) */
  #sidebar.collapsed .side-brand-block { justify-content: flex-start; padding: 14px 14px 10px; }
  #sidebar.collapsed .side-brand-block .app-name { display: block; }
  /* 서랍 뒤 어두운 막 — 탭하면 닫힌다(app.js에서 처리) */
  #nav-scrim { position: fixed; inset: 0; z-index: 80;
    background: rgba(0, 0, 0, .35); display: none; }
  body.nav-open #nav-scrim { display: block; }
  /* 메뉴를 고르면 바로 닫히므로 터치 영역을 넉넉히 */
  .nav-children button, .nav-parent { min-height: 44px; }

  /* ── 본문 ── */
  main { padding: 12px 12px 72px; }
  .section-title { margin: 20px 0 8px; padding-top: 14px; font-size: 15px; }

  /* 카드: 두 개씩 — 한 줄에 하나면 스크롤이 너무 길어진다 */
  .cards { gap: 8px; }
  .card { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 11px 12px; }
  .card .value { font-size: 19px; }
  .card .label { font-size: 12px; }
  .card .sub { font-size: 11px; white-space: normal; }

  /* 표: 열을 줄이지 않고 가로 스크롤. 첫 열은 붙여 둔다 */
  .table-wrap { -webkit-overflow-scrolling: touch; }
  table { font-size: 12px; }
  th, td { padding: 8px 9px; }
  .table-wrap th:first-child,
  .table-wrap td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--card); box-shadow: 1px 0 0 var(--border);
  }
  /* 고정 열도 본문 표와 같은 톤을 쓴다(theme.css 토큰) — 안 그러면 헤더만 옛 회색으로 남는다 */
  .table-wrap th:first-child { background: var(--c-thead-bg, #fafbfc); z-index: 3; }
  tr:hover td:first-child { background: #F3F7FD; }
  .table-wrap tr.total td:first-child { background: var(--c-thead-bg, #fafbfc); }
  /* 사업자별·브랜드별 정산표는 PC에서 고정 레이아웃이라 모바일에선 풀어준다 */
  #settle-biz-table, #settle-brand-table { table-layout: auto; }
  #settle-biz-table th:first-child,
  #settle-brand-table th:first-child { width: auto; }

  /* ── 필터: 한 줄에 하나씩, 입력은 가로 꽉 ──
     라벨을 flex 줄로 만들어야 .cap의 고정 폭이 먹는다. 이걸 빼면 '조회 월'·'채널'처럼
     글자 수가 다른 라벨마다 입력칸 시작 위치가 어긋난다(2026-08-20 지적). */
  .row-toolbar, .row-toolbar.flt { gap: 8px; }
  .row-toolbar.flt .ctl-label,
  .row-toolbar .ctl-label {
    width: 100%; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  }
  .row-toolbar.flt .ctl-label .cap,
  .row-toolbar .ctl-label .cap { flex: 0 0 5.2em; }
  /* styles.css가 줄의 **첫 라벨만** 3.6em으로 따로 잡아 둔다(PC에서 붙여 놓으려고).
     세로로 쌓이는 모바일에서는 그것 때문에 첫 줄만 입력칸이 왼쪽으로 튀어나온다.
     같은 자릿수로 맞춰 준다 — 선택자 무게가 같아 뒤에 오는 이 규칙이 이긴다. */
  .row-toolbar.flt .ctl-label:first-child .cap,
  .row-toolbar .ctl-label:first-child .cap { flex: 0 0 5.2em; }
  .row-toolbar.flt .ctl-label select,
  .row-toolbar.flt .ctl-label input,
  .row-toolbar .ctl-label select,
  .row-toolbar .ctl-label input { flex: 1; width: auto !important; min-width: 0; }
  .row-toolbar select, .row-toolbar input, .row-toolbar button,
  .flt select, .flt input, .flt button { min-height: 40px; font-size: 14px; }
  .flt .flt-actions { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .flt .flt-actions button { flex: 1 1 auto; }
  .flt-box { padding: 10px 12px; }
  .row-toolbar .spacer { display: none; }      /* 우측 밀어내기는 의미가 없어진다 */

  /* ── 팝업: 화면을 거의 다 쓴다 ── */
  .modal-overlay { align-items: flex-end; }    /* 아래에서 올라오는 시트 형태 */
  .modal-card, .modal-card.wide {
    max-width: 100%; max-height: 92vh; border-radius: 14px 14px 0 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  }
  .modal-actions { position: sticky; bottom: 0; background: var(--card);
    padding-top: 12px; margin-top: 14px; }
  .modal-actions button { flex: 1; min-height: 44px; }

  /* ── 그 밖 ── */
  .ov-charts, .inv-charts { grid-template-columns: 1fr; }
  .hbar-label { flex: 0 0 120px; font-size: 11.5px; }
  .pager { gap: 4px; }
  .pager button { min-width: 38px; min-height: 38px; }
  .form-grid { grid-template-columns: 1fr; }
  #toast { left: 12px; right: 12px; bottom: 12px; text-align: center; }
  .login-card { padding: 24px 18px; }
  /* 로딩 게이지는 작은 화면에서 조금 줄인다 */
  #load-ring .ring-box { width: 84px; height: 84px; }
  #load-ring .pct { font-size: 17px; }
}

/* 아주 좁은 화면(구형 폰) — 카드는 그래도 두 개씩 둔다.
   정산 화면은 카드가 8개까지 나와서 한 줄에 하나면 스크롤이 너무 길어진다.
   대신 글자를 줄여 '1,373,212,650원' 같은 긴 금액도 잘리지 않게 한다. */
@media (max-width: 420px) {
  .card { padding: 10px 11px; }
  .card .value { font-size: 16px; }
  .card .label { font-size: 11.5px; gap: 4px; }
  .card .sub { font-size: 10.5px; }
  #btn-collect { padding: 8px; font-size: 12px; }
}