/* ═══════════════════ HX LF — 모바일 레이어 (≤768px) ═══════════════════ */
.m-only { display: none; }
.m-filterbar { display: none; }
.bottomnav { display: none; }
.sheet-bg {
  position: fixed; inset: 0; background: rgba(16,22,34,.5); z-index: 600;
  display: flex; align-items: flex-end;
}
.sheet {
  background: #fff; border-radius: 18px 18px 0 0; width: 100%;
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
  max-height: 78vh; overflow-y: auto; animation: sheetup .22s ease-out;
}
@keyframes sheetup { from { transform: translateY(40%); opacity: .4; } }
.sheet-grab { width: 42px; height: 4px; border-radius: 2px; background: #d5dbe6; margin: 4px auto 12px; }
.sheet-title { font-size: 14.5px; font-weight: 800; margin-bottom: 12px; }
.sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-bottom: 6px; }
.sheet-grid button {
  border: 1px solid var(--border); background: #fafbfd; border-radius: 12px;
  padding: 14px 6px 11px; font-size: 12px; font-weight: 700; color: var(--text1);
  display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
}
.sheet-grid button span { font-size: 21px; }
.sheet-grid button:active { background: var(--primary-soft); border-color: var(--primary); }

/* 모바일 카드 리스트 */
.mcards { display: flex; flex-direction: column; gap: 9px; padding: 12px 12px 4px; }
.mdate-h {
  display: flex; align-items: baseline; gap: 8px; margin: 8px 2px 0;
  font-size: 13px; font-weight: 800; color: var(--text1);
}
.mdate-h .sub { font-size: 11px; color: var(--text3); font-weight: 600; }
.mdate-h .agg { margin-left: auto; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 12px; color: #fff; }
.mcard {
  border: 1px solid var(--border); border-radius: 12px; background: #fff;
  padding: 11px 13px; cursor: pointer;
}
.mcard:active { background: #fbfcfe; }
.mcard .mc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; }
.mcard .mc-fno { font-size: 14.5px; font-weight: 800; }
.mcard .mc-time { font-size: 11px; color: var(--text3); font-weight: 600; }
.mcard .mc-lf { margin-left: auto; }
.mcard .mc-bar { position: relative; height: 17px; background: #edf1f7; border-radius: 5px; overflow: hidden; margin-bottom: 8px; }
.mcard .mc-bar > i { position: absolute; left: 0; top: 0; bottom: 0; }
.mcard .mc-bar > b { position: absolute; inset: 0; font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; color: #26303f; }
.mcard .mc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 8px; }
.mcard .mc-cell { text-align: center; }
.mcard .mc-cell .l { font-size: 9.5px; color: var(--text3); font-weight: 700; }
.mcard .mc-cell .v { font-size: 13px; font-weight: 800; }
.mcard .mc-cell .v .delta { display: block; margin-top: 1px; font-size: 10px; padding: 0 4px; }
.mcard .mc-foot { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; align-items: center; }

/* 모바일 대시보드 — 노선·편명 요약 컴팩트 리스트 */
.fsum { display: flex; flex-direction: column; }
.fsum-row { padding: 10px 13px; border-bottom: 1px solid #f1f4f8; }
.fsum-row:last-child { border-bottom: none; }
.fsum-row.tot { background: #f8fafd; }
.fsum-row .fs-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fsum-row .fs-top > b { font-size: 13.5px; }
.fsum-row .fs-bar { position: relative; height: 15px; background: #edf1f7; border-radius: 4px; overflow: hidden; margin-bottom: 5px; }
.fsum-row .fs-bar > i { position: absolute; left: 0; top: 0; bottom: 0; }
.fsum-row .fs-bar > b { position: absolute; inset: 0; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; color: #26303f; }
.fsum-row .fs-sub { font-size: 11px; color: var(--text2); }
.fsum-row .fs-sub b { font-weight: 800; color: var(--text1); }

/* 모바일 월별 요약 — 월 섹션 카드 */
.msum { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.msum-month { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.msum-month.tot { border-color: var(--border-2); background: #f8fafd; }
.msum-h {
  display: flex; align-items: center; gap: 8px; padding: 10px 13px 2px;
}
.msum-h .mname { font-size: 14.5px; font-weight: 800; }
.msum-sub { padding: 0 13px 9px; font-size: 11px; color: var(--text2); border-bottom: 1px solid #f1f4f8; }
.msum-sub b { font-weight: 800; color: var(--text1); }
.msum-month.tot .msum-sub { border-bottom: none; }

/* 모바일 클래스 분석 — 카드 + 100% 폭 누적 막대 */
.clsm { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.clsm-card { border: 1px solid var(--border); border-radius: 12px; background: #fff; padding: 11px 13px; }
.clsm-card:first-child, .clsm-card.tot { background: #f8fafd; border-color: var(--border-2); }
.clsm-card.clickable { cursor: pointer; }
.clsm-card.clickable:active { background: var(--primary-soft); }
.clsm-h { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; font-size: 13.5px; }
.sbar { display: flex; height: 18px; border-radius: 5px; overflow: hidden; background: #edf1f7; margin-bottom: 8px; }
.sbar i { display: block; height: 100%; min-width: 1px; }
.clschips { display: flex; flex-wrap: wrap; gap: 5px; }
.clschip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700;
  color: var(--text2); background: #f4f6fa; border-radius: 12px; padding: 2px 8px 2px 5px;
}
.clschip i { width: 8px; height: 8px; border-radius: 3px; display: inline-block; }
.clschip b { font-weight: 800; color: var(--text1); }
.clschip small { font-size: 8.5px; color: var(--grp); font-weight: 800; margin-left: 1px; }

/* 모바일 캘린더(아젠다) */
.magenda { display: flex; flex-direction: column; gap: 10px; }
.magenda .day { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.magenda .day.today { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.magenda .day-h { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #f7f9fc; border-bottom: 1px solid var(--border); font-size: 12.5px; font-weight: 800; }
.magenda .day-h .agg { margin-left: auto; color: #fff; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 12px; }
.magenda .fl { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 12px; border-bottom: 1px solid #f1f4f8; cursor: pointer; }
.magenda .fl:last-child { border-bottom: none; }
.magenda .fl .fn { font-weight: 800; width: 58px; }
.magenda .fl .tm { color: var(--text3); font-size: 10.5px; width: 40px; }
.magenda .fl .b2 { flex: 1; height: 13px; border-radius: 4px; background: #edf1f7; position: relative; overflow: hidden; }
.magenda .fl .b2 > i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; }
.magenda .fl .v { width: 44px; text-align: right; font-weight: 800; font-size: 11.5px; }

@media (max-width: 768px) {
  /* 페이지 자체는 절대 좌우로 밀리지 않는다 — 가로 스크롤은 표/차트 내부에서만 */
  html, body { overflow-x: hidden; max-width: 100%; overscroll-behavior-x: none; }
  .tbl-wrap, .chart { overscroll-behavior-x: contain; }
  body { font-size: 13px; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .m-only { display: block; }

  /* 상단바 컴팩트 */
  .topbar { padding: 10px 14px; gap: 8px; }
  .topbar .sub { display: none; }
  .topbar .logo { font-size: 16px; }
  .topbar .logo .hx { font-size: 13px; padding: 2px 6px; }
  #snap-badge { display: none !important; }
  #user-badge { padding: 4px 10px; font-size: 11px; }
  .tb-btn { padding: 5px 9px; font-size: 11px; }
  #btn-lang { width: 74px; height: 27px; padding: 0; font-size: 10.5px; }
  #btn-pw { display: none; }

  /* 상단 탭 숨김 → 하단 내비 사용 */
  .tabbar { display: none; }

  /* 모바일 필터바 */
  .m-filterbar {
    display: flex; align-items: center; gap: 8px; background: #fff;
    border-bottom: 1px solid var(--border); padding: 8px 14px;
  }
  .m-snap { font-size: 12px; font-weight: 700; color: var(--text2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-filter-btn {
    border: 1px solid var(--border-2); background: #fff; border-radius: 18px;
    padding: 6px 14px; font-size: 12px; font-weight: 800; color: var(--text1); cursor: pointer;
    display: flex; align-items: center; gap: 6px;
  }
  .m-filter-count {
    background: var(--primary); color: #fff; border-radius: 10px; font-size: 10px;
    min-width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
  }

  /* 필터 → 바텀시트 */
  .filters {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 700;
    margin: 0; border-radius: 18px 18px 0 0; border: none;
    box-shadow: 0 -8px 40px rgba(0,0,0,.25);
    padding: 10px 18px calc(20px + env(safe-area-inset-bottom));
    max-height: 80vh; overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 12px;
  }
  body.filters-open .filters { display: flex; animation: sheetup .22s ease-out; }
  body.filters-open::after { content: ''; position: fixed; inset: 0; background: rgba(16,22,34,.5); z-index: 650; }
  .fld { width: 100%; }
  .fld select, .fld input { width: 100%; min-width: 0; padding: 10px 12px; font-size: 14px; }
  .date-en { width: 100%; }
  .date-en .date-ph { left: 13px; font-size: 14px; }
  .seg.sm { width: 100%; }
  .seg.sm button { flex: 1; padding: 9px 4px; }
  #btn-apply, #btn-reset { width: 100%; padding: 12px; font-size: 14px; }

  .wrap { padding: 12px 10px 30px; }

  /* KPI 2열 — 첫 카드(전체 탑승률)는 히어로로 전체 폭 */
  .kpis { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .kpi { padding: 10px 12px; }
  .kpi .k-label { font-size: 10.5px; margin-bottom: 3px; }
  .kpi .k-val { font-size: 19px; }
  .kpi .k-sub { font-size: 10px; margin-top: 3px; }
  #dash-kpis .kpi:first-child { grid-column: 1 / -1; }
  #dash-kpis .kpi:first-child .k-val { font-size: 27px; }

  .card { margin-bottom: 12px; border-radius: 12px; }
  .card-h { padding: 10px 13px; gap: 7px; }
  .card-h h2 { font-size: 13.5px; }
  .card-h .hint { display: none; }
  .card-b { padding: 12px 13px; }
  .grid2, .grid3 { gap: 12px; }

  /* 표는 가로 스크롤 유지 + 컴팩트 */
  table.grid { font-size: 11.5px; }
  table.grid th, table.grid td { padding: 6px 7px; }
  .tbl-wrap { max-height: 64vh; -webkit-overflow-scrolling: touch; }

  /* 하단 내비 */
  .bottomnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
    background: #fff; border-top: 1px solid var(--border);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 12px rgba(20,30,60,.08);
  }
  .bottomnav .bn {
    flex: 1; border: none; background: transparent; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    font-size: 10px; font-weight: 700; color: var(--text3); padding: 5px 0 3px;
    border-radius: 10px;
  }
  .bottomnav .bn .bn-ico { font-size: 19px; line-height: 1.15; filter: grayscale(1) opacity(.55); }
  .bottomnav .bn.active { color: var(--primary); }
  .bottomnav .bn.active .bn-ico { filter: none; }

  /* 모달 → 하단 시트
     주소창·노치(상태바)를 뺀 실제 보이는 높이만 사용 → 상단 닫기 버튼이 절대 가려지지 않음 */
  .modal-bg { padding: 0; align-items: flex-end; }
  .modal {
    max-height: calc(100vh - 76px);
    max-height: calc(100dvh - max(env(safe-area-inset-top), 12px) - 44px);
    border-radius: 18px 18px 0 0;
  }
  .modal.sm { max-width: 100%; }
  .modal-h { padding: 11px 14px; }
  .modal-h h3 { font-size: 14px; padding-right: 4px; }
  /* 닫기 버튼: 엄지로 누르기 쉽게 크게 + 스크롤해도 항상 상단 고정(sticky 헤더) */
  .modal-h .modal-close { padding: 9px 18px; font-size: 13.5px; flex-shrink: 0; }
  .modal-b { padding: 14px 14px calc(16px + env(safe-area-inset-bottom)); }
  .frm .row { grid-template-columns: 1fr; }

  .cal-nav { flex: 1; justify-content: center; }
  /* 월별 요약: 모바일 카드가 모든 지표를 표시하므로 지표 토글 숨김 */
  #month-metric { display: none; }
  .drop { padding: 26px 14px; }
  .up-stage-h { flex-wrap: wrap; }
  .up-stage-h .btn.primary { flex: 1 1 100%; padding: 12px; font-size: 14px; }
  .up-item.stage b { word-break: break-all; }
  #toast { left: 12px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); }
  .toast { max-width: none; }
  .login-card { padding: 30px 24px; }
}
@media (max-width: 380px) {
  .kpi .k-val { font-size: 17px; }
}