/* 本番用のレイアウト調整。
* プロトタイプは1枚のHTMLの中にスマホの枠（.phone / .screen / タブ）を描いてデモしていた。
* 本番ではページそのものがスマホの画面になるため、その枠のぶんだけをここで置き換える。
* app.css（プロトタイプからの移植）は書き換えず、差分だけをこのファイルに置く。
*/
html, body { height: 100%; }
body {
background: var(--stage);
/* ページ自体はスクロールさせない。スクロールするのは中の .scroll だけ。
これが無いと、iOSでツールバーの高さぶんだけページ全体がずれ、
上部のバーが隠れ、下の合計バーが画面の外に出る。 */
overflow: hidden;
overscroll-behavior: none;
}
/* プロトタイプの .screen に相当する箱。
【iOS対策】高さを 100dvh で指定すると、ツールバーの出入りで画面の高さが変わり、
ページ全体が動いてしまう。位置を固定して、常に見えている範囲いっぱいに収める。 */
.app-shell {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin-inline: auto;
max-width: 440px;
background: var(--bg);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* 中身がはみ出しても、押し出されずに縮む（下の合計バーを守る） */
.app-shell > #app { flex: 1 1 auto; min-height: 0; }
.app-shell > #footer { flex: 0 0 auto; }
@media (max-width: 480px) {
.app-shell { max-width: none; }
}
/* 全ページ共通の上部バー（スタメニのロゴ）。
端末のセーフエリア（画面上部の切り欠き）はここで吸収する。 */
.appbar {
flex: 0 0 auto;
display: flex;
align-items: center;
/* 左端は見出し（.apphead / .staffhead の padding 18px）に合わせる */
padding: calc(10px + env(safe-area-inset-top)) 18px 6px;
background: var(--bg);
}
.appbar-logo {
height: 20px;
width: auto;
display: block;
flex: 0 0 auto;
}
/* ロゴの横に並べる画面名。見出し（h2）と同じ書体で、少し小さくする。 */
.appbar-title {
font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
font-size: 1rem;
font-weight: 700;
letter-spacing: .05em;
color: var(--ink);
margin: 0 0 0 10px;
padding-left: 10px;
border-left: 1px solid var(--line);
line-height: 1.2;
}
/* 上部の余白: プロトタイプはノッチを避けるため 42px 空けていた。
本番では上のバーがその役目を持つので、見出し側は詰める。 */
.apphead, .backrow, .staffhead { padding-top: 10px; }
/* 動作確認ページ（開発用・本番では出さない） */
.status-wrap { padding: 24px 18px 40px; }
.status-wrap h1 { font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; font-size: 1.3rem; margin-bottom: 4px; }
.status-wrap table { width: 100%; border-collapse: collapse; margin: 10px 0 18px; background: var(--card); border-radius: var(--r-md); overflow: hidden; }
.status-wrap th, .status-wrap td { padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: .82rem; text-align: left; }
.status-wrap td:last-child, .status-wrap th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.status-wrap tr:last-child th, .status-wrap tr:last-child td { border-bottom: 0; }
.status-wrap code { background: #EFEDE7; padding: 2px 6px; border-radius: 6px; font-size: .78rem; word-break: break-all; }
.status-wrap .ok { color: var(--green); font-weight: 700; }
.status-wrap .ng { color: var(--danger); font-weight: 700; }
/* 変更履歴の折りたたみ（）を、プロトタイプの「詳しく見る」ボタンと同じ見た目にする */
summary.morebtn { list-style: none; cursor: pointer; }
summary.morebtn::-webkit-details-marker { display: none; }
details[open] > summary.morebtn .arr { transform: rotate(180deg); }
/* 通知メッセージ（トースト）。
プロトタイプではスマホの枠（.screen）の中に置かれていたため position:absolute だったが、
本番では枠がないため画面の外（ページ末尾）に飛んでしまう。画面に固定する。 */
.toast { position: fixed; }
/* ここから: プロトタイプが