/* ============================================================
   /free-tools/writing-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・タスク2の2枚のカードを並べる分だけレイアウトが増えている。
   ============================================================ */

/* --- タスク1・タスク2のカードを並べる ------------------------- */
.ws-calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
@media (max-width: 56rem) {
  .ws-calc-grid {
    grid-template-columns: 1fr;
  }
}

.ws-calc-card {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.ws-calc-card__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-size: var(--fs-h3);
  color: var(--ink-strong);
}
.ws-calc-card__en {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-subtle);
}

.ws-calc {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* 4項目を常に2列×2行で並べる。auto-fitで自動折り返しさせると、
   ラベルが2行になる項目とならない項目が混ざったときに列がガタつくため
   固定2列にしてある（2026-08-21・ユーザー指摘）。 */
.ws-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
}
@media (max-width: 26rem) {
  .ws-inputs {
    grid-template-columns: 1fr;
  }
}

.ws-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
/* min-height で3行ぶん（日本語1行＋英語ラベルが2行に折り返す場合）を確保する。
   "Coherence and Cohesion" のように折り返す項目と折り返さない項目が同じ行に
   並ぶと、確保しないとセレクトの開始位置が項目ごとにずれてガタつく
   （2026-08-21・ユーザー指摘）。 */
.ws-field__label {
  display: flex;
  flex-direction: column;
  min-height: 2.9rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--ink-strong);
}
.ws-field__en {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-subtle);
}
.ws-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;
}
.ws-field__select:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

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

/* --- タスク1・タスク2をあわせた推定 ---------------------------- */
.ws-combined {
  margin-top: 0;
}
.ws-combined__result {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-body-lg);
  color: var(--ink-strong);
}
.ws-combined__result strong {
  font-family: var(--font-display);
  font-size: 1.4em;
  color: var(--sky-700);
}
.ws-combined__result span {
  margin-left: 0.5em;
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--ink-muted);
}

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

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

.ws-examples {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  background: var(--surface);
  font-size: var(--fs-small);
  font-variant-numeric: lining-nums tabular-nums;
}
.ws-examples th,
.ws-examples td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}
.ws-examples thead th {
  border-bottom: 1px solid var(--line-strong);
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--ink-muted);
}
.ws-examples tbody tr:last-child td {
  border-bottom: 0;
}
.ws-examples__band {
  font-weight: 800;
  color: var(--sky-700);
}
.ws-examples__note-col,
.ws-examples__note {
  min-width: 18rem;
  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列グリッドに固定する（speaking-score/css/local.css
   と同じ理由・2026-08-21）。 */
section[aria-labelledby="ws-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="ws-cta-title"] .ds-actions {
    grid-template-columns: 1fr;
  }
}