/* ============================================================
   /free-tools/speaking-score/ 専用のスタイル

   読み込み順: tokens → layout → button → course/css/local.css → このファイル。
   course/css/local.css からは .course-info-box / .faq-section-inline を借りている。
   構造は /free-tools/band-score/css/local.css の .bs-* と揃えてある
   （計算機が1本だけなので、writing-score のような2枚組レイアウトは無い）。
   ============================================================ */

.ss-calc {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-5);
  align-items: start;
  margin-bottom: var(--space-6);
}
@media (max-width: 48rem) {
  .ss-calc {
    grid-template-columns: 1fr;
  }
}

/* 4項目を常に2列×2行で並べる。writing-score/css/local.css の .ws-inputs と同じ理由
   （ラベルが2行になる項目とならない項目が混ざると auto-fit では列がガタつく）。 */
.ss-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
}
@media (max-width: 26rem) {
  .ss-inputs {
    grid-template-columns: 1fr;
  }
}

.ss-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
/* min-height で2行ぶんを確保する。writing-score/css/local.css の
   .ws-field__label と同じ理由（折り返す項目・折り返さない項目が混在すると
   セレクトの開始位置がずれる）。 */
.ss-field__label {
  display: flex;
  flex-direction: column;
  min-height: 3rem;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink-strong);
}
.ss-field__en {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-subtle);
}
.ss-field__select {
  width: 100%;
  padding: var(--space-3) var(--space-8) var(--space-3) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235b6b7c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 0.75rem;
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-strong);
  appearance: none;
  cursor: pointer;
}
.ss-field__select:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.ss-result {
  padding: var(--space-5);
  border: 1px solid var(--sky-300);
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: center;
}
.ss-result__label {
  margin: 0;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-muted);
}
.ss-result__value {
  margin: var(--space-1) 0 var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 8vw, 4rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--sky-700);
}
.ss-result__detail {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-muted);
}

/* --- 丸め方の説明 -------------------------------------------- */
.ss-rules {
  max-width: var(--measure);
  margin: var(--space-6) 0;
  padding: 0;
  list-style: none;
}
.ss-rules li {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}
.ss-rules li:last-child {
  border-bottom: 1px solid var(--line);
}
.ss-rules strong {
  color: var(--ink-strong);
}

.ss-table-scroll {
  overflow-x: auto;
  margin: 0 0 var(--space-6);
  -webkit-overflow-scrolling: touch;
}

.ss-examples {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  background: var(--surface);
  font-size: var(--fs-small);
  font-variant-numeric: lining-nums tabular-nums;
}
.ss-examples th,
.ss-examples td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}
.ss-examples thead th {
  border-bottom: 1px solid var(--line-strong);
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--ink-muted);
}
.ss-examples tbody tr:last-child td {
  border-bottom: 0;
}
.ss-examples__band {
  font-weight: 800;
  color: var(--sky-700);
}
.ss-examples__note-col,
.ss-examples__note {
  min-width: 16rem;
  text-align: left;
  white-space: normal;
  font-size: var(--fs-micro);
  line-height: var(--lh-body);
  color: var(--ink-muted);
}

/* --- CTAのボタン列 --------------------------------------------
   .ds-actions は共通デザインシステムの flex-wrap なので、他ページに影響しない
   よう、このページのCTAだけ2列グリッドに固定する。4本のボタンが3+1で折り返すと
   最後の1本だけ浮いて見えるため（2026-08-21・ユーザー指摘）。 */
section[aria-labelledby="ss-cta-title"] .ds-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: start;
  gap: var(--space-3) var(--space-4);
}
@media (max-width: 30rem) {
  section[aria-labelledby="ss-cta-title"] .ds-actions {
    grid-template-columns: 1fr;
  }
}