/* スコープ：.srs-container 内だけに影響 */
.srs-container {
  /* テーマで上書きしやすい変数 */
  --srs-gap: 12px;
  --srs-radius: 12px;
  --srs-border: 1px solid #ddd;
}

/* ヘッダー */
.srs-header {
  display: flex;
  gap: var(--srs-gap);
  align-items: center;
  margin-bottom: 1em;
}

/* カード */
.srs-card {
  border: var(--srs-border);
  padding: 16px;
  border-radius: var(--srs-radius);
  width: 100%;
  overflow-block: auto;
  box-sizing: border-box;
  height: 25em;
  max-height: 60vh;
  min-height: 10em;
}

.srs-qa,
.srs-problem {
  transform: translateZ(0); /* WebKit にレイヤーを作らせて塗り抜けを防ぐ */
}

/* 表示/非表示ユーティリティ
   - 既定は「見えないが場所は保持」（iPadでの描画安定のため）
   - ただし、ヘッダー/フッター/操作ボタン内の .is-hidden は
     レイアウトからも除去（= display:none）する
*/
.is-hidden {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 操作ボタンやヘッダー/フッターの隠し要素は「スペースも消す」 */
.srs-header .is-hidden,
.srs-controls .is-hidden,
.srs-footer .is-hidden {
  display: none !important;
}

/* 誤タップ防止：.srs-controls 内の「解答を見る」を非表示にしても“枠”は残す */
.srs-controls .srs-reveal.is-hidden {
  display: block !important;     /* 既存の .srs-controls .is-hidden の display:none を打ち消す */
  visibility: hidden !important; /* 見えない＆押せないが、幅は確保 */
  pointer-events: none;
}


/* 解答・解説は「場所は保持したまま」非表示（ジャンプ抑制） */
.srs-qa .is-hidden {
  display: block !important; /* 上の display:none を打ち消す保険 */
}

.srs-problem,
.srs-answer {
  margin-block-end: 2rem;
}

/* 解答/解説の最小高さ（空行のような小さなスペースだけ確保） */
.srs-answer,
.srs-explanation {
  min-height: 1rem;
  padding-block-start: 0.5rem;
}

/* ===== SRS Modal ===== */
.srs-modal.is-hidden {
  display: none;
}
.srs-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.srs-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}
.srs-modal__dialog {
  position: relative;
  max-width: 520px;
  margin: 10vh auto 0;
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  outline: 0;
}
.srs-modal__title {
  margin: 0 0 8px;
  font-size: 20px;
}
.srs-modal__message {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.srs-modal__actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.srs-modal__confirm,
.srs-modal__cancel {
  font-size: 18px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
}
.srs-modal__confirm {
  background: #235af3;
  color: #fff;
}
.srs-modal__cancel {
  background: #eee;
  color: #333;
}
@media (pointer: coarse) {
  .srs-modal__confirm,
  .srs-modal__cancel {
    padding: 16px 20px;
    font-size: 20px;
  }
}

/* ====== Controls（押しやすさ＋配置）====== */
.srs-controls {
  display: grid;
  gap: 12px;
  margin-top: 1em;
  justify-content: start; /* ボタンは自然幅のまま左寄せ */
  grid-template-columns: 1fr 1fr; /* 初期：スマホは2列 */
  grid-template-areas:
    "reveal reveal" /* reveal を全幅 */
    "ok     ng";
}
/* 子要素をエリアに割当て（auto placement から明示に） */
.srs-reveal {
  grid-area: reveal;
}
.srs-ok {
  grid-area: ok;
}
.srs-ng {
  grid-area: ng;
}

/* PC/タブレット：横並び */
/* PC/タブレット：3ボタンを等幅・中央寄せに */
@media (min-width: 641px) {
  .srs-controls {
    /* ボタン幅=約 6em、余白=約 1em、中央寄せ */
    grid-template-columns: repeat(3, 6em);
    grid-template-areas: "reveal ok ng";
    gap: 1em;
    justify-content: center;
    align-items: center;
  }
  /* ボタン文字が折り返されないように＆幅をセルに合わせる */
  .srs-controls button {
    width: 100%;
  }
}


/* スマホでは「回答を見る」を全幅に（保険） */
@media (max-width: 640px) {
  .srs-reveal {
    grid-column: 1 / -1;
  }
}

/* ====== Buttons（共通見た目・操作性）====== */
.srs-controls button,
.srs-reset-deck {
  appearance: none;
  border: 0;
  border-radius: 20px;
  padding: 10px 20px; /* 44×44相当のタップ領域 */
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.06s ease, box-shadow 0.12s ease,
    background-color 0.12s ease;
}
.srs-controls button:hover,
.srs-reset-deck:hover {
  transform: translateY(-1px);
}
.srs-controls button:active,
.srs-reset-deck:active {
  transform: translateY(0);
  box-shadow: none;
}
.srs-controls button:focus-visible,
.srs-reset-deck:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.3), 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* 役割色 */
.srs-reveal {
  background: #235af3;
  color: #fff;
} /* 中立 */
.srs-ok {
  background: #235af3;
  color: #fff;
} /* わかった */
.srs-ng {
  background: #235af3;
  color: #fff;
} /* わからない */
.srs-reset-deck {
  background: #eef2f7;
  color: #334155;
} /* リセット */

/* タッチ端末は少しだけ拡大 */
@media (pointer: coarse) {
  .srs-controls button,
  .srs-reset-deck {
    padding: 16px 22px;
    font-size: 20px;
  }
}

/* ====== Reveal非表示時の再レイアウト（状態クラスで切替）====== */
.srs-controls.--judging {
  grid-template-columns: max-content max-content;
  grid-template-areas: "ok ng";
}
/* （.--with-reset は不要なので削除） */

/* PC時：回答表示後も3列のまま（誤タップ防止で「解答を見る」の場所を保持） */
@media (min-width: 641px) {
  .srs-controls.--judging {
    grid-template-columns: repeat(3, 6em);
    grid-template-areas: "reveal ok ng";
  }
}


/* ====== QAセクションの区切り線（DOM変更なし）====== */
.srs-qa > * + * {
  border-block-start: 1px solid #e5e7eb;
}

/* ==== Label (問題/解答/解説) 共通デザイン ==== */
.srs-label {
  --srs-label-br: 6px; /* 角丸 */
  --srs-label-bw: 2px; /* 枠線太さ */

  display: inline-block;
  font-weight: 700;
  font-size: 14px;
  border: var(--srs-label-bw) solid #222222;
  border-radius: var(--srs-label-br);
  background: #ffffff;
  color: #222222;
  line-height: 1.2;
  vertical-align: middle;
  padding-block: 2px;
  padding-inline: 8px;
}

.srs-card h3 {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* 「学習状況をリセット」をクリックしにくい位置に移動 */
.srs-footer {
  text-align: right;
  margin-top: 12px; /* ← インラインstyleの置換 */
}