/*
  世界史まとめ 部品（記事のHTMLで使うクラス）
  すべて wh- で始まる。色の切り替えは is-mao / is-deng / is-sov / is-kmt。
*/

.wh { --c: var(--wh-ink); --c-bg: var(--wh-soft); }
.is-mao  { --c: var(--wh-mao);  --c-bg: var(--wh-mao-bg); }
.is-deng { --c: var(--wh-deng); --c-bg: var(--wh-deng-bg); }
.is-sov  { --c: var(--wh-sov);  --c-bg: var(--wh-sov-bg); }
.is-kmt  { --c: var(--wh-kmt);  --c-bg: var(--wh-kmt-bg); }

/* 導入文・小見出しラベル */
.wh-lead { font-size: 15px; color: var(--wh-sub); line-height: 1.7; }
.wh-label { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--wh-sub); letter-spacing: .02em; }
.wh-small { font-size: 13px; color: var(--wh-sub); line-height: 1.7; }

/* ===== レベル記号 1 / 2 / 3 ===== */
.wh-lv {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 4px; font-size: 12px; font-weight: 700; line-height: 1;
  font-family: var(--wh-sans);
}
.wh-lv.lv1 { background: var(--wh-ink); color: #FFFFFF; }
.wh-lv.lv2 { border: 1px solid var(--wh-ink); color: var(--wh-ink); }
.wh-lv.lv3 { border: 1px dashed var(--wh-sub); color: var(--wh-sub); }
.wh-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--wh-body); }
.wh-legend > span { display: inline-flex; align-items: center; gap: 6px; }

/* ===== 4本柱（レベル1） ===== */
.wh-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wh-era { display: none; }
.wh-pillar {
  border: 1.5px solid var(--c); background: var(--c-bg); border-radius: 10px;
  padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 2px;
}
.wh-pillar__era { font-size: 11px; font-weight: 700; color: var(--c); }
.wh-pillar__year { font-family: var(--wh-serif); font-weight: 800; font-size: 34px; line-height: 1.05; color: var(--c); }
.wh-pillar__name { font-size: 17px; font-weight: 700; color: var(--wh-ink); line-height: 1.4; }
.wh-pillar__desc { font-size: 13px; line-height: 1.6; color: var(--wh-body); }
@media (min-width: 700px), print {
  .wh-pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wh-era {
    display: block; background: var(--c); color: #FFFFFF; border-radius: 4px;
    padding: 4px 10px; font-size: 13px; font-weight: 700; line-height: 1.5;
  }
  .wh-era--span3 { grid-column: span 3; }
  .wh-pillar__era { display: none; }
  .wh-pillar__year { font-size: 40px; }
}

/* ===== 番号付きの段（起承転結など） ===== */
.wh-steps { list-style: none; margin: 0; padding: 0; border: 1px solid var(--wh-ink); border-radius: 10px; overflow: hidden; background: #FFFFFF; }
.wh-steps > li { display: flex; gap: 14px; padding: 12px 14px; border-top: 1px solid var(--wh-line); }
.wh-steps > li:first-child { border-top: 0; }
.wh-steps__mark {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  background: var(--c, var(--wh-ink)); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--wh-serif); font-weight: 800; font-size: 19px; line-height: 1;
}
.wh-steps__title { display: block; font-size: 16px; font-weight: 700; color: var(--wh-ink); line-height: 1.5; }
.wh-steps__text { display: block; font-size: 14px; line-height: 1.7; color: var(--wh-body); }

/* ===== 矢印でつなぐ流れ（PCは横、スマホは縦） ===== */
.wh-flow { display: grid; grid-auto-flow: row; gap: 24px; }
.wh-flow__item {
  position: relative; border: 1px solid var(--c, var(--wh-sub)); border-radius: 8px;
  padding: 8px 12px; background: #FFFFFF; display: flex; flex-direction: column; gap: 1px;
}
.wh-flow__item.is-fill { background: var(--c-bg); }
.wh-flow__item + .wh-flow__item::before {
  content: "↓"; position: absolute; left: 50%; top: -22px; transform: translateX(-50%);
  font-size: 15px; color: var(--wh-sub); line-height: 20px;
}
.wh-flow__when { font-size: 12px; font-weight: 700; color: var(--c, var(--wh-sub)); }
.wh-flow__what { font-size: 14px; line-height: 1.55; color: var(--wh-ink); }
.wh-flow__what b { font-size: 17px; }
@media (min-width: 700px), print {
  .wh-flow { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 26px; }
  .wh-flow__item + .wh-flow__item::before { content: "→"; left: -20px; top: 50%; transform: translateY(-50%); }
}

