/* ===== iPad/iPhone 安全動作用：高さの段階的フォールバック ===== */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* まずは汎用的に */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 基本ライン（安定） */
}

/* 新しい単位が使える端末ではより正確に */
@supports (height: 100svh) {
  body { min-height: 100svh; } /* UIを除いた“見えている高さ” */
}

/* Safari 系での最終保険 */
html { height: -webkit-fill-available; }
body { min-height: -webkit-fill-available; }

/* メインは余白を埋めるだけ（既存と同義でOK） */
main { flex: 1 0 auto; }

header {
  border-bottom: 1px solid #dee2e6;
}

/* フッター：Safe Area を下側に必ず確保 */
footer {
  flex-shrink: 0;
  border-top: 1px solid #dee2e6;
  text-align: center;
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}



/* ===============================
   IME OFF 共通スタイル
   =============================== */

/* 英数字入力専用フォームに使用 */
.ime-off {
  ime-mode: disabled; /* PCブラウザ向け（旧Edge, IE, Chrome一部対応） */
  inputmode: latin;   /* スマホブラウザで英数字キーボードを優先 */
  text-transform: none;
}

/* 日本語入力（IME有効） */
.ime-on {
    ime-mode: active;
    inputmode: kana;
}

/* 数値入力 */
.ime-num {
    ime-mode: disabled;
    inputmode: numeric;
}

/* Bootstrap の form-control と併用時 */
.form-control.ime-off {
  letter-spacing: 0.05em;
}

/* 見た目の補足（任意） */
input.ime-off::placeholder {
  color: #aaa;
}


/* ===================================
   四角いメニュー
   =================================== */

.square-btn {
  aspect-ratio: 1 / 1; /* 正方形維持 */
  width: 100%;
  border-radius: 12px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.2s ease;
}
.square-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.square-btn i {
  font-size: 28px;
  margin-bottom: 8px;
}

/* ===================================
   バッジ
   =================================== */

.badge {
  font-size: 0.9rem;       /* デフォルト0.75rem → 約1.33倍 */
  padding: 0.5em 0.75em; /* 内側余白を少し広げる */
  border-radius: 0.5rem; /* 少し丸くして柔らかい印象に */
}