/* 時代ページ（/era/・/era/{時代}/）。レイアウト・バナー・右カラムは content.css、本文・カード・年表の流れ・確認問題は articles.css、
   ポイントの図は ichimonitto.css の部品を使う。ここには時代ページだけの部品を置く。規則は docs/DESIGN.md。 */

/* 早見の枠（いつから・いつまで…） */
.era-facts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin: 18px 0 6px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line-2); background: var(--line-1); }
.era-facts > div { padding: 12px 16px; background: var(--card); }
.era-facts > div { grid-column: span 2; }                       /* 1段目: いつから・いつまで・長さ */
.era-facts > div:nth-child(4), .era-facts > div:nth-child(5) { grid-column: span 3; }   /* 2段目: 前の時代・次の時代 */
.era-facts > div:last-child { grid-column: 1 / -1; }            /* 3段目: 中心になった人 */
.era-facts dt { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.era-facts dd { margin: 2px 0 0; font-size: 17px; font-weight: 900; line-height: 1.8; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .era-facts dd { font-size: 15px; } .era-facts > div { padding: 10px 12px; } }

/* 流れ（ichimonitto.css の .fig-flow を本文の幅で） */
.era-flow { margin: 6px 0 20px; }
.era-flow li { font-size: 14.5px; }

/* 年表: 年・できごと・ひとこと。点の色は分野（政治／外交・世界／文化） */
.era-timeline li { padding: 9px 0; }
.era-timeline .ev { display: block; min-width: 0; }
.era-timeline .l { display: inline; font-size: 16px; }
.era-timeline .d { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.9; color: var(--ink-2); }
.era-timeline .y::after { border-color: var(--lane-color, var(--river)); }
.era-timeline .lane-politics { --lane-color: var(--lane-politics); }
.era-timeline .lane-diplomacy { --lane-color: var(--lane-diplomacy); }
.era-timeline .lane-culture { --lane-color: var(--lane-culture); }
.art-body h3[id] { scroll-margin-top: 72px; }

/* ポイント（分野ごとに1つ） */
.era-points-list { margin: 6px 0 10px; }
.era-points-list .point-title { flex-wrap: wrap; }

/* 人物・文化のカード */
.era-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 20px; padding: 0; list-style: none; }
@media (max-width: 640px) { .era-items { grid-template-columns: 1fr; } }
.era-item a { display: flex; align-items: flex-start; gap: 12px; height: 100%; padding: 12px 14px; border-radius: 12px; background: var(--card);
  border: 1px solid var(--line-1); color: var(--ink-1); text-decoration: none; }
.era-item a:hover { border-color: var(--line-ink); color: var(--ink-1); }
.era-item img { flex: none; width: 60px; height: 60px; border-radius: 50%; background: var(--paper-2); object-fit: cover; }
.era-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.era-item-name { font-size: 16px; font-weight: 900; line-height: 1.8; }
.era-item-desc { font-size: 13.5px; line-height: 1.9; color: var(--ink-2); }

/* まぎらわしい用語・語呂 */
.era-compares { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 20px; padding: 0; list-style: none; }
.era-compares li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); border: 2px solid var(--line-2); background: var(--card); }
.era-compares a { font-size: 14.5px; font-weight: 700; color: var(--ink-1); text-decoration: none; }
.era-compares a:hover { color: var(--river-deep); }
.era-compares .tag { min-height: 20px; padding: 0 8px; font-size: 11px; }
.era-goro { display: grid; gap: 6px; margin: 6px 0 20px; padding: 0; list-style: none; }
.era-goro li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 10px 14px; border-radius: 10px; background: var(--ochre-pale); }
.era-goro .y { font-size: 14px; font-weight: 900; color: var(--ochre); font-variant-numeric: tabular-nums; text-align: right; }
.era-goro .tx { font-size: 15.5px; font-weight: 700; line-height: 1.9; }

/* 前後の時代 */
.era-neighbors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 40px 0 0; }
.era-nb { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--line-2); background: var(--card);
  color: var(--ink-1); text-decoration: none; }
