/* やさしい版（yasashii.html）だけの見た目。色は style.css の変数を通す（暗い配色でも読めるように） */

.ys-lead {
  font-size: 0.9em;
  line-height: 1.9;
  color: var(--muted);
  margin: 0 0 14px;
  text-align: left;
}

/* 群の入口。問題より先に目に入るので、地色だけで区切って控えめに */
.ys-intro {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px 6px;
  margin: 0 0 16px;
  text-align: left;
}
.ys-intro-title {
  font-family: var(--font-display);
  font-size: 1em;
  color: var(--primary);
  margin: 0 0 8px;
}
.ys-intro ul { margin: 0; padding-left: 1.2em; }
.ys-intro li { line-height: 1.9; margin: 0 0 8px; font-size: 0.93em; }

.ys-label {
  font-size: 0.78em;
  color: var(--muted);
  margin: 0 0 6px;
  text-align: left;
}
.ys-q {
  line-height: 2;
  font-size: 1.05em;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 22px;
  text-align: left;
}
.ys-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}

.ys-a {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.85;
  color: var(--ink);
  margin: 0 0 12px;
}
.ys-map {
  font-size: 0.85em;
  color: var(--muted);
  line-height: 1.8;
  margin: 0 0 12px;
}

/* 元の問題。答えの下に並べて、効く語に朱の印 */
.ys-orig {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 4px;
}
.ys-orig-title {
  font-size: 0.8em;
  color: var(--muted);
  margin: 0 0 6px;
}
.ys-ot {
  line-height: 1.95;
  font-size: 0.95em;
  color: var(--ink);
  margin: 0 0 6px;
}
.ys-kiku {
  background: var(--seal-soft);
  color: var(--seal);
  font-weight: 700;
  border-radius: 3px;
  padding: 0 2px;
}
.ys-orig-note {
  font-size: 0.75em;
  color: var(--muted);
  margin: 0 0 12px;
}
.ys-exp-link {
  display: inline-block;
  font-size: 0.88em;
  color: var(--primary);
  text-decoration: none;
}
.ys-exp-link:hover { text-decoration: underline; }

/* 小窓で説明する語。文の流れを崩さないよう、ボタンでも文字のように見せる */
.ys-term {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-bottom: 1.5px dotted var(--primary);
  -webkit-tap-highlight-color: transparent;
}
.ys-term:hover, .ys-term:focus-visible { color: var(--primary); }

.ys-pop {
  position: absolute;
  z-index: 50;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 12px 34px 10px 14px;
  text-align: left;
}
.ys-pop-close {
  position: absolute;
  top: 4px;
  right: 6px;
  border: none;
  background: none;
  font-size: 1.2em;
  color: var(--muted);
  cursor: pointer;
}
.ys-pop-t {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 6px;
}
.ys-pop-m { line-height: 1.8; font-size: 0.92em; margin: 0 0 6px; }
.ys-pop-e { line-height: 1.8; font-size: 0.85em; color: var(--muted); margin: 0; }

/* 群のまとめ（並べて読むと分かる組） */
.ys-pairs { width: 100%; border-collapse: collapse; text-align: left; }
.ys-pairs th, .ys-pairs td {
  border-top: 1px solid var(--line);
  padding: 10px 6px;
  vertical-align: top;
  font-size: 0.9em;
  line-height: 1.8;
}
.ys-pairs th { white-space: nowrap; color: var(--muted); font-weight: 500; width: 1%; }