/* ===== 柱ごとの年表（レベル2） ===== */
.wh-block { border: 1px solid var(--c); border-radius: 10px; overflow: hidden; background: #FFFFFF; }
.wh-block__head {
  background: var(--c); color: #FFFFFF; padding: 7px 14px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.wh-block__title { font-size: 16px; font-weight: 700; }
.wh-block__era { font-size: 12px; opacity: .92; }
.wh-row {
  display: grid; grid-template-columns: 74px minmax(0, 1fr);
  grid-template-areas: "year event" "year note";
  column-gap: 12px; padding: 9px 14px; border-top: 1px solid var(--wh-line);
}
.wh-block__head + .wh-row { border-top: 0; }
.wh-row__year { grid-area: year; font-family: var(--wh-serif); font-weight: 800; font-size: 19px; line-height: 1.35; color: var(--c); }
.wh-row__event { grid-area: event; font-size: 15px; font-weight: 700; color: var(--wh-ink); line-height: 1.5; }
.wh-row__note { grid-area: note; font-size: 13px; color: var(--wh-body); line-height: 1.6; }
@media (min-width: 700px), print {
  .wh-row { grid-template-columns: 84px 190px minmax(0, 1fr); grid-template-areas: "year event note"; align-items: baseline; }
}
.wh-stack { display: grid; gap: 14px; }

/* ===== 細かい年表（レベル3・記号付き） ===== */
.wh-tl { border-top: 2px solid var(--c); }
.wh-tl__head { padding: 8px 0 6px; font-size: 17px; font-weight: 700; color: var(--c); }
.wh-tl__row {
  display: grid; grid-template-columns: 28px minmax(0, 1fr);
  grid-template-areas: "lv year" ". text";
  column-gap: 8px; padding: 8px 6px; border-top: 1px solid var(--wh-line); align-items: baseline;
}
.wh-tl__row:last-child { border-bottom: 1px solid var(--wh-line); }
.wh-tl__row.is-key { background: var(--c-bg); }
.wh-tl__row .wh-lv { grid-area: lv; align-self: center; }
.wh-tl__year { grid-area: year; font-size: 14px; font-weight: 700; color: var(--wh-ink); }
.wh-tl__text { grid-area: text; font-size: 14.5px; line-height: 1.65; }
@media (min-width: 700px), print {
  .wh-tl__row { grid-template-columns: 28px 92px minmax(0, 1fr); grid-template-areas: "lv year text"; }
}

/* ===== 2つを並べる（対立の両側など） ===== */
.wh-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 700px), print { .wh-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wh-card {
  border: 1.5px solid var(--c); border-radius: 10px; padding: 12px 14px; background: #FFFFFF;
  display: flex; flex-direction: column; gap: 4px;
}
.wh-card.is-fill { background: var(--c-bg); }
.wh-card__title { font-size: 18px; font-weight: 700; color: var(--c); line-height: 1.4; }
.wh-card__kicker { font-size: 12px; font-weight: 700; color: var(--c); }
.wh-card p, .wh-card__line { margin: 0; font-size: 14px; line-height: 1.65; }
.wh-card__line b { margin-right: .6em; }
.wh-solid {
  background: var(--c); color: #FFFFFF; border-radius: 10px; padding: 10px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.wh-solid__kicker { font-size: 12px; }
.wh-solid__title { font-size: 18px; font-weight: 700; line-height: 1.4; }
.wh-note {
  border: 1px solid var(--wh-ink); border-radius: 8px; padding: 8px 12px; font-size: 14px; line-height: 1.7; background: #FFFFFF;
}
.wh-note .c-mao { color: var(--wh-mao); font-weight: 700; }
.wh-note .c-kmt { color: var(--wh-kmt); font-weight: 700; }

/* ===== 2列の対比年表（毛沢東 対 劉少奇・鄧小平） ===== */
.wh-lanes {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid var(--wh-ink); border-radius: 10px; overflow: hidden; background: #FFFFFF;
}
.wh-lanes > * { padding: 7px 9px; font-size: 13.5px; line-height: 1.55; border-top: 1px solid var(--wh-line); }
.wh-lanes > .wh-lanes__h { border-top: 0; font-size: 13px; font-weight: 700; color: #FFFFFF; background: var(--c, var(--wh-ink)); line-height: 1.45; }
.wh-lanes > .wh-lanes__y { font-weight: 700; color: var(--wh-ink); }
.wh-lanes > .is-mao:not(.wh-lanes__h) { background: var(--wh-mao-bg); }
.wh-lanes > .is-deng:not(.wh-lanes__h) { background: var(--wh-deng-bg); }
.wh-lanes > .is-strong { font-weight: 700; color: var(--wh-ink); }
@media (min-width: 700px), print {
  .wh-lanes { grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1fr); }
  .wh-lanes > * { padding: 8px 12px; font-size: 14px; }
}

/* ===== 比較表（第1次と第2次など） ===== */
.wh-compare { border: 1px solid var(--wh-ink); border-radius: 10px; overflow: hidden; background: #FFFFFF; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wh-compare > * { padding: 7px 10px; font-size: 14px; line-height: 1.55; border-top: 1px solid var(--wh-line); }
.wh-compare > .wh-compare__corner { display: none; }
.wh-compare > .wh-compare__h { border-top: 0; color: #FFFFFF; background: var(--c); font-weight: 700; font-size: 14px; }
.wh-compare > .wh-compare__k { grid-column: 1 / -1; background: var(--wh-soft); font-size: 12px; font-weight: 700; color: var(--wh-sub); padding: 4px 10px; }
.wh-compare > .is-mao:not(.wh-compare__h), .wh-compare > .is-deng:not(.wh-compare__h) { color: var(--c); font-weight: 700; }
@media (min-width: 700px), print {
  .wh-compare { grid-template-columns: 120px repeat(2, minmax(0, 1fr)); }
  .wh-compare > .wh-compare__corner { display: block; border-top: 0; background: var(--wh-soft); }
  .wh-compare > .wh-compare__k { grid-column: auto; font-size: 13px; padding: 7px 10px; color: var(--wh-ink); }
}

/* ===== 段階カード（同盟→対立→衝突→和解） ===== */
.wh-phases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 700px), print { .wh-phases { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wh-phase { border: 1.5px solid var(--c); border-radius: 10px; padding: 10px 12px; background: #FFFFFF; display: flex; flex-direction: column; gap: 2px; }
.wh-phase.is-fill { background: var(--c-bg); }
.wh-phase__when { font-size: 12px; font-weight: 700; color: var(--c); }
.wh-phase__name { font-size: 18px; font-weight: 700; color: var(--wh-ink); }
.wh-phase__text { font-size: 13px; line-height: 1.6; }

/* ===== 図（SVG）。スマホでは横にスクロール ===== */
.wh-chart { margin: 0; }
.wh-chart__legend { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; margin-bottom: 6px; align-items: center; }
.wh-chart__legend > span { display: inline-flex; align-items: center; gap: 6px; }
.wh-chart__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--wh-line); border-radius: 8px; background: #FFFFFF; }
.wh-chart__scroll svg { display: block; width: 100%; min-width: 640px; height: auto; }
.wh-chart figcaption { font-size: 12px; color: var(--wh-sub); margin-top: 6px; line-height: 1.6; }
.wh-chart__hint { display: inline; }
@media (min-width: 700px), print { .wh-chart__hint { display: none; } }

/* ===== ひっかけ・注意 ===== */
.wh-trap { border: 1.5px solid var(--wh-ink); border-radius: 10px; padding: 12px 16px; background: #FFFFFF; }
.wh-trap__title { display: block; font-size: 14px; font-weight: 700; color: var(--wh-ink); margin-bottom: 4px; }
.wh-trap ul { margin: 0; padding-left: 1.2em; }
.wh-trap li { font-size: 14px; line-height: 1.7; margin: 2px 0; }

.wh-box { background: var(--wh-soft); border-radius: 10px; padding: 12px 16px; }
.wh-box__title { display: block; font-size: 14px; font-weight: 700; color: var(--wh-ink); margin-bottom: 4px; }
.wh-box p { margin: 0; font-size: 14px; line-height: 1.75; }

.wh-dashed { border: 1px dashed var(--c, var(--wh-sub)); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; }
.wh-dashed__title { font-size: 13px; font-weight: 700; color: var(--c, var(--wh-sub)); }

/* ===== クイズへのボタン ===== */
.wh-quiz { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 700px), print { .wh-quiz { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wh-quiz a {
  display: flex; flex-direction: column; gap: 2px; min-height: 64px; justify-content: center;
  padding: 12px 16px; border-radius: 10px; background: var(--wh-ink); color: #FFFFFF; text-decoration: none;
}
.wh-quiz a:hover { background: #33393C; color: #FFFFFF; }
.wh-quiz a.is-outline { background: #FFFFFF; color: var(--wh-ink); border: 1.5px solid var(--wh-ink); }
.wh-quiz a.is-outline:hover { background: var(--wh-soft); }
.wh-quiz__title { font-size: 16px; font-weight: 700; line-height: 1.4; }
.wh-quiz__sub { font-size: 12px; opacity: .85; line-height: 1.5; }

/* ===== 印刷時 ===== */
@media print {
  .wh-block, .wh-card, .wh-phase, .wh-pillar, .wh-steps > li, .wh-tl__row, .wh-trap, .wh-flow__item, .wh-compare, .wh-lanes > * { break-inside: avoid; }
  .wh-chart__scroll { overflow: visible; border: 0; }
  .wh-chart__scroll svg { min-width: 0; }
  .wh-chart__hint { display: none; }
  .wh-pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wh-era { display: block; background: var(--c); color: #FFFFFF; border-radius: 4px; padding: 3px 8px; font-size: 10pt; font-weight: 700; }
  .wh-era--span3 { grid-column: span 3; }
  .wh-pillar__era { display: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}