/* 本番の画面：試作品の見た目（app.css・v20.css）を、端末の画面いっぱいに出す */
html, body { height: 100%; margin: 0; background: #dfe5ec; }
#app { height: 100%; }
.ph.app { width: 100%; max-width: 560px; height: 100%; height: 100dvh; margin: 0 auto; border-radius: 0; box-shadow: none; }
.ph.app .a-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ph.app .a-top { padding-top: calc(.6em + env(safe-area-inset-top, 0px)); }
.ph.app .a-foot { padding-bottom: calc(.9em + env(safe-area-inset-bottom, 0px)); }
input.a-in, textarea.a-in, select.a-in { display: block; width: 100%; box-sizing: border-box; border: 0; font: inherit; color: inherit; outline: none; }
input.a-in:focus, textarea.a-in:focus, select.a-in:focus { box-shadow: inset 0 0 0 2px #1f5fa8; }
input.a-in:disabled, textarea.a-in:disabled { background: #eef1f5; box-shadow: none; color: #44505e; opacity: 1; -webkit-text-fill-color: #44505e; }
textarea.a-in { resize: vertical; min-height: 4.2em; }
.tm2 { display: flex; gap: .5em; align-items: center; }
.tm2 > input { flex: 1; }
.u-row { display: flex; gap: .5em; align-items: center; }
.u-row > input { flex: 1; min-width: 0; }
.u-row > .unit { flex: none; min-width: 2.6em; }
.u-row > .a-btn { flex: none; width: auto; padding-left: .8em; padding-right: .8em; }
.photo img { width: 100%; border-radius: .5em; display: block; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[data-go], [data-act] { cursor: pointer; }
[role="button"]:focus-visible, .a-btn:focus-visible { outline: 3px solid #1f5fa8; outline-offset: 2px; }
.obs { background: #fff; border-radius: .6em; padding: .2em .9em .9em; margin-bottom: .6em; }
.toast { pointer-events: none; }
/* 承認者の画面：横幅1024以上は一覧と内容を左右に並べる（SP153） */
.split { display: flex; height: 100%; height: 100dvh; max-width: 1440px; margin: 0 auto; gap: 1px; background: #c9d2dc; }
.split > .ph.app { max-width: none; margin: 0; }
.split > .ph.app:first-child { flex: 0 0 420px; }
.split > .ph.app:last-child { flex: 1 1 auto; }
.a-detail .a-list { margin: .3em 0 .6em; }
select.a-in { appearance: auto; background: #fff; padding: .7em .8em; border-radius: .5em; }
.fixrow { margin: .6em 0; } .fixrow .a-btn { width: 100%; }
.fail-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4em 1.4em; padding: 0 .9em .8em; background: #fff; }
.fail-acts .lnk { min-height: 44px; display: inline-flex; align-items: center; }
/* 第3段階：月次の処理・帳票の閲覧・本人確認は、横幅1024以上で一覧と内容を左右に並べる（SP153） */
.mgrid { display: block; }
@media (min-width: 1024px) {
  .ph.app[data-sid="G16"], .ph.app[data-sid="G17"], .ph.app[data-sid="G20"] { max-width: 1200px; }
  .mgrid { display: grid; grid-template-columns: minmax(320px, 400px) 1fr; gap: 1em; align-items: start; }
}
.mtable { overflow-x: auto; background: #fff; border-radius: .7em; margin-bottom: .7em; }
.mtable table { border-collapse: collapse; width: 100%; font-size: .85em; }
.mtable th, .mtable td { border-bottom: 1px solid #e3e8ee; padding: .4em .55em; text-align: left; white-space: nowrap; }
.mtable th { background: #f5f7fa; font-weight: 700; color: #44505e; }
.mtable tr.off td:nth-child(-n+2) { color: #a52a1f; }
.mtable tfoot td { font-weight: 700; border-bottom: 0; }
.datepick { display: flex; align-items: stretch; background: #fff; border-bottom: 1px solid #edf0f4; }
.datepick .chk { flex: 0 0 auto; border-bottom: 0; }
.datepick .a-item { flex: 1 1 auto; border-bottom: 0; }
.pres-mark { position: sticky; top: 0; }
.gap6 { height: .6em; }
/* 運営指導の提示の間は、印刷しても中身を出さない（SP124） */
@media print { .ph.app[data-sid="G19"] .a-body, .ph.app[data-sid="G19"] .a-foot { visibility: hidden; } }