/* ============================================================
   /course/speaking/ 専用のスタイル

   前提: tokens.css → layout.css → button.css → course/css/local.css の順で
   読み込んだあとに、このファイルを最後に置く。
   /course/writing-correction/css/local.css と同じ組み立て方で、
   借りている上位クラスも同じ（.course-info-box / .course-ach-list /
   .course-band / .faq-section-inline）。

   ▲ 添削タグ（.pr / .coherence / .lrgr / .strike / .insert / .comment /
     .advice）の色は scss/correction.css と同じ値にそろえてあるが、
     あちらを読み込むことはしない。correction.css は印刷用の1枚ページ向けで、
     素の body に line-height と padding-bottom: 100px を当てるため、
     公開ページに混ぜるとレイアウトが崩れる。
     値を変えるときは2か所（あちらとここ）を見ること。
   ============================================================ */

/* --- ヒーローと共通の小物 ------------------------------------ */
.sp-hero .ds-lede,
.sp-cta .ds-lede {
  max-width: var(--measure);
}

.sp-h3 {
  margin: var(--space-8) 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--ink-strong);
}
.sp-note {
  max-width: var(--measure);
  margin: 0 0 var(--space-4);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-muted);
}
.sp-note--small {
  font-size: var(--fs-micro);
  color: var(--ink-subtle);
}
.sp-note a {
  color: var(--sky-700);
}

/* ============================================================
   デモ（フィードバックの実物）
   受講生にお渡ししている資料の見た目に寄せる。1枚の紙として見せたいので、
   セクションの地色から浮かせた白い面の上に置く。
   ============================================================ */
.sp-demo {
  margin: var(--space-6) 0 0;
  padding: var(--space-6) var(--space-5) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-1, 0 1px 3px rgb(4 63 109 / 6%));
  /* 資料そのものは行間を広く取っている。読み比べる文章なのでここも広げる。 */
  line-height: 1.9;
}
@media (min-width: 48rem) {
  .sp-demo {
    padding: var(--space-7) var(--space-7) var(--space-6);
  }
}
.sp-demo__caption {
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--sky-800);
}

/* 設問ごとのかたまり */
.sp-qa {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px dashed var(--line);
}
.sp-qa:first-of-type {
  border-top: 0;
}
.sp-qa__part {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  line-height: 1.5;
}
.sp-qa__part-badge {
  padding: 0.15em 0.7em;
  border-radius: 999px;
  background: var(--sky-700);
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
}
.sp-qa__part-note {
  font-size: var(--fs-micro);
  color: var(--ink-subtle);
}

/* Q行・A行。speaking-summit/print/index.php の .qa-q / .qa-a と同じ役割。 */
.sp-demo .qa-q {
  margin: 0 0 var(--space-3);
  padding: 0.45rem 0.9rem;
  border-radius: var(--r-sm);
  background: var(--sky-50);
  color: var(--sky-800);
  font-weight: 700;
  line-height: 1.6;
}
.sp-demo .qa-a {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--ink);
  /* 修正タグが行の中で折り返しても読めるよう、単語の途中では折らない。 */
  overflow-wrap: break-word;
}

/* Cue Card（Part 2 だけ） */
.sp-cue {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--sky-300);
  background: var(--surface-quiet);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-small);
  line-height: 1.7;
}
.sp-cue__lead,
.sp-cue__closing {
  margin: 0;
  color: var(--ink-muted);
}
.sp-cue__list {
  margin: var(--space-1) 0;
  padding-inline-start: 1.4em;
  color: var(--ink);
}

/* 提出された回答の音声（未収録のあいだは出ない） */
.sp-audio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
}
.sp-audio__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--ink-muted);
}
.sp-demo audio {
  max-width: 100%;
  height: 2.25rem;
  vertical-align: middle;
}

/* --- 添削タグ（correction.css と同じ値） --------------------- */
.sp-demo .pr        { background: #B8E2F4; }
.sp-demo .coherence { background: #FDECCC; }
.sp-demo .lrgr      { font-weight: 600; }
.sp-demo .strike {
  color: #AEAFB1;
  text-decoration: line-through;
}
.sp-demo .insert {
  margin-left: 0.3rem;
  color: #EB4878;
  font-weight: 600;
  text-decoration: underline;
}
.sp-demo .comment {
  margin-left: 0.3rem;
  padding: 0 0.3rem;
  border-radius: 3px;
  background: #EDF3F7;
  color: #36658A;
  font-size: 0.85em;
}
.sp-demo .advice {
  display: block;
  margin: 0 0 var(--space-2);
  padding: var(--space-4) var(--space-5);
  border: 1px solid #CCD8E1;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, #fff, #EAF1F6);
  color: #043F6D;
  font-size: var(--fs-small);
}

/* モデルアンサー。資料では .model-audio の緑の枠にあたる。
   公開デモでは音声が未収録の状態がありうるので、
   読み上げ用の原稿を必ず本文として出し、mp3 はあれば下に足す作りにしている。 */
.sp-demo .model-audio {
  margin: var(--space-4) 0 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid #A5D6A7;
  border-radius: var(--r-sm);
  background: #F3FAF3;
}
.model-audio__head {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin: 0 0 var(--space-2);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  color: #2E6B31;
}
.model-audio__text {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-small);
  line-height: 1.85;
  color: var(--ink);
}
.model-audio__pending {
  margin: 0;
  font-size: var(--fs-micro);
  color: var(--ink-subtle);
}

/* --- 凡例 ---------------------------------------------------- */
.sp-demo__legend-title {
  margin: var(--space-7) 0 var(--space-2);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink-strong);
}
.sp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  line-height: 1.9;
}

