/* =========================================================
   共通スタイル
   色とフォントはここだけ直せば全ページに反映されます
   ========================================================= */
:root{
  --paper:#FFFFFF;
  --ink:#16242B;          /* 本文・見出し */
  --ink-2:#5A6D75;        /* 補足 */
  --ink-3:#8C9BA1;        /* さらに薄い注記 */
  --rule:#D8D3C6;         /* 罫線（少し温かい灰） */
  --rule-2:#EDEAE2;       /* 薄い罫線 */
  --accent:#C4187E;       /* 図版番号・リンク（教材ツールと同じ色） */
  --field:#16242B;        /* 濃い面 */

  --mincho:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",
           "MS PMincho",serif;
  --gothic:"Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Meiryo",
           "Noto Sans JP",sans-serif;
  --mono:ui-monospace,"SFMono-Regular","Consolas","Courier New",monospace;

  --pad:clamp(1.15rem,4.5vw,3.5rem);
  --wide:64rem;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--gothic); font-size:16px; line-height:1.85;
  -webkit-font-smoothing:antialiased;
  min-height:100svh; display:flex; flex-direction:column;
}
main{flex:1 0 auto}
.foot{flex-shrink:0}
.wrap{max-width:var(--wide); margin:0 auto; padding:0 var(--pad)}

a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent); outline-offset:3px}

/* ---------- ヘッダー ---------- */
.masthead{border-bottom:1px solid var(--ink); background:var(--paper)}
.masthead .wrap{
  display:flex; align-items:baseline; gap:1.2rem;
  padding-top:1.25rem; padding-bottom:1rem; flex-wrap:wrap;
}
.sitename{
  font-family:var(--mincho); font-size:clamp(1.15rem,3.4vw,1.5rem);
  font-weight:600; letter-spacing:.08em; text-decoration:none;
}
.sitenote{font-size:.72rem; letter-spacing:.22em; color:var(--ink-2)}
.masthead nav{margin-left:auto; display:flex; gap:1.3rem; font-size:.82rem}
.masthead nav a{color:var(--ink-2); text-decoration:none; letter-spacing:.1em}
.masthead nav a:hover{color:var(--accent)}

/* ---------- はしがき ---------- */
.preface{padding:clamp(2.8rem,9vw,5.5rem) 0 clamp(2rem,6vw,3.5rem)}
.preface .kicker{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.3em;
  color:var(--ink-3); margin-bottom:1.5rem;
}
.preface h1{
  font-family:var(--mincho); font-weight:600;
  font-size:clamp(1.6rem,5.6vw,2.9rem); line-height:1.5;
  letter-spacing:.03em; max-width:26em;
}
.preface p{
  margin-top:1.6rem; max-width:34em; color:#31434B;
  font-size:clamp(.92rem,2.3vw,1rem);
}

/* ---------- 索引 ---------- */
.indexhead{
  display:flex; align-items:baseline; gap:1rem;
  border-top:2px solid var(--ink); padding-top:.7rem; margin-top:1rem;
}
.indexhead h2{font-family:var(--mincho); font-size:1.05rem; letter-spacing:.14em; font-weight:600}
.indexhead .count{font-family:var(--mono); font-size:.75rem; color:var(--ink-3); margin-left:auto}

.plates{list-style:none}
.plate{border-bottom:1px solid var(--rule)}
.plate > a,.plate > .inner{
  display:grid; grid-template-columns:5.5rem 1fr; gap:0 1.6rem;
  padding:2rem 0 1.9rem; text-decoration:none; color:inherit;
  transition:background .18s ease;
}
.plate > a:hover{background:#FAFAF7}
.plate .num{
  font-family:var(--mincho); font-size:clamp(2.1rem,6vw,3.1rem); line-height:.9;
  color:#B7AF9D; letter-spacing:-.02em; transition:color .18s ease, transform .18s ease;
  font-feature-settings:"palt";
}
.plate > a:hover .num{color:var(--accent); transform:translateX(4px)}
.plate .num small{display:block; font-family:var(--mono); font-size:.52rem;
  letter-spacing:.24em; color:var(--ink-3); margin-top:.7rem}

.plate h3{
  font-family:var(--mincho); font-weight:600; letter-spacing:.02em;
  font-size:clamp(1.15rem,3.6vw,1.55rem); line-height:1.45;
}
.plate .lede{margin-top:.55rem; color:#33454C; max-width:38em;
  font-size:clamp(.86rem,2.2vw,.95rem)}
.meta{
  margin-top:1.05rem; display:flex; flex-wrap:wrap; gap:.4rem .5rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.13em;
}
.meta span{border:1px solid var(--rule); padding:.22rem .6rem; color:var(--ink-2)}
.meta span.hl{border-color:var(--accent); color:var(--accent)}
.go{
  margin-top:.85rem; display:inline-flex; align-items:center; gap:.5em;
  font-size:.83rem; letter-spacing:.1em; color:var(--accent);
  border-bottom:1px solid currentColor; padding-bottom:.15rem;
}
.plate.pending .num{color:var(--rule)}
.plate.pending h3{color:var(--ink-2)}

/* ---------- 本文ページ ---------- */
.doc{padding:clamp(2.5rem,8vw,4.5rem) 0 1rem}
.doc h1{font-family:var(--mincho); font-weight:600; letter-spacing:.04em;
  font-size:clamp(1.5rem,5vw,2.2rem); line-height:1.5}
.doc h2{font-family:var(--mincho); font-weight:600; font-size:1.1rem;
  letter-spacing:.1em; margin:2.8rem 0 .9rem; padding-top:.7rem;
  border-top:1px solid var(--rule)}
.doc p{margin-top:1rem; max-width:36em; font-size:.95rem}
.doc ul{margin:1rem 0 0 1.2rem; max-width:36em; font-size:.95rem}
.doc li{margin-top:.4rem}
.doc a.link{color:var(--accent); text-decoration:none;
  border-bottom:1px solid currentColor}

/* ---------- フッター ---------- */
.foot{
  margin-top:clamp(3.5rem,10vw,6rem); border-top:1px solid var(--ink);
  padding:1.8rem 0 3rem; font-size:.76rem; color:var(--ink-2);
}
.foot .wrap{display:flex; flex-wrap:wrap; gap:.6rem 2rem; align-items:baseline}
.foot .note{max-width:32em; line-height:1.9}
.foot .sig{margin-left:auto; font-family:var(--mono); letter-spacing:.16em;
  color:var(--ink-3); white-space:nowrap}

/* ---------- 404 ---------- */
.lost{padding:clamp(4rem,14vw,8rem) 0}
.lost .big{font-family:var(--mincho); font-size:clamp(3rem,14vw,6rem);
  line-height:1; color:var(--rule)}
.lost h1{font-family:var(--mincho); font-size:clamp(1.3rem,4.4vw,1.9rem);
  font-weight:600; margin-top:1.5rem; letter-spacing:.04em}

@media (max-width:36rem){
  .plate > a,.plate > .inner{grid-template-columns:1fr; gap:.5rem}
  .plate .num{font-size:1.6rem; display:flex; align-items:baseline; gap:.8rem}
  .plate .num small{margin-top:0}
  .masthead nav{width:100%; margin-left:0; padding-top:.4rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001s !important; animation-duration:.001s !important}
}