/* 問題ページ（com_q.php）詳細解説スタイル
   {kbn}_question_explanation が登録済みの問題（$has_detail）でのみ読み込む。
   table th / .single p など汎用セレクタへの上書きを含むため、
   詳細解説なしの問題では読み込まないこと。 */

#target_ans_correct_msg{
  margin:8px 0;
}
table th{
  font-weight:bold !important;
}
.single p { margin-bottom:0 !important; }
.sample-explanation { line-height:1.85; }
.sample-section { margin:0 0 24px 0; }
.sample-section-answer { margin:0 0 24px 0; }
.sample-point-list,
.sample-reason-list,
.sample-section ul.sample-trap-list {
  background-color: transparent;
  border: none;
  margin:0 0 0 1.4em;
  padding:0 10px;
}
.sample-point-list li,
.sample-reason-list li,
.sample-trap-list li {
  margin-bottom:8px;
}
.sample-choice {
  border:1px solid rgba(0,0,0,.14);
  border-left-width:5px;
  border-radius:4px;
  margin:0 0 12px 0;
  padding:12px;
  background:#fff;
}
.sample-choice.correct { border-left-color:#34a7b7; background:#f1fbfa; }
.sample-choice.incorrect { border-left-color:lightgray; }
.sample-choice h4 {
  color:#232f3e;
  font-size:16px;
  margin:0 0 8px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.sample-section h3 {
  margin-top: 30px !important;
}

/* h3セクションの折りたたみ（saa_q_sample_v2 の details/summary を踏襲） */
details.sample-acc { margin: 0 0 24px 0; }
details.sample-acc ul { margin-top: 20px; }
details.sample-acc > summary {
  list-style: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  padding: 5px 15px;
  border-left: 9px solid #FF9900;
  background: #f7f7f7;
  border-bottom: 1px solid rgba(0,0,0,.08);
  margin-top: 10px;
  margin-bottom: 20px;
  position: relative;
}
details.sample-acc > summary::-webkit-details-marker { display: none; }
details.sample-acc > summary::after {
  content: "▲";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #999;
}
details.sample-acc:not([open]) > summary::after { content: "▼"; }

/* 閉じているアコーディオンだけ間隔を詰める（開いている時は従来どおり） */
details.sample-acc:not([open]) { margin-bottom: 10px; }
details.sample-acc:not([open]) > summary { margin-bottom: 0; }
.sample-section:has(> details.sample-acc:not([open])) { margin-bottom: 10px; }

.sample-section h4{
  font-size: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  padding-bottom: 3px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.sample-section table strong {
  border: none !important;
}
.sample-badge {
  border-radius:3px;
  color:#fff;
  display:inline-block;
  font-size:12px;
  font-weight:bold;
  padding:2px 7px;
  vertical-align:1px;
}
.sample-badge.correct { background:#2f8f2f; }
.sample-badge.incorrect { background:#d13212; }
.sample-tag {
  font-weight:bold;
  margin-top:4px;
  border: none !important;
}
.sample-tag.keep { color:#2f8f2f; }
.sample-tag.remove { color:#d13212; }
.sample-keyword-table th,
.sample-keyword-table td {
  border:1px solid rgba(0,0,0,.14);
  padding:9px 10px;
  vertical-align:top;
}
.sample-keyword-table th {
  background:#f7f7f7;
  color:#232f3e;
  text-align:left;
  white-space:nowrap;
}
.sample-summary {
  background:#fff8e6;
  border:1px solid #f0c14b;
  border-radius:4px;
  margin:10px 0 20px 0;
  padding:12px;
}
.sample-hook {
  background:#232f3e;
  color:#fff;
  border-left:5px solid #FF9900;
  border-radius:4px;
  margin:20px 10px 4px 10px;
  padding:14px 16px;
  line-height:1.7;
}
.sample-hook .sample-hook-label {
  display:block;
  font-size:12px;
  font-weight:bold;
  color:#FF9900;
  margin-bottom:5px;
  letter-spacing:.02em;
}
.sample-hook strong {
  color:#FF9900;
  border:none !important;
}

/* 構成図 mermaid のラベル行間を固定する。
   mermaid は body 直下の一時要素でラベルの寸法を測ってから、出来上がった SVG を
   #sample-diagram（.sample-explanation の内側）へ差し込む。このとき
   .sample-explanation の line-height:1.85 が「測定後」にラベルへ効くため、
   箱は 1.6 相当の高さで作られたのに文字は 1.85 で描かれ、下へはみ出す。
   ラベル要素へ直接指定すると一時要素・表示先の両方に同じ値が効き、測定と表示が一致する。
   値は body の line-height と同じ 1.6（＝現在の箱のサイズを変えずに文字を収める）。 */
.sample-diagram foreignObject > div,
.sample-diagram .nodeLabel,
.sample-diagram .edgeLabel,
foreignObject > div,
foreignObject .nodeLabel,
foreignObject .edgeLabel {
  line-height: 1.6;
}

/* 構成図（saa_q_sample_v2 の .mock-diagram を踏襲） */
.sample-diagram {
  padding:10px;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:4px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  text-align:center;
}
.sample-diagram svg { max-width:100%; height:auto; }
.sample-diagram-fallback {
  text-align:left;
  font-family:monospace;
  font-size:12px;
  white-space:pre;
  overflow-x:auto;
  margin:0;
}

/* 「解説」バーに難易度・頻出度を1行・右揃えで併記（saa_q_sample_v2 のメタ帯デザインを踏襲） */
.big.sample-big-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sample-meta {
  font-size: 13px;
  font-weight: normal;
  line-height: 1.2;
  white-space: nowrap;
}
.sample-meta .sample-meta-item { margin-left: 16px; }
.sample-meta .sample-meta-label { color: #666; font-size: 12px; margin-right: 4px; }
.sample-meta .star { color: #FF9900; letter-spacing: 1px; }
.sample-meta .star-off { color: #ccc; letter-spacing: 1px; }

@media(max-width:620px) {
  .sample-meta { font-size: 12px; }
  .sample-meta .sample-meta-item { margin-left: 10px; }
  .sample-meta .sample-meta-label { font-size: 11px; margin-right: 3px; }

  /* 縦積みにして各行を1枚のカードに見せる（線を減らし、右余白を無くす） */
  .sample-keyword-table,
  .sample-keyword-table tbody,
  .sample-keyword-table tr,
  .sample-keyword-table td {
    display:block;
    width:100%;
    box-sizing:border-box;
  }
  /* ヘッダ行（用語／ざっくり解説 等）は縦積みでは冗長なため非表示。
     各行の1列目がラベルとして機能するので情報は失われない */
  .sample-keyword-table tr:first-child { display:none; }
  /* 行の外枠だけを残し、1枚のカードにする */
  .sample-keyword-table tr {
    border:1px solid rgba(0,0,0,.14);
    border-radius:4px;
    margin-bottom:10px;
    overflow:hidden;
  }
  /* セル個別のボーダーは消して二重線を解消 */
  .sample-keyword-table td {
    border:none;
    padding:10px 12px;
  }
  /* 1列目（ラベル/用語）はカードの見出しバーとして表示 */
  .sample-keyword-table td:first-child {
    background:#f7f7f7;
    font-weight:bold;
    white-space:normal;
    border-bottom:1px solid rgba(0,0,0,.10);
  }
}