/* 無料にした一般アプリの枠。アプリの下端の切り替えは画面に固定で置かれるため、
   枠に transform を掛けて、固定の部品が枠の下端に付くようにする。中身は枠の中で縦に送る */
.tool.app { padding: 0; overflow: hidden; gap: 0; }
.app-frame {
  position: relative;
  transform: translateZ(0);
  height: min(820px, calc(100dvh - 32px));
  min-height: 480px;
  overflow: hidden;
  background: #fff;
}
.app-scroll { height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
.app-root { height: 100%; }
/* アプリは画面の高さいっぱいを前提に作られている。枠の高さに合わせる */
.app-frame [style*="min-height: 100vh"], .app-frame .pt-app, .app-frame .sb { min-height: 100% !important; }
.app-root > div { min-height: 100%; }

/* 映す画面は、枠を画面いっぱいに広げる */
.app-frame.wide { position: fixed; inset: 0; z-index: 1000; height: auto; min-height: 0; border-radius: 0; }
html.app-wide, html.app-wide body { overflow: hidden; }

.app-loading, .app-message { padding: 24px 20px; color: var(--muted); }
.app-message { color: var(--bad); }
.app-note { margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--warn-soft); color: var(--warn); font-size: 14px; }

@media (max-width: 560px) {
  .app-frame { height: calc(100dvh - 16px); }
}
@media print {
  .app-frame { height: auto; overflow: visible; transform: none; }
  .app-scroll { height: auto; overflow: visible; }
}