/* ============================================================
   採点の4観点
   ============================================================ */
.sp-criteria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0 var(--space-8);
  padding: 0;
  list-style: none;
}
.sp-criterion {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.sp-criterion__en {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  color: var(--sky-600);
}
.sp-criterion__ja {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--ink-strong);
}
.sp-criterion__desc {
  flex: 1;
  margin: 0 0 var(--space-3);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-muted);
}
/* 観点とデモの色を結ぶ1行。ここだけタグの色をカードの中で再現する。 */
.sp-criterion__tag {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-micro);
  color: var(--ink-subtle);
}
.sp-criterion__tag .pr        { background: #B8E2F4; }
.sp-criterion__tag .coherence { background: #FDECCC; }
.sp-criterion__tag .lrgr      { font-weight: 700; }
.sp-criterion__tag span {
  padding: 0.1em 0.35em;
  border-radius: 3px;
  color: var(--ink);
}
.sp-criterion__link {
  margin-top: auto;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--sky-700);
}

/* ============================================================
   オンライン英会話との違い
   列を落とすと比較そのものが成り立たないので、狭い画面では横スクロールさせる
   （writing-correction の .wc-table-scroll と同じ考え方）。
   ============================================================ */
.sp-table-scroll {
  overflow-x: auto;
  margin: var(--space-6) 0 var(--space-8);
  -webkit-overflow-scrolling: touch;
}
.sp-vs {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--fs-small);
  background: var(--surface);
}
.sp-vs th,
.sp-vs td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.sp-vs thead th {
  border-bottom: 1px solid var(--line-strong);
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--ink-muted);
  white-space: nowrap;
}
.sp-vs tbody th {
  width: 7rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--ink-muted);
  white-space: nowrap;
}
.sp-vs tbody tr:last-child th,
.sp-vs tbody tr:last-child td {
  border-bottom: 0;
}
/* 当校の列だけ色を載せる。表全体を塗ると、どちらの列を読むのか分かりにくくなる。 */
.sp-vs__ours {
  background: var(--sky-50);
  font-weight: 700;
  color: var(--sky-800);
}
.sp-vs thead th:last-child {
  background: var(--sky-50);
  color: var(--sky-800);
}

/* ============================================================
   2つの受け方
   ============================================================ */
.sp-routes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0 var(--space-3);
  padding: 0;
  list-style: none;
}
.sp-route {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.sp-route__eyebrow {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--sky-600);
}
.sp-route__name {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--ink-strong);
}
.sp-route__lead {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink);
}
.sp-route__facts {
  flex: 1;
  margin: 0 0 var(--space-4);
}
.sp-route__facts > div {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line);
}
.sp-route__facts dt {
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--ink-muted);
}
.sp-route__facts dd {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink);
}
.sp-route__price {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--ink-strong);
}
.sp-route__price-cur {
  margin-right: 0.1em;
  font-size: var(--fs-small);
}
.sp-route__price-unit {
  margin-left: 0.2em;
  font-size: var(--fs-micro);
  font-weight: 400;
  color: var(--ink-muted);
}
.sp-route__price-yen {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 400;
  color: var(--ink-subtle);
}
.sp-route__link {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--sky-700);
}

/* --- サミットの1週間 ----------------------------------------- */
/* 曜日と中身の2列。狭い画面では曜日を上に積む。 */
.sp-week {
  margin: var(--space-4) 0 var(--space-3);
  padding: 0;
  list-style: none;
  counter-reset: sp-week;
}
.sp-week__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
}
.sp-week__item:last-child {
  border-bottom: 1px solid var(--line);
}
@media (min-width: 36rem) {
  .sp-week__item {
    grid-template-columns: 11rem 1fr;
  }
}
.sp-week__day {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--sky-700);
}
.sp-week__act {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink);
}

/* --- 向いていない場合 ---------------------------------------- */
.sp-notfor {
  max-width: var(--measure);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.sp-notfor li {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}
.sp-notfor li:last-child {
  border-bottom: 1px solid var(--line);
}
.sp-notfor strong {
  color: var(--ink-strong);
}
.sp-notfor a {
  color: var(--sky-700);
}