/* ============================================================
   Agrié Educational Tools — 共通スタイル
   ============================================================ */

/* ===== グローバル変数 ===== */
:root {
  --school-footer-color: rgba(31, 41, 55, 0.55);

  /* ---- Agrié ボタンデザインシステム（全アプリ共通） ---- */

  /* ① メイン操作（開始・次へ・ひらく）: 青背景＋白文字 */
  --agrie-btn-primary-bg:    #2F6FD6;
  --agrie-btn-primary-color: #ffffff;

  /* ② 保存系（記録保存・完了）: 緑背景＋黒文字 */
  --agrie-btn-save-bg:    #4CAF84;
  --agrie-btn-save-color: #222222;

  /* ③ 印刷・補助操作: オレンジ背景＋黒文字 */
  --agrie-btn-print-bg:    #F6A84C;
  --agrie-btn-print-color: #222222;

  /* ④ 削除・リセット: 淡い赤背景＋濃い赤文字 */
  --agrie-btn-danger-bg:     #fee2e2;
  --agrie-btn-danger-color:  #991b1b;
  --agrie-btn-danger-border: #fecaca;

  /* ⑤ 戻る・サブ操作: 白背景＋青文字＋青枠 */
  --agrie-btn-sub-bg:     #ffffff;
  --agrie-btn-sub-color:  #2F6FD6;
  --agrie-btn-sub-border: rgba(47, 111, 214, 0.3);
}

/* ===== Agrié ボタン基底クラス ===== */
/*
  使い方:
    <button class="agrie-btn agrie-btn--save">今日の記録に保存</button>
    <button class="agrie-btn agrie-btn--print">印刷する</button>
    <button class="agrie-btn agrie-btn--primary">次へ</button>
    <button class="agrie-btn agrie-btn--danger">リセット</button>
    <button class="agrie-btn agrie-btn--sub">もどる</button>
*/
.agrie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  min-height: 48px;
  border: none;
  border-radius: 14px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: filter .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.agrie-btn:hover  { filter: brightness(.93); }
.agrie-btn:active { filter: brightness(.87); }
.agrie-btn:focus-visible {
  outline: 3px solid #2F6FD6;
  outline-offset: 3px;
}

/* ① メイン操作 */
.agrie-btn--primary {
  background: var(--agrie-btn-primary-bg);
  color:      var(--agrie-btn-primary-color);
}
/* ② 保存系（コントラスト比: #222 on #4CAF84 = 6.32:1 ✓） */
.agrie-btn--save {
  background: var(--agrie-btn-save-bg);
  color:      var(--agrie-btn-save-color);
}
/* ③ 印刷・補助（コントラスト比: #222 on #F6A84C = 8.41:1 ✓） */
.agrie-btn--print {
  background: var(--agrie-btn-print-bg);
  color:      var(--agrie-btn-print-color);
}
/* ④ 削除・リセット */
.agrie-btn--danger {
  background: var(--agrie-btn-danger-bg);
  color:      var(--agrie-btn-danger-color);
  border: 1px solid var(--agrie-btn-danger-border);
}
/* ⑤ 戻る・サブ操作 */
.agrie-btn--sub {
  background: var(--agrie-btn-sub-bg);
  color:      var(--agrie-btn-sub-color);
  border: 1.5px solid var(--agrie-btn-sub-border);
}
.agrie-btn--sub:focus-visible { border-color: #2F6FD6; }

/* スマホでは最低 44px を維持 */
@media (max-width: 480px) {
  .agrie-btn { min-height: 44px; }
}

/* ===== フッター ===== */
footer.app-footer {
  margin-top: 18px;
  padding: 10px 14px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  text-align: center;
  font-size: 11px;
  line-height: 1.5;
  color: var(--school-footer-color);
}
.app-footer-beta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  padding: 9px 14px;
  border-radius: 12px;
  background: rgba(237, 247, 241, .95);
  border: 1.5px solid rgba(76, 175, 132, .25);
}
.app-footer-beta-label {
  font-size: .8rem;
  font-weight: 800;
  color: #2F6FD6;
  letter-spacing: .04em;
  white-space: nowrap;
}
.app-footer-feedback-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 16px;
  border-radius: 999px;
  background: #2F6FD6;
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
}
.app-footer-feedback-btn:hover { background: #1b52b3; }
.app-footer-brand {
  font-weight: 700;
  font-size: .76rem;
  color: var(--school-footer-color);
}
.app-footer-tagline {
  font-size: .74rem;
  color: var(--school-footer-color);
  margin: 2px 0;
}
.app-footer-copy {
  font-size: .75rem;
  color: var(--school-footer-color);
}
@media (max-width: 480px) {
  .app-footer-beta { justify-content: center; text-align: center; }
}
@media print {
  footer.app-footer { display: none !important; }
}

/* ===== ボタンリセット（カード・選択肢用） ===== */
button.card, button.choice {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: inherit;
  width: 100%;
  text-align: inherit;
  border: none;
  cursor: pointer;
}
button.card:focus-visible {
  outline: 3px solid #2F6FD6;
  outline-offset: 2px;
}
button.choice:focus-visible {
  outline: 3px solid #4CAF84;
  outline-offset: 2px;
}