/* ============================================================
   style.css（共通ベース）
   ============================================================
   【役割】
   - 色などの変数(:root)
   - 全体の土台（font / box-sizing / link / img）
   - 共通部品（container / section / btn / card / sub / cta-row）
   ※ ページ固有は各ページCSSへ

   【今回の修正（重要）】
   - スマホで「白背景＋白文字」になる事故を根絶するため、
     ボタンの文字色を CSS変数に依存させず固定値で定義する
   - btn派生（ghost / accent-outline / danger）を共通定義
   - disabled の見た目を共通定義
============================================================ */

/* ===== Design Tokens（色など） ===== */
:root{
  --bg:#ffffff;
  --fg:#1f2937;
  --muted:#667085;

  --accent: #6fa88c;
  --accent-dark: #5a8f7b;

  --border:#e5e7eb;
  --card:#ffffff;

  --maxw:1280px; /* 1100 → 1280（好みで 1200〜1400） */
}

/* ===== Base ===== */
*,
*::before,
*::after { box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans JP",sans-serif;
  color:var(--fg);
  background:var(--bg);
  line-height:1.6;
  font-size:16px;
}

img{ max-width:100%; height:auto; }

a{ color:inherit; text-decoration:none; }

/* ===== Layout Utils ===== */
.container{ max-width:var(--maxw); margin:0 auto; padding:16px; }
.section{ padding:36px 16px; }
.grid{ display:grid; gap:14px; }

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
}

/* 補助テキスト */
.sub{ color:var(--muted); }

/* ============================================================
   Buttons（共通ボタン）
   ============================================================ */

/* ボタンの“素” */
/* 重要：文字色は固定（=変数上書きで白になっても影響を受けない） */
button.btn,
a.btn,
input.btn{
  display:inline-flex;
  gap:8px;
  align-items:center;
  justify-content:center;

  padding:10px 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;

  color:#1f2937;                 /* ★固定 */
  -webkit-text-fill-color:#1f2937; /* ★固定（モバイルの事故対策） */
}

button.btn:hover,
a.btn:hover,
input.btn:hover{ background:#f7f7f7; }

/* disabled */
button.btn:disabled,
button.btn[disabled],
a.btn.is-disabled{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
}

/* アクセント（塗り） */
button.btn--accent,
a.btn--accent{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  -webkit-text-fill-color:#fff;
  font-weight:700;
}
button.btn--accent:hover,
a.btn--accent:hover{
  background:var(--accent-dark);
  border-color:var(--accent-dark);
}

/* ゴースト（予約取消/既読など） */
button.btn--ghost,
a.btn--ghost{
  background:#fff;
  border-color:var(--border);
  color:#1f2937;
  -webkit-text-fill-color:#1f2937;
}
button.btn--ghost:hover,
a.btn--ghost:hover{
  background:#f7f7f7;
}

/* アクセント（アウトライン） */
button.btn--accent-outline,
a.btn--accent-outline{
  background:#fff;
  border-color:var(--accent);
  color:#5a8f7b; /* accent-dark 相当を固定 */
  -webkit-text-fill-color:#5a8f7b;
  font-weight:700;
}
button.btn--accent-outline:hover,
a.btn--accent-outline:hover{
  background: rgba(111,168,140,.12);
}

/* 危険（削除など） */
button.btn--danger,
a.btn--danger{
  background:#dc2626;
  border-color:#dc2626;
  color:#fff;
  -webkit-text-fill-color:#fff;
  font-weight:700;
}
button.btn--danger:hover,
a.btn--danger:hover{
  background:#b91c1c;
  border-color:#b91c1c;
}

/* 横並びCTA */
.cta-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

/* フッター */
.footer{
  margin-top:24px;
  padding:24px 16px;
  border-top:1px solid var(--border);
  color:var(--muted);
  text-align:center;
}
.footer a{ text-decoration:underline; text-underline-offset:2px; }

/* Utility */
.mt-0 { margin-top:0 !important; }
.mb-0 { margin-bottom:0 !important; }
.text-center { text-align:center !important; }

/* ==========================================================
   スマホ向け：ボタン＆文字サイズの底上げ
   - PC表示は変更しない
   - 全ページ共通で効かせる
   ========================================================== */

@media (max-width: 880px){

  /* ------------------------------
     基本ボタン（a.btn / button.btn）
     ------------------------------ */
  .btn{
    font-size: 16px;          /* ← ここが一番効く */
    font-weight: 600;
    line-height: 1.2;

    padding: 12px 14px;
    min-height: 44px;         /* タップしやすさの基準 */
  }

  /* ------------------------------
     フォーム送信系（掲示板・参加・保存など）
     ------------------------------ */
  button,
  input[type="submit"],
  input[type="button"]{
    font-size: 16px;
    line-height: 1.2;
    min-height: 44px;
  }

  /* ------------------------------
     ボタン内の小さい文字対策
     （アイコン＋文字など）
     ------------------------------ */
  .btn small,
  .btn span{
    font-size: 1em; /* 親（16px）に引き上げる */
  }

}