/* ================================================================
   writing-task2/task-misinterpretation — local.css
   ================================================================ */

/* ---- Column (コラム) ---- */
.tmi-column {
  border: 1.5px solid rgba(103, 58, 183, .22);
  background: rgba(103, 58, 183, .04);
  border-radius: 8px;
  overflow: hidden;
  margin: 1.2rem 0 1.4rem;
}
.tmi-column__label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-family: 'Raleway', sans-serif;
  background: rgba(103, 58, 183, .12);
  color: #4a2f8a;
  padding: .55rem 1.1rem;
}
.tmi-column__body {
  padding: .8rem 1.1rem .95rem;
}
.tmi-column__title {
  font-size: .95rem;
  font-weight: 700;
  color: #3d2a6e;
  margin: 0 0 .5rem;
}
.tmi-column__body p {
  margin: 0 0 .7rem;
  font-size: .9rem;
  line-height: 1.85;
}
.tmi-column__body p:last-child {
  margin-bottom: 0;
}

/* ---- Paraphrase / Idea NG block ---- */
.tmi-pp {
  border: 1.5px solid rgba(0, 0, 0, .1);
  background: rgba(0, 0, 0, .02);
  border-radius: 8px;
  overflow: hidden;
  margin: .8rem 0 1.2rem;
}
.tmi-pp__row {
  display: flex;
  gap: .6rem;
  align-items: baseline;
  padding: .55rem 1rem;
  font-size: .92rem;
  line-height: 1.7;
}
.tmi-pp__row + .tmi-pp__row {
  border-top: 1px dashed rgba(0, 0, 0, .1);
}
.tmi-pp__tag {
  flex-shrink: 0;
  font-size: .68rem;
  font-weight: 700;
  font-family: 'Raleway', sans-serif;
  letter-spacing: .05em;
  border-radius: 4px;
  padding: .12rem .5rem;
  white-space: nowrap;
}
.tmi-pp__tag--task {
  background: rgba(4, 63, 109, .1);
  color: var(--blue);
}
.tmi-pp__tag--ng {
  background: rgba(214, 69, 69, .12);
  color: #a63b3b;
}
.tmi-pp__text {
  font-weight: 600;
  color: var(--black);
}
.tmi-pp__why {
  font-size: .84rem;
  color: var(--gray2);
  border-top: 1px solid rgba(0, 0, 0, .07);
  padding: .5rem 1rem .7rem;
  margin: 0;
  line-height: 1.7;
}

/* ---- Sentence Role Risk Comparison ---- */
.tmi-risk {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
  margin: 1rem 0 1.4rem;
}
.tmi-risk__card {
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid transparent;
}
.tmi-risk__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
}
.tmi-risk__badge {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  font-family: 'Raleway', sans-serif;
  border-radius: 4px;
  padding: .12rem .5rem;
  white-space: nowrap;
}
.tmi-risk__title {
  font-size: .85rem;
  font-weight: 700;
}
.tmi-risk__card ul {
  list-style: none;
  margin: 0;
  padding: .65rem 1rem .3rem;
}
.tmi-risk__card li {
  position: relative;
  font-size: .88rem;
  line-height: 1.7;
  padding-left: 1.1em;
  margin-bottom: .45rem;
}
.tmi-risk__card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .45em;
  height: .45em;
  border-radius: 50%;
}
.tmi-risk__note {
  font-size: .82rem;
  color: var(--gray2);
  padding: .15rem 1rem .8rem;
  margin: 0;
  line-height: 1.7;
}
.tmi-risk__card--high {
  border-color: rgba(214, 69, 69, .3);
  background: rgba(214, 69, 69, .04);
}
.tmi-risk__card--high .tmi-risk__head {
  background: rgba(214, 69, 69, .12);
}
.tmi-risk__card--high .tmi-risk__badge {
  background: #c94a4a;
  color: #fff;
}
.tmi-risk__card--high .tmi-risk__title {
  color: #8f2f2f;
}
.tmi-risk__card--high li::before {
  background: rgba(214, 69, 69, .55);
}
.tmi-risk__card--low {
  border-color: rgba(56, 161, 105, .3);
  background: rgba(56, 161, 105, .04);
}
.tmi-risk__card--low .tmi-risk__head {
  background: rgba(56, 161, 105, .13);
}
.tmi-risk__card--low .tmi-risk__badge {
  background: #2f855a;
  color: #fff;
}
.tmi-risk__card--low .tmi-risk__title {
  color: #276749;
}
.tmi-risk__card--low li::before {
  background: rgba(56, 161, 105, .55);
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .tmi-column__label { padding: .5rem .9rem; }
  .tmi-column__body { padding: .7rem .9rem .85rem; }
  .tmi-pp__row { padding: .5rem .9rem; flex-direction: column; gap: .25rem; }
  .tmi-pp__why { padding: .45rem .9rem .65rem; }
  .tmi-risk { grid-template-columns: 1fr; }
}