/* ============================================================
   mogi-tap.css  ―  模擬試験ページ（mogi12.html）のスマホ・タップ操作の改善
   2026.10.27
   ・mogi12.html の </style> より後（<head> の末尾）で読み込む
   ・既存のCSSは変更せず、上書きだけを行う
   ============================================================ */

/* 共通：ダブルタップ拡大・タップの遅延を防ぐ */
button, label, select, summary, #marksheet span, .history-item{
  touch-action: manipulation;
}

/* ---------- 選択肢 ---------- */
.choice-label{
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.6;
  border: 2px solid #b8cfc0;
  border-radius: 10px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;          /* 長押しの選択メニューを出さない */
}
.choice-label input[type="radio"]{
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 2px 6px 0 0;
}
.choice-label .choice-number{
  flex: 0 0 auto;
  margin-right: 2px;
}

/* タッチ端末では hover の色を残さない（タップ後に色が戻らない現象を防ぐ） */
@media (hover: none){
  .choice-label:hover{ background: #fff; }
}

/* 選択中（採点前） */
.choice-label.selected{
  border-color: #1565c0;
  background: #e8f1fb;
}

/* 採点後：正解の選択肢は緑、自分が選んだ不正解は赤。押しても変わらないようにする */
.choice-label.is-locked{
  pointer-events: none;
  cursor: default;
}
.choice-label.is-correct{
  border-color: #2e7d32;
  background: #e6f6ea;
}
.choice-label.is-wrong{
  border-color: #c62828;
  background: #fdecea;
}

/* ---------- スマホ（幅600px以下）：タップ領域を広げる ---------- */
@media (max-width: 600px){
  .choice-label{
    min-height: 56px;
    padding: 14px 12px;
    margin: 10px 0;
    font-size: 16px;
  }

  /* 下部固定ナビ：高さ48px以上。「採点する」と「やり直す」が隣り合うので、間隔も広げる */
  #nav-buttons{
    gap: 8px;
  }
  #nav-buttons button{
    min-height: 48px;
    font-size: 15px;
  }

  /* 開始前の設定欄 */
  #config select{
    min-height: 44px;
    font-size: 16px;
  }
  #config button{
    min-height: 44px;
  }
  #start-btn{
    display: block;
    width: 100%;
    min-height: 52px;
    margin: 12px 0 4px;
    font-size: 17px;
    font-weight: bold;
  }
  #config label{
    margin: 12px 0;
  }

  /* 採点後・分析まわり */
  .grade-summary button,
  .wrong-nav button{
    min-height: 44px;
  }
  .unit-practice-btn,
  #weak-start-btn,
  #history-actions button,
  #restore-ja-btn{
    min-height: 44px;
  }
  #history-actions button{
    margin: 4px 4px 4px 0;
  }
  details.weak-item summary{
    min-height: 44px;
    padding: 6px 0;
  }
  .history-item{
    padding: 14px 8px;
  }
  /* ピル型のリンクボタン（学習の進め方・用語解説・アンケート）：
     枠の高さを確保しつつ、文字を枠の中央に置く。
     元のCSSが a:link.xxx（詳細度が高い書き方）なので、同じ書き方にそろえて上書きする */
  a:link.parent-guide-link, a:visited.parent-guide-link,
  a:link.terms-hint-link, a:visited.terms-hint-link,
  a:link.survey-after-link, a:visited.survey-after-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 4px 16px;
    margin: 4px 3px;
    line-height: 1.4;
    vertical-align: middle;
  }
}