@charset "UTF-8";
/* ============================================================
   sc-drill.css  v1  (2026-08-28)
   ドリル画面のスマホ操作性を直すための共通CSS。

   直した問題（実機スクリーンショットで確認）
   1. 画面下に固定される保存バー（#csSaveBar）と、
      右下に浮くID発行ボタン（#compass-auth-ui）が
      入力らんと「かいとう」ボタンに重なり、押せなかった。
      ドリルは「その場で解いて終わる」ページなので、
      保存導線そのものが不要。JS側でも出さないようにしたうえで、
      ここでも保険として非表示にする。
   2. 入力らんと「かいとう」ボタンが横並びで、
      入力らんが狭くプレースホルダが切れていた。
      スマホでは縦に積み、どちらも画面幅いっぱいにする。
   3. 問題表示の余白と文字が大きすぎて、
      入力らんが画面外に押し出されていた。
      1画面に「問題 → 入力 → ボタン」が収まる高さに詰める。
   4. タイトルとカードの間に大きな空白があった。

   このファイルは contents/*_drill/*.html から読み込む。
   入力型・選択型のどちらのドリルにも当たる。
   ============================================================ */

/* --- 1. ドリル画面では保存導線を出さない ------------------ */
#csSaveBar,
#compass-auth-ui {
  display: none !important;
}
/* 保存バー前提で body に付く余白も打ち消す */
body {
  padding-bottom: 0 !important;
}

/* --- 2. 上部の余白を詰める -------------------------------- */
.container {
  padding: 12px 14px 28px !important;
}

/* --- 3. 問題表示を1画面に収める ---------------------------- */
@media (max-width: 600px) {
  .question-display {
    padding: 22px 12px !important;
    margin-bottom: 16px !important;
  }
  .question-text {
    font-size: 2.6rem !important;
    letter-spacing: 2px !important;
  }
}

@media (max-width: 380px) {
  .question-text {
    font-size: 2.2rem !important;
  }
}

/* --- 4. 入力らんと「かいとう」を縦に積み、指で押せる大きさに --- */
@media (max-width: 600px) {
  .answer-row {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .answer-input {
    width: 100% !important;
    flex: none !important;
    padding: 16px 12px !important;
    font-size: 1.9rem !important;
    min-height: 64px !important;
    box-sizing: border-box !important;
  }
  .answer-input::placeholder {
    font-size: 1rem !important;
    font-weight: 500 !important;
  }
  .submit-btn {
    width: 100% !important;
    padding: 0 !important;
    min-height: 58px !important;
    font-size: 1.25rem !important;
  }
}

/* --- 5. 選択型ドリルの選択肢も指で押せる大きさに ------------ */
@media (max-width: 600px) {
  .choice-btn {
    min-height: 56px !important;
    font-size: 1.05rem !important;
    padding: 12px 14px !important;
  }
}

/* --- 6. ふりがな付きの短い案内文が途中で折れないように ------ */
.answer-hint {
  line-height: 2.1 !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}
.answer-hint rt {
  font-size: 0.55em !important;
}

/* --- 7. 画面下端に余白を確保（iPhoneのホームバー対策） ------ */
.card {
  scroll-margin-top: 12px;
}
.quiz-screen {
  padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
}

/* ============================================================
   v1.1 追補（2026-08-28）
   v1 のセレクタは keisan_drill と tani_drill の10本にしか
   当たっていなかった。ドリルは作られた時期ごとにクラス名が違うため、
   実ファイル34本すべてを調べ、系統別に指定を足す。

   系統ごとの実際のクラス名
     keisan / tani（10本）  answer-row / answer-input / submit-btn
                            question-display / question-text
     bunsho（3本）          answer-input-area / answer-input / submit-btn
                            question-label
     dokkai（6本）          question-text / choices / choice-btn
     zukei（3本）           choices-grid / choice-btn
     jyukenkiso（6本）      choice-btn / answer-btn / next-btn / hint-btn
     shikoryoku（5本）      count-btn / level-btn / move-btn / sort-item
                            cmd-btn / run-btn / weight-btn ほか操作ボタン
     tani-index（1本）      一覧ページのため回答UIなし
   ============================================================ */

/* --- 文章題ドリル（bunsho）------------------------------- */
@media (max-width: 600px) {
  .answer-input-area {
    flex-wrap: wrap !important;
    justify-content: stretch !important;
    gap: 10px !important;
  }
  .answer-input-area .answer-input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 60px !important;
    font-size: 1.7rem !important;
    padding: 14px 12px !important;
    box-sizing: border-box !important;
  }
  .answer-label {
    width: 100%;
    text-align: left;
  }
  .question-label {
    padding: 14px !important;
    font-size: 1.02rem !important;
    line-height: 1.75 !important;
  }
}

/* --- 読解ドリル（dokkai）--------------------------------- */
@media (max-width: 600px) {
  .choices {
    gap: 12px !important;
  }
  .choices .choice-btn {
    font-size: 1rem !important;
    padding: 14px 14px !important;
    line-height: 1.6 !important;
  }
}

/* --- 図形ドリル（zukei）---------------------------------- */
@media (max-width: 600px) {
  .choices-grid {
    gap: 10px !important;
  }
  .choices-grid .choice-btn {
    padding: 16px 8px !important;
    font-size: 1.05rem !important;
  }
  /* 3列は狭い端末で潰れるため2列に落とす */
  .choices-grid.three-cols {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* --- 受験基礎ドリル（jyukenkiso）------------------------- */
@media (max-width: 600px) {
  .answer-btn,
  .next-btn,
  .hint-btn {
    min-height: 54px !important;
    font-size: 1.05rem !important;
  }
}

/* --- 思考力ドリル（shikoryoku）--------------------------- */
/* 操作ボタンが小さく、指では押しにくかった。
   並べ替え・迷路・プログラミングのいずれも操作要素を拡大する。 */
@media (max-width: 600px) {
  .move-btn,
  .maze-ctrl-btn,
  .cmd-btn,
  .run-btn,
  .clear-btn,
  .if-btn,
  .loop-btn,
  .skip-btn,
  .weight-btn,
  .balance-check-btn,
  .next-exp-btn,
  .seq-choice {
    min-height: 52px !important;
    min-width: 52px !important;
    font-size: 1.02rem !important;
  }
  .sort-item,
  .pattern-item {
    min-height: 52px !important;
    font-size: 1.02rem !important;
  }
}

/* --- 全ドリル共通の設定ボタン ---------------------------- */
/* スタート前の「問題数」「レベル」選択も指で押せる大きさに */
@media (max-width: 600px) {
  .count-btn,
  .level-btn,
  .option-btn {
    min-height: 52px !important;
    font-size: 1.02rem !important;
  }
  .start-btn,
  .retry-btn,
  .back-btn {
    min-height: 58px !important;
    font-size: 1.15rem !important;
  }
}

/* --- v1.2 上部の余白（未確定分への対処）------------------- */
/* 実機のスクリーンショットで、タイトルとカードの間に大きな空白が
   出ていた。静的な解析では発生源を特定できなかったため、
   考えられる箇所（h1の既定マージン、パンくずとヘッダーの二重、
   カードの上マージン）をまとめて詰める。
   これで消えない場合は、発生源が別にあるため実機で要確認。 */
@media (max-width: 600px) {
  h1 {
    margin: 6px 0 !important;
    font-size: 1.5rem !important;
    line-height: 1.4 !important;
  }
  .breadcrumb {
    padding: 6px 14px !important;
    font-size: 0.78rem !important;
  }
  .container > .card:first-child {
    margin-top: 0 !important;
  }
}