/* テンプレートの style="..." を写したユーティリティ。2026-07-31。
   CSPで style-src から 'unsafe-inline' を外すため、属性での指定をやめた。
   名前は新規なので既存のセレクタとは衝突しない。 */

.u1{margin-top:.6rem}   /* 使用5箇所 */
.u2{margin-top:.8rem}   /* 使用4箇所 */
.u3{background:#eafaef;border:1px solid #a8dcb8;color:#1a7a3a;padding:.6rem 1rem;border-radius:6px}   /* 使用3箇所 */
.u4{font-size:1.1rem}   /* 使用3箇所 */
.u5{display:inline}   /* 使用2箇所 */
.u6{background:#fdeef3;border:1px solid #e3a8be;color:#a0355e;font-weight:bold}   /* 使用1箇所 */
.u7{display:block; margin-top:.6rem}   /* 使用1箇所 */
.u8{margin-top:.5rem}   /* 使用1箇所 */
.u9{text-align:center}   /* 使用1箇所 */
.u10{margin-top:1rem; display:flex; gap:1rem; align-items:center}   /* 使用1箇所 */
.u11{background:#fffdf5}   /* 使用1箇所 */
.u12{font-size:1.1rem; color:#b06a00}   /* 使用1箇所 */
.u13{background:#fff4f4}   /* 使用1箇所 */
.u14{color:#c0392b;font-weight:bold}   /* 使用1箇所 */
.u15{margin-left:auto}   /* 使用1箇所 */
.u16{color:#c0392b}   /* 使用1箇所 */
.u17{margin:1rem 0}   /* 使用1箇所 */
.u18{cursor:pointer;color:#254998}   /* 使用1箇所 */
.u19{margin-top:.6rem; display:flex; gap:.5rem; flex-wrap:wrap}   /* 使用1箇所 */
.u20{flex:1; min-width:240px; padding:.5rem; border:1px solid #ccc; border-radius:6px}   /* 使用1箇所 */
.u21{color:#1a7a3a; border-color:#a8dcb8}   /* 使用1箇所 */
.u22{margin-top:.3rem}   /* 使用1箇所 */


/* --- 本文領域をステータスバーの下に固定する（2026-07-31・最終手段） --------
   実機測定で判明したこと:
     表示領域は画面全体(932px)を覆い、その上に時計・電池が重ねて描かれる。
     しかし innerHeight は 873 を返し env(safe-area-inset-top) も 0 のため、
     CSSからは「覆っている」ことを検知できない。
     上余白(padding)はスクロールで流れて消え、固定した覆い帯(body::before)も
     この環境では期待通りに前面へ出なかった(高さ59pxで適用済みなのに隠れず)。

   そこで「避ける」「覆う」ではなく《本文の領域自体を下げる》:
     body を画面に固定し、上端をステータスバーの高さから始めて、
     その内側だけをスクロールさせる。本文は構造的にこの領域の外へ出られないため、
     スクロールしても時計と重ならない。

   ページ別CSS(subsidy_list.css 等)が後から読まれ body を上書きするので、
   `html body` と書いて指定を一段強くしている。
   standalone のときだけ適用するので、Safari・PC・Androidには影響しない。 */
@media (display-mode: standalone) {
  /* body は画面いっぱいの「枠」。自身はスクロールしない
     (bodyを直接スクロール領域にするとiOSで指の操作を受け付けないため)。 */
  html body {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    max-width: none;
    overflow: hidden;
  }
  /* 実際にスクロールするのはこの内側の入れ物。
     上端をステータスバーの高さから始めるので、本文は構造的に時計より上へ行けない。 */
  #app-scroll {
    position: absolute;
    top: env(safe-area-inset-top, 0px);
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;   /* 慣性スクロールを有効にする */
    padding: .25rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
  }
}