/* ============================================
   都道府県の学習ページ（learn/prefectures/）だけの部品。css/learn.css の後に読む。
   learn.css の部品は増やさない方針（docs/PLAN_games-design.md）なので、
   めあて・地図・5問テスト・ふりかえりはここに置き、名前は learn- で始める。
   地方の8色は都道府県クイズの地図（games/prefecture-quiz/style.css）に合わせ、隣り合う近畿と九州が
   同じ赤系にならないよう四国と九州だけ変えた
   ============================================ */

.learn-page .r0 { --rc: #4ABDAC; }  /* 北海道 */
.learn-page .r1 { --rc: #6FA8DC; }  /* 東北 */
.learn-page .r2 { --rc: #E67E22; }  /* 関東 */
.learn-page .r3 { --rc: #8E44AD; }  /* 中部 */
.learn-page .r4 { --rc: #E74C3C; }  /* 近畿 */
.learn-page .r5 { --rc: #16A085; }  /* 中国 */
.learn-page .r6 { --rc: #F1C40F; }  /* 四国 */
.learn-page .r7 { --rc: #EC87C0; }  /* 九州 */

/* ---- ① めあて ---- */
.learn-goal {
  margin: 0.3rem 0 0.6rem;
  padding: 0.8rem 1rem;
  border-left: 6px solid var(--learn);
  border-radius: var(--radius-sm);
  background: var(--learn-tint);
  color: var(--learn);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.7;
}

/* ---- 地図 ---- */
.learn-map { max-width: 520px; margin: 0.6rem auto 0.2rem; }
.learn-map svg { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
.learn-map .prefecture { fill: #E6E6E6; stroke: #666; stroke-width: 0.6; }
.learn-map[data-map] .prefecture { cursor: pointer; }
.learn-map.is-colored .prefecture { fill: var(--rc); }
.learn-map .boundary-line { stroke: #BBB; stroke-width: 2; }
.learn-map .prefecture.is-picked { fill: var(--text); }
.learn-map.is-dim .prefecture { opacity: 0.25; }
.learn-map.is-dim .prefecture.is-hit,
.learn-map.is-dim .prefecture.is-picked { opacity: 1; }
.learn-map .prefecture.is-target { fill: #E53935; }
.learn-ring { fill: none; stroke: #E53935; stroke-width: 4; stroke-dasharray: 9 6; pointer-events: none; }
.learn-map-label {
  font-size: 34px;
  font-weight: 700;
  fill: #222;
  stroke: #fff;
  stroke-width: 7px;
  stroke-linejoin: round;
  paint-order: stroke;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.learn-map-label.is-small { font-size: 26px; }
.learn-map-info { min-height: 1.8em; margin: 0.2rem 0 0.8rem; text-align: center; font-weight: 700; color: var(--learn); }

/* 表の地方名の前の色見本（地図と同じ色） */
.learn-chip {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.35em;
  border-radius: 3px;
  background: var(--rc);
  vertical-align: -0.1em;
}
/* スマホ幅で「北海道地方」が色見本と名前の間で2行に割れて読みにくいので、先頭列は折り返さない */
.learn-page .learn-table-wrap td:first-child { white-space: nowrap; }

/* ②の「地図で見る」ボタンを並べる目じるしの一覧 */
.learn-marks { list-style: none; padding: 0 !important; }
.learn-marks li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; padding: 0.45rem 0; border-bottom: 1px dashed var(--line); }
.learn-marks li:last-child { border-bottom: none; }
.learn-marks li > span { flex: 1 1 16rem; }
.learn-show {
  padding: 0.3rem 0.9rem;
  border: 2px solid var(--learn-border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--learn);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}
.learn-show:hover { background: var(--learn-tint); }

/* ---- ③ やってみる ---- */
.learn-play { margin: 0.8rem 0; text-align: center; }

/* ---- ④ たしかめる（5問） ---- */
.learn-quiz [hidden] { display: none !important; }
.learn-quiz-top { display: flex; justify-content: space-between; font-weight: 700; color: var(--text-sub); }
.learn-quiz .learn-map { max-width: 440px; }
.learn-quiz-q { margin: 0.4rem 0 0.7rem !important; text-align: center; font-size: 1.15rem; font-weight: 700; }
.learn-quiz-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.learn-quiz-choices button {
  padding: 0.8rem 0.4rem;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}
.learn-quiz-choices button:hover:not(:disabled) { border-color: var(--learn-border); background: var(--learn-tint); }
.learn-quiz-choices button:disabled { cursor: default; }
.learn-quiz-choices button.is-right { border-color: #2E7D32; background: #E8F5E9; color: #1B5E20; }
.learn-quiz-choices button.is-wrong { border-color: #C62828; background: #FDECEA; color: #B71C1C; }
.learn-quiz-feedback { min-height: 1.6em; margin: 0.7rem 0 0 !important; text-align: center; font-weight: 700; }
.learn-quiz-feedback.is-right,
.learn-quiz-log .is-right { color: #2E7D32; }
.learn-quiz-feedback.is-wrong,
.learn-quiz-log .is-wrong { color: #C62828; }
.learn-quiz-total { margin: 0.3rem 0 !important; text-align: center; font-size: 1.3rem; font-weight: 700; color: var(--learn); }
.learn-quiz-total b { font-size: 1.7rem; }
.learn-quiz-log { list-style: none; padding: 0 !important; }
.learn-quiz-log li { margin: 0.25rem 0; font-weight: 700; }

/* ---- ⑤ ふりかえり ---- */
.learn-reflect label { display: block; margin: 0.9rem 0 0.3rem; font-weight: 700; }
.learn-reflect input,
.learn-reflect textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}
.learn-reflect input:focus,
.learn-reflect textarea:focus { outline: none; border-color: var(--learn-border); box-shadow: 0 0 0 3px var(--learn-tint); }
.learn-reflect textarea { min-height: 8.5em; background: var(--bg); line-height: 1.7; resize: vertical; }
.learn-reflect .learn-small { margin: 0.3rem 0 0; }

/* ---- 入口ページ: 回ごとのカードの状態（たしかめの点数・つぎはここから） ---- */
.learn-status { display: block; margin-top: 0.4rem; font-size: 0.86rem; font-weight: 700; color: var(--learn); }
.learn-status:empty { display: none; }