/* ============================================================
 * v3-taisaku.css — group layer for the 試験別対策ガイド pages
 *   taisaku-case / eiken / ielts / toefl / toeic / versant
 * Load order: … → rin-v3.css → v3-site.css → v3-taisaku.css
 * Scope: body.v3-site[data-seg="taisaku"] (all six pages carry it)
 *
 * Only spacing, table fit and the leftover legacy link chips are handled here.
 * Colours, type and the component base come from v3-site.css.
 * !important is used only where the page markup carries an inline style
 * (padding-top:0 / margin-top:var(--sp-*)).
 * ============================================================ */

/* ---------- page head → first section ---------- */
/* the first section carries style="padding-top:0"; the callout ran into the STRUCTURE label */
body.v3-site[data-seg="taisaku"] .tk-hero + .section { padding-top: 64px !important; }

/* titles: avoid a single glyph alone on the last line (desktop only; on phones balance made the title needlessly narrow) */
@media (min-width: 721px) {
  body.v3-site[data-seg="taisaku"] .tk-hero h1 { text-wrap: balance; }
}

/* ---------- tables and the notes under them ---------- */
body.v3-site[data-seg="taisaku"] .tk-table-wrap + p.muted { margin-top: 28px !important; }
body.v3-site[data-seg="taisaku"] .tk-table-wrap ~ p.muted { max-width: 46em; line-height: 2; }

/* member-only callout and its button had 18px on each side */
body.v3-site[data-seg="taisaku"] .tk-table-wrap + .lock-callout { margin-top: 40px; }
body.v3-site[data-seg="taisaku"] .lock-callout + .cta-row { margin-top: 28px !important; }

/* a section that opens with a small label (関連ガイド) does not need the label's 56px on top of the section padding */
body.v3-site[data-seg="taisaku"] .section > .wrap > .free-h:first-child { margin-top: 0; }

/* ---------- あわせて練習したい… (case / versant): legacy pill chips → v3 chips ---------- */
body.v3-site[data-seg="taisaku"] .tk-other > p.muted { max-width: 46em; line-height: 2; }
body.v3-site[data-seg="taisaku"] .tk-links { gap: 10px; margin-top: 14px; }
body.v3-site[data-seg="taisaku"] .tk-links a {
  border: 1px solid var(--v3-rule-2);
  border-radius: 0;
  background: transparent;
  color: var(--v3-text);
  padding: 11px 18px;
  font-size: 14px;
  line-height: 1.6;
  text-decoration: none;
  box-shadow: none;
}
body.v3-site[data-seg="taisaku"] .tk-links a:hover { border-color: var(--v3-accent); background: var(--v3-accent-wash); }

/* ---------- phones ---------- */
@media (max-width: 720px) {
  body.v3-site[data-seg="taisaku"] .tk-hero + .section { padding-top: 44px !important; }

  /* the 3-column tables were min-width:560px and hid the right column past the screen edge.
     Fit them to the column instead; the wrapper keeps overflow-x:auto as a fallback. */
  body.v3-site[data-seg="taisaku"] .tk-table { min-width: 0; font-size: 14px; }
  body.v3-site[data-seg="taisaku"] .tk-table :is(th, td) { padding: 14px 12px 14px 0; line-height: 1.75; overflow-wrap: break-word; }
  body.v3-site[data-seg="taisaku"] .tk-table :is(th, td):last-child { padding-right: 0; }
  /* keep the label column and the short count column from collapsing to 2–3 glyphs per line */
  body.v3-site[data-seg="taisaku"] .tk-table :is(th, td):is(:first-child, :last-child) { min-width: 5em; }
  body.v3-site[data-seg="taisaku"] .tk-table thead th { white-space: normal; font-size: 11px; letter-spacing: .08em; line-height: 1.6; }

  body.v3-site[data-seg="taisaku"] .tk-table-wrap + p.muted { margin-top: 22px !important; }
  body.v3-site[data-seg="taisaku"] .tk-table-wrap + .lock-callout { margin-top: 32px; }
  body.v3-site[data-seg="taisaku"] .lock-callout { padding: 20px 20px; }
}