/* ================================================================
   writing-task2/number-amount — local.css
   ================================================================ */

/* Error correction list (inline error → hint) */
.na-corr {
  list-style: none;
  padding: 0;
  margin: .5rem 0 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.na-corr li {
  padding: .7rem 1rem;
  background: rgba(176,48,48,.05);
  border-left: 3px solid rgba(176,48,48,.3);
  border-radius: 0 6px 6px 0;
}
.na-corr__sent {
  display: block;
  font-size: .92rem;
  font-style: italic;
  color: var(--black);
  line-height: 1.6;
  margin-bottom: .2rem;
}
.na-corr__hint {
  display: block;
  font-size: .83rem;
  color: #b03030;
  line-height: 1.5;
}

/* Two-variant comparison list */
.na-compare {
  list-style: none;
  padding: 0;
  margin: .5rem 0 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.na-compare li {
  padding: .7rem 1rem;
  background: rgba(70,162,218,.05);
  border-left: 3px solid var(--lb4);
  border-radius: 0 6px 6px 0;
  font-size: .92rem;
  line-height: 1.75;
}
.na-compare strong {
  color: var(--blue);
}
.na-compare__note {
  display: block;
  font-size: .82rem;
  color: var(--gray2);
  margin-top: .15rem;
}

/* Alternative expression block — dim the "original" row */
.na-alt__orig {
  background: rgba(0,0,0,.04);
}
.na-alt__orig .a-sample__en {
  color: var(--gray2);
}

@media (max-width: 640px) {
  .na-corr li,
  .na-compare li { padding: .6rem .85rem; }
}