.era-nb:last-child { text-align: right; }
a.era-nb:hover { border-color: var(--line-ink); color: var(--ink-1); }
.era-nb.empty { border: 0; background: none; }
.era-nb.off { color: var(--ink-3); }
.era-nb .k { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.era-nb .n { font-size: 17px; font-weight: 900; }
.era-nb .y, .era-nb .soon { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---- 扉 ---- */
.era-table table { font-size: 15px; }
.era-table th, .era-table td { padding: 10px 12px; line-height: 1.9; }
.era-table tbody th { white-space: nowrap; background: var(--paper-0); color: var(--ink-1); }
.era-table tbody th a { color: var(--river-deep); font-weight: 900; }
.era-table td { font-weight: 500; }
.era-table td.y { white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.era-table .cdot, .era .cdot { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 2px; background: var(--c); }
.era-table .ysub { display: none; }
@media (max-width: 560px) {
  .era.hub .era-table td.y, .era.hub .era-table thead th:nth-child(2) { display: none; }   /* 扉の表だけ（人物の表の2列目は消さない） */
  .era-table .ysub { display: block; margin: 2px 0 0 18px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .era-table tbody th { white-space: normal; vertical-align: top; }
}
.era-note { font-size: 13.5px !important; line-height: 1.9 !important; color: var(--ink-3); }
.era-band { display: flex; height: 64px; margin: 10px 0 10px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); }
.era-band .seg { display: grid; place-items: center; min-width: 0; overflow: hidden; background: color-mix(in srgb, var(--c) 38%, var(--paper-1));
  border-right: 1px solid var(--paper-0); }
.era-band .seg span { font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--ink-1); }
@media (max-width: 640px) { .era-band .seg span { font-size: 10px; writing-mode: vertical-rl; } .era-band { height: 84px; } }
.era-naming { display: grid; gap: 8px; margin: 6px 0 20px; }
.era-naming > div { padding: 12px 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--line-1); }
.era-naming dt { font-size: 15.5px; font-weight: 900; }
.era-naming dd { margin: 2px 0 0; font-size: 14.5px; line-height: 2; color: var(--ink-2); }

/* ---- 下層（人物・文化）: くわしいカード ---- */
.era-sub .era-table { margin: 6px 0 18px; }
.era-sub .era-table tbody th a { text-decoration: none; }
.era-cards { display: grid; gap: 12px; margin: 6px 0 20px; padding: 0; list-style: none; }
.era-card { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 16px; border-radius: 14px; background: var(--card);
  border: 1px solid var(--line-1); scroll-margin-top: 76px; }
.era-card > img { width: 84px; height: 84px; border-radius: 50%; background: var(--paper-2); object-fit: cover; }
.era-card-body { grid-column: 2; min-width: 0; }
.era-card > .era-card-body:first-child { grid-column: 1 / -1; }   /* イラストのない項目は全幅 */
.art-body .era-card h3 { margin: 0; font-size: 18px; }
.art-body .era-card-rd { margin: 0 0 6px; font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.art-body .era-card-desc { margin: 0 0 8px; font-size: 15px; line-height: 2; }
.art-body .era-card-who { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-2); line-height: 1.9; }
.era-card-points { margin: 0 0 8px; padding-left: 20px; font-size: 14px; line-height: 1.95; color: var(--ink-2); }
.era-card-link { font-size: 13.5px; font-weight: 700; text-decoration: none; }
.era-card-link::after { content: ' ›'; }
@media (max-width: 480px) { .era-card { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; padding: 14px; } .era-card > img { width: 60px; height: 60px; } }

/* 原始の4時代: 年が長い（約2万8千年前）ので年の列を広げる。おさえることは矢印なしの並び */
.era-timeline.wide li { grid-template-columns: 104px minmax(0, 1fr); }
.era-timeline.wide::before { left: 116px; }
.era-timeline.wide .y { font-size: 13.5px; }
.era-keys { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 20px; padding: 0; list-style: none; }
.era-keys li { padding: 7px 14px; border-radius: var(--r-md); background: var(--paper-2); font-size: 14.5px; font-weight: 700; line-height: 1.8; }
.era-card-link.ar { margin-left: 16px; }