/* =========================================================
   /statistics (사용내역) 모바일 전용 최종본
   목표:
   - 하단 파란 띠(비침) 제거: body padding-bottom 사용 금지
   - 상단 흰 줄 제거: 상단은 ‘컨테이너 그라데이션’이 항상 덮게
   - 기기별(아이폰/아이패드/안드) 높이 차에도 안정적으로 동작
   ========================================================= */

@media (max-width: 860px){

  /* 0) iOS 가로 삐져나옴 방지 */
  html, body{
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  /* 1) 통계 페이지 테마 프레임(가로 제한/여백) 제거 */
  .layout-body,
  .content-wrap,
  .content-inner,
  .content-main{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* 2) 상단 테마/기존 푸터 숨김 (통계 페이지에서만, 이 CSS는 /statistics에서만 로드되므로 안전) */
  #mobileNav,
  .mobile-nav,
  header.navbar.js-header,
  .page-header,
  .status-bar,
  .footer-info,
  .mobile-footer-info,
  .mobile-footer{
    display: none !important;
  }

  /* 3) 모바일에서는 PC 통계 DOM을 숨기고, 우리가 만든 모바일 UI만 보이게 */
  #statistics-area,
  #header_area,
  #chart_and_orders_area,
  #items_top_best_seller{
    display: none !important;
  }
  #peakHistoryMobile{
    display: block !important;
  }

  /* 4) 하단바 고정 + spacer 제거 */
  :root{
    --peak-bottomnav-h: 97px;
  }

  .peak-bottomnav{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    transform: translateZ(0) !important;
  }

  .peak-bottomnav-spacer{
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ★ 핵심: body에 padding-bottom 주면 “그 padding 영역의 배경”이 비쳐서 파란 띠가 생김 */
  body{
    padding-bottom: 0 !important;
  }

  /* 5) 페이지 프레임: 위는 파란 영역, 아래는 흰 본문이 ‘끝까지’ 채우게 */
  #peakHistoryMobile,
  #peakHistoryMobile .peak-history{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  #peakHistoryMobile .peak-history{
    /* 모바일 주소창/기기별 높이 차 안정화 */
    min-height: 100vh !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;

    display: flex !important;
    flex-direction: column !important;

    /* 상단 흰 줄 방지: 컨테이너 자체 배경을 파란 그라데이션으로 */
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  }

  /* 6) Appbar (사용내역 타이틀/뒤로가기) */
  #peakHistoryMobile .peak-charge__appbar{
    flex: 0 0 auto !important;

    min-height: 72px !important;
    padding: calc(38px + env(safe-area-inset-top)) 16px 14px !important;

    display: grid !important;
    grid-template-columns: 40px 1fr 40px !important;
    align-items: center !important;
    justify-items: center !important;

    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  }

  #peakHistoryMobile .peak-charge__back{
    grid-column: 1 !important;
    justify-self: start !important;

    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;

    border: 1px solid rgba(255,255,255,.35) !important;
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 18px !important;
    line-height: 1 !important;
    padding: 0 !important;
  }

  #peakHistoryMobile .peak-charge__title{
    grid-column: 2 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #fff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-align: center !important;

    pointer-events: none !important;
  }

  /* 7) Tabs (최근 주문 / 요약) */
  #peakHistoryMobile .peak-charge__tabs{
    flex: 0 0 auto !important;

    display: flex !important;
    gap: 8px !important;

    padding: 10px 16px 14px !important;
    background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,.18) !important;
  }

  #peakHistoryMobile .peak-charge__tab{
    flex: 1 1 0 !important;
    height: 40px !important;

    border-radius: 14px !important;
    background: rgba(255,255,255,.14) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    color: #fff !important;

    text-decoration: none !important;
    white-space: nowrap !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 14px !important;
    font-weight: 900 !important;
  }

  #peakHistoryMobile .peak-charge__tab.is-active{
    background: rgba(255,255,255,.24) !important;
    border-color: rgba(255,255,255,.40) !important;
  }

  /* 8) 본문: 흰 영역이 ‘남는 높이’를 끝까지 채우고, 스크롤은 여기서만 */
  #peakHistoryMobile .peak-charge__body{
    flex: 1 1 auto !important;
    min-height: 0 !important; /* iOS flex 스크롤 버그 방지 */

    background: #fff !important;
    border-top-left-radius: 18px !important;
    border-top-right-radius: 18px !important;

    padding: 12px 16px 0 !important;

    /* 하단바에 가리지 않게: “body가 아니라” 본문에만 패딩 */
    padding-bottom: calc(var(--peak-bottomnav-h) + env(safe-area-inset-bottom) + 12px) !important;

    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  /* 9) 탭 pane 토글 */
  .peak-stats-pane{ display: none !important; }
  .peak-stats-pane.is-active{ display: block !important; }

  /* 10) 카드 UI */
  .peak-history-loading{
    padding: 16px;
    text-align: center;
    color: #64748b;
    font-weight: 700;
  }

  .peak-history-section{ margin-top: 4px; }

  .peak-history-section__title{
    font-size: 13px;
    font-weight: 900;
    color: #64748b;
    margin: 10px 2px 8px;
  }

  .peak-history-card{
    background: #fff;
    border: 1px solid rgba(2,6,23,.08);
    border-radius: 14px;
    padding: 14px;
  }
  .peak-history-card + .peak-history-card{ margin-top: 10px; }

  .peak-history-card__top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }
  .peak-history-card__title{ font-weight: 900; }
  .peak-history-card__badge{
    font-weight: 900;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #0b57d0;
    white-space: nowrap;
  }

  /* 10-1) 최근주문 드롭다운 */
  .peak-history-card[data-status-key]{
    cursor: pointer;
  }
  .peak-history-drop{
    display: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(2,6,23,.08);
  }
  .peak-history-card.is-open .peak-history-drop{
    display: block;
  }
  .peak-order-empty{
    color: #64748b;
    font-weight: 700;
    font-size: 13px;
    padding: 6px 0;
  }
  .peak-order-item{
    padding: 10px 0;
    border-bottom: 1px dashed rgba(2,6,23,.10);
  }
  .peak-order-item:last-child{
    border-bottom: 0;
  }
  .peak-order-item .t{
    font-weight: 900;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.25;
  }
  .peak-order-item .s{
    margin-top: 4px;
    color: #64748b;
    font-weight: 700;
    font-size: 12px;
  }
  .peak-order-link{
    display: inline-block;
    margin-top: 10px;
    font-weight: 900;
    color: #2563eb;
    text-decoration: none;
  }

  /* 10-2) 누락 라벨 디버그 바(모바일 전용) */
  .peak-history-debug{
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--peak-bottomnav-h) + env(safe-area-inset-bottom) + 10px);
    z-index: 9998;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(2,6,23,.12);
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(8px);
  }
  .peak-history-debug__txt{
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    font-weight: 800;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .peak-history-debug__hide{
    flex: 0 0 auto;
    border: 1px solid rgba(2,6,23,.12);
    background: #f8fafc;
    color: #0f172a;
    font-weight: 900;
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 12px;
  }

  .peak-history-card__row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    gap: 10px;
  }
  .peak-history-card__row .k{
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
  }
  .peak-history-card__row .v{ font-weight: 800; }
  .peak-history-card__row .v.strong{ font-size: 16px; }

  /* 11) 하단바 active 표시(내역) */
  .peak-bottomnav .peak-tab.is-active,
  .peak-bottomnav .peak-tab[data-panel="history"].is-active{
    color: #2563eb !important;
    font-weight: 800 !important;
  }
  .peak-bottomnav .peak-tab.is-active .peak-ico,
  .peak-bottomnav .peak-tab.is-active .peak-label{
    color: #2563eb !important;
  }
  .peak-bottomnav .peak-tab:not(.is-active){
    color: rgba(15, 23, 42, .55) !important;
    font-weight: 600 !important;
  }
  .peak-bottomnav .peak-tab:not(.is-active) .peak-ico,
  .peak-bottomnav .peak-tab:not(.is-active) .peak-label{
    color: rgba(15, 23, 42, .55) !important;
  }
}

@media (min-width: 861px){
  #peakHistoryMobile{ display: none !important; }
}