/* ================================================================
   writing-task2/topic-sentence — local.css
   ================================================================ */

/* ---- Subheadings ---- */
.ts-h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--blue);
  margin: 2rem 0 .75rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--lb5);
}
.ts-h4 {
  font-size: .93rem;
  font-weight: 700;
  color: var(--blue2);
  margin: 1.8rem 0 .65rem;
}
.ts-h5 {
  font-size: .78rem;
  font-weight: 700;
  color: var(--gray2);
  margin: 1.2rem 0 .45rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-family: 'Raleway', sans-serif;
}

/* ---- Inline Highlight ---- */
.ts-hl {
  background: rgba(70,162,218,.12);
  border-radius: 3px;
  padding: .05em .25em;
  color: var(--blue);
  font-weight: 600;
}

/* ---- Problem Type Badge ---- */
.ts-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  color: var(--gray);
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 4px;
  padding: .15rem .55rem;
  margin-right: .4rem;
  font-family: 'Raleway', sans-serif;
  white-space: nowrap;
  vertical-align: middle;
}

/* ---- Labeled Box (base) ---- */
.ts-box {
  border-radius: 8px;
  overflow: hidden;
  margin: 1rem 0 1.3rem;
  border: 1.5px solid transparent;
}
.ts-box__title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-family: 'Raleway', sans-serif;
  padding: .55rem 1.1rem;
}
.ts-box > p {
  padding: .7rem 1.1rem;
  margin: 0;
  font-size: .92rem;
  line-height: 1.82;
}
.ts-box > .a-list {
  padding: .2rem 1.1rem .75rem;
  margin: 0;
}
.ts-box__en {
  font-weight: 600;
  color: var(--blue);
  background: rgba(0,0,0,.025);
}
.ts-box__essay {
  border-top: 1px solid rgba(0,0,0,.07);
  line-height: 1.87;
  color: var(--black);
}
.ts-box__ja {
  font-size: .84rem;
  color: var(--gray2);
  border-top: 1px dashed rgba(0,0,0,.1);
  padding: .5rem 1.1rem .7rem;
}

/* ---- Info Box (blue) ---- */
.ts-box--info {
  border-color: rgba(70,162,218,.25);
  background: rgba(70,162,218,.04);
}
.ts-box--info .ts-box__title {
  background: rgba(70,162,218,.13);
  color: var(--blue);
}

/* ---- Formula / Rule Box (amber) ---- */
.ts-box--formula {
  border-color: rgba(245,161,0,.3);
  background: rgba(245,161,0,.04);
}
.ts-box--formula .ts-box__title {
  background: rgba(245,161,0,.16);
  color: #7a5000;
}

/* ---- Example Box (green) ---- */
.ts-box--example {
  border-color: rgba(56,161,105,.3);
  background: rgba(56,161,105,.04);
}
.ts-box--example .ts-box__title {
  background: rgba(56,161,105,.15);
  color: #276749;
}
.ts-box--example .ts-box__en {
  background: rgba(56,161,105,.06);
  color: #1a3d2b;
}

/* ---- Before / Bad Example Box (muted) ---- */
.ts-box--before {
  border-color: rgba(0,0,0,.12);
  background: rgba(0,0,0,.02);
}
.ts-box--before .ts-box__title {
  background: rgba(0,0,0,.07);
  color: var(--gray2);
}

/* ---- Band Descriptor ---- */
.ts-band {
  border-radius: 8px;
  overflow: hidden;
  margin: .75rem 0 1rem;
  border: 1px solid rgba(4,63,109,.15);
  background: rgba(4,63,109,.03);
}
.ts-band__label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-family: 'Raleway', sans-serif;
  background: var(--blue);
  color: #fff;
  padding: .45rem 1.1rem;
}
.ts-band__en {
  padding: .65rem 1.1rem .45rem;
  margin: 0;
  font-size: .92rem;
  line-height: 1.72;
  color: var(--blue);
  font-weight: 600;
}
.ts-band__ja {
  padding: .35rem 1.1rem .65rem;
  margin: 0;
  font-size: .84rem;
  color: var(--gray2);
  line-height: 1.65;
}

/* ---- Topic / Main Idea Parts Grid ---- */
.ts-parts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin: .5rem 0 1.1rem;
}
.ts-parts .ts-box {
  margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .ts-h3 { font-size: .97rem; margin-top: 1.7rem; }
  .ts-h4 { font-size: .9rem; margin-top: 1.4rem; }
  .ts-box__title { padding: .5rem .9rem; }
  .ts-box > p { padding: .6rem .9rem; }
  .ts-box > .a-list { padding: .15rem .9rem .65rem; }
  .ts-box__ja { padding: .45rem .9rem .65rem; }
  .ts-band__en { padding: .55rem .9rem .4rem; }
  .ts-band__ja { padding: .3rem .9rem .55rem; }
  .ts-parts { grid-template-columns: 1fr; }
}