/* ============================================================
   Pioneer テーマ (ADR-002 / SURVEY-005)
   公式デザインガイドライン準拠:
   - シンプルヘッダー(ロゴのみ) / シンプルフッター(コピーライト+リンク)
   - ブランド赤 #b91440 (公式 common.css 由来) / フォーカス・エラーは赤
   style.css の後に読み込む前提。:root 変数を上書きして全 accent を一括で赤化する。
   ※ 公式 sheader.php/sfooter.php は改変不可。本テーマは公式ロゴ/リンク/コピーライトを
     公式 URL で参照し、見た目を軽量に再現したもの(common.css 全体は読み込まない)。
   ============================================================ */

:root {
  /* survey の accent(青 #185FA5)を Pioneer ブランド赤に差し替え */
  --bg-accent: #b91440;
  --text-info: #b91440;
  --border-info: #b91440;
  --bg-info: #fdeef2;          /* 薄赤(旧 #E6F1FB の置換) */
  --bg-danger: #ffe2e2;        /* 公式エラー薄赤 */
  --text-danger: #b91440;
}

/* progress バーのグラデーションは #4A8FD4 がハードコードのため個別上書き */
.progress-fill {
  background: linear-gradient(90deg, #b91440, #d84a6e) !important;
}

/* フォーカス時=赤ハイライト(フォームガイド: テキスト入力選択時に赤くハイライト) */
input[type="text"]:focus,
textarea:focus {
  border-color: #b91440;
  box-shadow: 0 0 0 3px rgba(185, 20, 64, 0.14);
  outline: none;
}

/* エラー時=赤枠(フォームガイド: 間違えたフォームを赤枠で表示) */
.field.invalid input[type="text"],
.field.invalid textarea,
input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: #b91440;
  background: #fff7f8;
}

/* ============================================================
   Pioneer シンプルヘッダー (ロゴのみ)
   ============================================================ */
.pioneer-header {
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}
.pioneer-header .ph-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
}
.pioneer-header .ph-logo img {
  display: block;
  height: 22px;
  width: auto;
}

/* survey のローダー(fixed inset:0)はヘッダーを一時的に覆うが読み込み後に消える。
   topbar は sticky top:0 のまま(ヘッダーはスクロールで流れる)で問題ない。 */

/* ============================================================
   Pioneer シンプルフッター (コピーライト + リンク + ロゴ)
   ============================================================ */
.pioneer-footer {
  background: #f5f5f5;
  border-top: 1px solid #e0e0e0;
  color: #515151;
  /* 固定 .bottom-nav(約80px)に隠れないよう下余白を確保 */
  padding-bottom: 96px;
  margin-top: 24px;
}
.pioneer-footer .pf-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 0;
}
.pioneer-footer .pf-links {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.pioneer-footer .pf-links a {
  color: #515151;
  text-decoration: none;
  font-size: 13px;
}
.pioneer-footer .pf-links a:hover { color: #b91440; text-decoration: underline; }
.pioneer-footer .pf-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 14px;
}
.pioneer-footer .pf-copyright {
  font-size: 11px;
  color: #767676;
  margin: 0;
  text-align: center;
}
.pioneer-footer .pf-logo img {
  display: block;
  height: 16px;
  width: auto;
}

@media (max-width: 600px) {
  .pioneer-footer .pf-bottom { flex-direction: column; align-items: center; }
}

/* ============================================================
   レイアウト: ナビ(「次へ」)を設問枠の下にインライン表示し、
   画面最下部はシンプルフッターにする (sticky-footer)。
   - body を flex 縦並びにし .container を伸長させてフッターを下端へ
   - .main は伸ばさない → nav が設問カードの直下に来る
   - .bottom-nav の固定(position:fixed)を解除してインライン化
   - 既存の簡易フッター(#footer = app_name)はシンプルフッターと重複するため隠す
   ============================================================ */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.pioneer-header,
.pioneer-footer { flex: 0 0 auto; }
.container {
  flex: 1 0 auto;     /* 伸長してシンプルフッターを画面下端へ押し下げる */
  min-height: 0;      /* style.css の 100vh 伸長を解除(body 側で確保) */
}
.main {
  flex: 0 0 auto;     /* 伸ばさない → nav が設問直下に来る */
  padding-bottom: 16px;  /* 固定nav用の 100px 余白を解除 */
}
.bottom-nav {
  position: static;   /* 固定バーをやめてインライン配置 */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: none;
  padding: 0 20px;
  z-index: auto;
}
#footer { display: none; }  /* 既存の app_name フッターはシンプルフッターに置換 */

/* Primary ボタンの hover が青(#0F4A85)ハードコードのため Pioneer 赤系に上書き */
.btn-primary:hover { background: #9e1138; }