/* 📱 보고서·모달 — 핸드폰 화면 (2026-10-08). mobile-v1.css 뒤에 읽힌다. mobile-v1.js 가 표 칸에 data-label 을 달아 준다.
   폭 768px 이하: 모달은 전체 화면, 보고서 표는 «항목명 + 값» 카드 목록으로 바뀐다. */
@media (max-width:768px){
  /* ── 모달 = 전체 화면 ── */
  .modal-bg{padding:0;align-items:stretch}
  .modal,.modal.wide{max-width:none;max-height:none;height:100%;border:0;border-radius:0;box-shadow:none}
  .modal-h{padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px;position:sticky;top:0;z-index:3;background:var(--bg2);align-items:center}
  .modal-t{font-size:15px}
  .modal-s{font-size:11.5px;line-height:1.5}
  .modal-x{min-width:44px;min-height:40px}
  .modal-b{padding:12px;-webkit-overflow-scrolling:touch}
  .modal-f{padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))}
  .rep-foot{flex-direction:column;align-items:stretch;gap:8px;font-size:11px;line-height:1.5}
  .rep-foot-b{display:grid;grid-template-columns:1fr 1fr}

  /* 가로 스크롤 방지 — 안쪽 내용 폭이 창을 밀어내지 못하게 */
  .modal,.modal-h>*,.modal-b,.modal-b>*,.rep-bar>*,.rep-sec,.stats>*{min-width:0;max-width:100%}
  .modal-b{overflow-x:hidden;overflow-y:auto}
  .modal-h>div:first-child{min-width:0;overflow-wrap:anywhere}
  .stats .st-v{overflow-wrap:anywhere}

  /* ── 조회 줄 ── */
  .rep-bar{gap:8px}
  /* 기간 버튼 — 옆으로 밀지 않고 3칸 격자로 줄바꿈 */
  .rep-pre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%}
  .rep-pre .tf-btn{white-space:nowrap;padding:7px 4px}
  .rep-f{flex:1 1 calc(50% - 4px);min-width:0;font-size:11px}
  .rep-bar>.btn-sm{flex:1 1 100%}
  .rep-sec-t{font-size:11px}
  .rep-msg{font-size:12px}
  .stats .st{padding:10px}

  /* ── 표 = 한 날(한 행) 한 줄. 칸이 많으면 표 안에서 옆으로 밀고, 일자 칸은 왼쪽에 붙어 따라온다 ── */
  .modal .rep-scroll{border:1px solid var(--border);border-radius:8px;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}
  .modal .rep-scroll .tbl{display:table;width:max-content;min-width:100%;border-collapse:collapse}
  .modal .rep-scroll .tbl th,.modal .rep-scroll .tbl td{padding:7px 8px;font-size:11.5px;line-height:1.3;white-space:nowrap;border-bottom:1px solid var(--border)}
  .modal .rep-scroll .tbl th:first-child,.modal .rep-scroll .tbl td:first-child{position:sticky;left:0;z-index:1;background:var(--bg2);box-shadow:1px 0 0 var(--border)}
  .modal .rep-scroll .tbl tfoot td{background:var(--bg3);font-weight:700}
  .modal .rep-scroll .tbl tfoot td:first-child{background:var(--bg3)}
  /* 내 정보 등 키-값 줄 */
  .modal-b .mi-note{font-size:11.5px;line-height:1.55}
}