:root {
  --app-shell-max: 780px;
}

/*
 * 모바일 우선의 밀도롤 폭을 유지하고, 넓은 화면에서는 780px 앱 캔버스로 중앙한다.
 * 이 파일을 가장 나중에 불러와 모달·고정 요소로 하나만을 따르게 맞추는
 * 공통 레이어로 둔다.
 */
.home-app,
.stats-app,
.section-app,
.column-app,
.transactions-app,
.app-shell {
  width: 100%;
  max-width: var(--app-shell-max);
  margin-left: auto;
  margin-right: auto;
}

.global-bottom-nav,
.bottom-nav,
.transaction-sheet,
.bottom-sheet {
  width: 100%;
  max-width: var(--app-shell-max);
}

.history-head,
.account-state,
.history-list,
.history-tabs,
.admin-shell {
  max-width: var(--app-shell-max);
}

/* 딜체크 로드뷰는 앱 폭ᄀᄘ해서 벗어나지 않도로 중앙 제한한다. */
.roadview-panel {
  left: 50%;
  right: auto;
  width: min(calc(100% - 16px), calc(var(--app-shell-max) - 16px));
  transform: translateX(-50%);
}

@media (min-width: 768px) {
  .home-app,
  .stats-app,
  .section-app,
  .column-app,
  .transactions-app,
  .app-shell {
    border-left: 1px solid rgba(25, 58, 43, .06);
    border-right: 1px solid rgba(25, 58, 43, .06);
    box-shadow: 0 0 34px rgba(25, 58, 43, .06);
  }

  /* 태블릿에서도 하단 메누는 플로팅하지 않고 화면 바닥에 고정한다. */
  .global-bottom-nav,
  .bottom-nav {
    bottom: 0;
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
  }

  .global-bottom-nav {
    height: calc(66px + env(safe-area-inset-bottom));
    padding: 6px 7px calc(5px + env(safe-area-inset-bottom));
  }

  .global-nav-reveal {
    bottom: 0;
  }

  .transaction-sheet {
    bottom: 0;
    border-bottom: 0;
    border-radius: 25px 25px 0 0;
  }

  /* 딜체크 시트도 화면 바닥에 붙이고, 기본 결과 단계는 화면의 약 1/3만 덮는다. */
  body[data-nav="checker"] .bottom-sheet {
    bottom: 0;
    border-bottom: 0;
    border-radius: 26px 26px 0 0;
  }

  body[data-nav="checker"] .bottom-sheet.sheet-peek:not(.sheet-user-sized) {
    height: 150px;
  }

  body[data-nav="checker"] .bottom-sheet.sheet-half:not(.sheet-user-sized),
  body[data-nav="checker"] .bottom-sheet.sheet-focus:not(.sheet-user-sized) {
    height: min(34dvh, 360px);
  }
}

/*
 * 이전의 900px 데스크톱 대시보드 시트 레이아웃을 해제하고 우측 패널을 오른쪽에 두었다.
 * 앱 이하에서도 모바일과 같은 중앙 바텀시트 패턴을 유지한다.
 */
@media (min-width: 900px) {
  /* 두 지도 화면은 바텀시트가 메뉴를 display:none 처리하므로, 데스크톱
     하단 롤오버로 연 동안만 공통 메뉴 레이어를 다시 표시한다. */
  body[data-nav="checker"].nav-hover-visible .global-bottom-nav,
  body[data-nav="transactions"].nav-hover-visible .global-bottom-nav {
    display: grid !important;
    z-index: 100 !important;
  }

  body[data-nav="transactions"] .transaction-sheet.sheet-half {
    height: min(34dvh, 360px);
  }

  body[data-nav="checker"] .topbar {
    right: 0;
  }

  body[data-nav="checker"] .search-loader {
    right: 0;
  }

  body[data-nav="checker"] .map-tools {
    position: absolute;
    top: calc(60px + env(safe-area-inset-top));
    right: 12px;
    width: 40px;
    height: auto;
    flex-direction: column;
    border-radius: 12px;
  }

  body[data-nav="checker"] .map-tool {
    width: 40px;
    height: 40px;
  }

  body[data-nav="checker"] .map-tool + .map-tool {
    border-top: 1px solid rgba(29, 58, 44, .1);
    border-left: 0;
  }

  body[data-nav="checker"] .first-title {
    left: 50%;
  }

  body[data-nav="checker"] .map-credit {
    left: auto;
    right: 14px;
    bottom: 156px;
    text-align: right;
  }

  body[data-nav="checker"] .map-credit .cl-a,
  body[data-nav="checker"] .map-credit .cl-b {
    display: block;
  }

  body[data-nav="checker"] .map-credit .cl-b::before {
    content: none;
  }

  body[data-nav="checker"] .bottom-sheet {
    left: 50%;
    right: auto;
    bottom: 0;
    width: 100%;
    max-width: var(--app-shell-max);
    border-bottom: 0;
    border-radius: 26px 26px 0 0;
    transform: translateX(-50%);
  }

  body[data-nav="checker"] .bottom-sheet.sheet-peek:not(.sheet-user-sized) {
    height: 150px;
  }

  body[data-nav="checker"] .bottom-sheet.sheet-half:not(.sheet-user-sized) {
    height: min(34dvh, 360px);
  }

  body[data-nav="checker"] .bottom-sheet.sheet-focus:not(.sheet-user-sized) {
    height: min(34dvh, 360px);
  }

  body[data-nav="checker"] .bottom-sheet.sheet-full:not(.sheet-user-sized) {
    height: calc(100dvh - 64px - env(safe-area-inset-top));
  }
}

@media (max-width: 430px) {
  .home-app,
  .stats-app,
  .section-app,
  .column-app,
  .transactions-app,
  .app-shell,
  .global-bottom-nav,
  .bottom-nav,
  .transaction-sheet,
  .bottom-sheet {
    max-width: none;
  }
}

/* 홈은 자체적으로 하단 메뉴 높이만큼 여백을 둔다. body에도 같은 여백을
   더하면 iPhone에서 페이지 끝이 길어져 마지막 카드가 상태바 밑까지 올라간다. */
@media (max-width: 767px) {
  body[data-nav="home"].has-global-nav { padding-bottom: 0; }
  body[data-nav="home"] .home-app {
    min-height: 100dvh;
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
  }
}