/* content-gate.css — 準備中の講義ページ・確認中の解説（2026-10-08）
   ・教員の画面の帯（.content-gate-band）… 講義ページの body の先頭。js/content-gate.js が読む
   ・知らせ（.gate-notice）… preparing.html（講義）と quiz/viewer.html・hint.html（解説・ヒント）
   ・札（.gate-badge）… 教員の形で開いた未確認の解説・ヒントの題の横
   ・ヒント図鑑の灰色（.hint-card--gated）
   赤い字は使わない（赤は穴埋め専用）。知らせは灰、教員向けの印は橙。 */

.content-gate-band {
  position: relative;
  z-index: 5;
  margin: 0;
  padding: 6px 12px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.5;
  color: #9a3412;
  background: #ffedd5;
  border-bottom: 1px solid #fdba74;
}
/* 作っている途中のページを、先生が全カード「完了」にして生徒に公開したあと（content-gate.js。2026-10-11） */
.content-gate-band.content-gate-band--open {
  color: #166534;
  background: #dcfce7;
  border-bottom-color: #86efac;
}

body.gate-page {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
  background: #f8fafc;
}

.gate-notice {
  max-width: 520px;
  margin: 24px auto;
  padding: 36px 24px;
  text-align: center;
  color: #475569;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  box-sizing: border-box;
}
.gate-notice__icon { font-size: 2.6rem; line-height: 1; margin-bottom: 10px; }
.gate-notice__title { font-size: 1.35rem; font-weight: 700; color: #334155; margin: 0 0 10px; }
.gate-notice__page { font-size: 0.95rem; color: #64748b; margin: 0 0 6px; }
.gate-notice__page:empty { display: none; }
.gate-notice__msg { font-size: 0.95rem; line-height: 1.7; margin: 0 0 20px; }
.gate-notice__btn {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  padding: 0 28px;
  border-radius: 999px;
  background: #0ea5e9;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.gate-notice__btn:hover { background: #0284c7; color: #fff; }
.gate-notice--inline { margin: 40px auto; }

.gate-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.6;
  color: #9a3412;
  background: #ffedd5;
  vertical-align: middle;
  white-space: nowrap;
  /* 題（h1）がグラデーションの字（background-clip: text・字の色を透明）なので、札の字と地色は自分で決め切る */
  -webkit-text-fill-color: #9a3412;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  font-family: inherit;
}
.gate-band {
  margin: 0 0 12px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #9a3412;
  background: #ffedd5;
  border: 1px solid #fdba74;
}

/* ヒント図鑑（quiz/hint-gallery.html）：確認中の札は灰色で押せない */
.hint-card--gated { opacity: 0.6; }
.hint-card--gated .hint-card-title { color: #94a3b8; }
.hint-card-gated-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  background: #f1f5f9;
}