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

   読み込み順: tokens → layout → button → course/css/local.css → このファイル。
   course/css/local.css からは .course-info-box / .faq-section-inline /
   .wc-table-scroll（/course/writing-correction/ で定義）を借りている。
   ============================================================ */

/* --- 計算機の本体 -------------------------------------------- */
/* 入力と結果を横並びにし、狭い画面では縦に積む。
   結果は視線の終点なので、面を持たせて他と区別する。 */
.bs-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) {
  .bs-calc {
    grid-template-columns: 1fr;
  }
}

.bs-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  gap: var(--space-3);
}

.bs-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.bs-field__label {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink-strong);
}
.bs-field__en {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-subtle);
}
/* select は OS 既定の見た目に任せず、DS の面と揃える。
   appearance:none にすると矢印が消えるので、背景画像で描き直す。 */
.bs-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;
}
.bs-field__select:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.bs-result {
  padding: var(--space-5);
  border: 1px solid var(--sky-300);
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: center;
}
.bs-result__label {
  margin: 0;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-muted);
}
.bs-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);
}
.bs-result__detail {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-muted);
}

/* --- 目標からの逆算 ------------------------------------------ */
.bs-target {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.bs-target__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.bs-target__head .bs-field__select {
  width: auto;
  min-width: 7rem;
}

.bs-gap__lead {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-body);
  color: var(--ink);
}
.bs-gap--done .bs-gap__lead {
  font-weight: 700;
  color: var(--sky-700);
}
.bs-gap__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}
.bs-gap__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--r-sm);
  background: var(--surface-quiet);
  font-size: var(--fs-small);
}
.bs-gap__item--no {
  color: var(--ink-subtle);
}
.bs-gap__skill {
  font-weight: 700;
  color: var(--ink-strong);
}
.bs-gap__need {
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-muted);
}
.bs-gap__need strong {
  font-size: var(--fs-body-lg);
  color: var(--sky-700);
}
.bs-gap__diff {
  margin-left: 0.25em;
  font-size: var(--fs-micro);
  color: var(--ink-subtle);
}
.bs-gap__hint,
.bs-gap__none {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-muted);
}
.bs-gap__hint strong {
  color: var(--ink-strong);
}

/* --- 丸め方の説明 -------------------------------------------- */
.bs-rules {
  max-width: var(--measure);
  margin: var(--space-6) 0;
  padding: 0;
  list-style: none;
}
.bs-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);
}
.bs-rules li:last-child {
  border-bottom: 1px solid var(--line);
}
.bs-rules strong {
  color: var(--ink-strong);
}

/* 狭い画面では表を潰さず横スクロールさせる。
   列を落とすと合計・平均・オーバーオールの対応が読めなくなるため。 */
.bs-table-scroll {
  overflow-x: auto;
  margin: 0 0 var(--space-6);
  -webkit-overflow-scrolling: touch;
}

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

/* 表の右端に置く「読み方」列。数字だけだと規則が読み取れないので、
   その行が何を示しているかを表の中で完結させる。 */
.bs-examples__note-col,
.bs-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);
}

.bs-gap__lead strong {
  font-size: var(--fs-body-lg);
  color: var(--sky-700);
}
.bs-gap__sub {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-small);
  color: var(--ink-muted);
}