/* スマホ幅(700px 以下)の長い入力フォーム(public/ui_u4.js と組)。パソコンの幅では、何も変えない。
   (1) 見出しごとの折りたたみ (2) 下に固定の保存ボタン (3) 短い入力欄の2列 */
@media screen and (max-width: 700px) {
  /* (1) 折りたたみ: 見出し(legend / h2)を押して開け閉め。閉じた節は、見出しだけ */
  .u4-form .u4-fold { margin-bottom: 8px; }
  .u4-form fieldset.u4-fold { padding: 8px 10px 10px; }
  .u4-form .u4-head { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
  .u4-form legend.u4-head { display: block; float: none; width: auto; max-width: 100%; box-sizing: border-box; padding: 6px 8px; font-size: 16px; color: var(--primary-dark); }
  .u4-form legend.u4-head { float: left; width: 100%; }
  .u4-form legend.u4-head ~ * { clear: both; }
  .u4-form fieldset.u4-fold > :not(legend) { clear: both; }
  .u4-form h2.u4-head { margin: 0; padding: 8px 4px; font-size: 17px; color: var(--primary-dark); border-bottom: 1px solid var(--line); }
  .u4-form .u4-head::after { content: " ▾"; color: var(--primary); font-size: .9em; }
  .u4-form .u4-closed > .u4-head::after { content: " ▸"; }
  .u4-form .u4-head:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  .u4-form .u4-fold.u4-closed > :not(.u4-head) { display: none !important; }
  .u4-form fieldset.u4-fold.u4-closed { padding-bottom: 2px; }
  .u4-form .u4-wrap.u4-closed { margin-bottom: 4px; }
  .u4-allbar { display: flex; gap: 8px; justify-content: flex-end; margin: 0 0 8px; }
  .u4-allbar button { font: inherit; font-size: 13px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--primary-dark); cursor: pointer; }

  /* (2) 下に固定の保存ボタン(下のボタン帯・提供元の表記の上) */
  .u4-dupe, .u4-dupe-box { display: none !important; }
  .u4-sticky { position: sticky; bottom: calc(var(--credit-h, 24px) + var(--tabbar-h, 60px) + env(safe-area-inset-bottom)); z-index: 40; background: var(--panel); border-top: 1px solid var(--line); box-shadow: 0 -4px 10px rgba(31, 41, 51, .10); padding: 8px 10px; margin: 8px 92px 0 -10px; } /* R39: 右は「質問」(幅 約87px・右から18px)の分をあける。62px では、ボタンの右の約18pxを「質問」が覆った */
  .u4-sticky.actions { margin-bottom: 0; }
  .u4-sticky .muted, .u4-sticky .small:not(.btn) { display: none; }
  .u4-sticky .btn-save, .u4-sticky.btn-save { min-height: 44px; }
  .u4-sticky.actions .btn-save { flex: 1 1 auto; }
  .u4-sticky-self { display: block; width: calc(100% - 82px); box-sizing: border-box; border-radius: 0; } /* R39: 左に10pxはみ出し、右は上の margin と同じ 92px をあける(100% + 10px - 92px)。100%+20px だと、右に10pxはみ出して、画面全体が横に動いた(/admin/office が 390px で 437px) */
  body:not(.m-has-tabbar) .u4-sticky { bottom: var(--credit-h, 24px); }

  /* (3) 短い入力欄を、2つずつ横に並べる。長い欄は1列のまま */
  .main form .u4-g { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 10px; }
  .main form .u4-g > :not(.u4-short) { grid-column: 1 / -1; }
  .main form .u4-g > .u4-pair-first { grid-column: 1; }
  .main form .u4-g > .u4-short { min-width: 0; }
  .main form .u4-g > .u4-short input:not([type=checkbox]):not([type=radio]), .main form .u4-g > .u4-short select { width: 100%; min-width: 0; box-sizing: border-box; }
  .main form .u4-g > .u4-date input { font-size: 14px; padding-left: 4px; padding-right: 4px; }
}