/* ================================================================
   writing-task2/significant-vs-important — local.css
   ================================================================ */

/* 例文カード（自然／不自然／意味が変わる） */
.svi-ex {
  margin: .4rem 0 1.1rem;
  padding: .9rem 1.1rem;
  border-radius: 8px;
  border-left: 3px solid var(--lb4);
  background: rgba(4,63,109,.04);
}
.svi-ex--ok {
  border-left-color: #2e7d32;
  background: rgba(46,125,50,.06);
}
.svi-ex--ng {
  border-left-color: #c62828;
  background: rgba(198,40,40,.05);
}
.svi-ex--warn {
  border-left-color: #ef6c00;
  background: rgba(239,108,0,.06);
}
.svi-ex__tag {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  margin-bottom: .35rem;
}
.svi-ex--ok .svi-ex__tag { color: #2e7d32; }
.svi-ex--ng .svi-ex__tag { color: #c62828; }
.svi-ex--warn .svi-ex__tag { color: #ef6c00; }
.svi-ex__en {
  font-size: .95rem;
  color: var(--black);
  margin: 0;
  line-height: 1.75;
}
.svi-ex__ja {
  display: block;
  color: var(--gray3);
  font-size: .85rem;
  margin-top: .15rem;
}
.svi-ex__note {
  font-size: .85rem;
  color: var(--gray3);
  margin: .45rem 0 0;
  padding-top: .45rem;
  border-top: 1px dashed rgba(4,63,109,.15);
  line-height: 1.7;
}

@media (max-width: 640px) {
  .svi-ex { padding: .8rem .9rem; }
}
