/* 用語集（/terms/）の組版。
   /d/ /events/ /context/ と同じトークンを使う ―― 新しいデザインシステムは作らない。 */
:root{
  --teal:#004455; --teal-mid:#3D6B77; --teal-soft:#E3EDEF;
  --terra:#C75A3C; --terra-soft:#F8EAE3;
  --ink:#16282D; --muted:#5C7278; --line:#D3DFE2;
  --bg:#F2F6F7; --paper:#FFF; --moss:#8A6D3B; --moss-soft:#F5EFE2;
  --serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{font-family:"Inter","Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI",sans-serif;
  background:var(--bg);color:var(--ink);font-size:14px;line-height:1.7;}
a{color:var(--teal);}

.topbar{background:var(--teal);color:#fff;padding:12px 16px 0;}
.topbar .in{max-width:1100px;margin:0 auto;position:relative;}
.brand{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;
       color:inherit;text-decoration:none;}
.brand:hover{text-decoration:underline;}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--terra);flex:none;}
.sub{font-size:11px;color:#9FC0C9;margin-top:2px;}
.tabs{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
.tabs a{flex:none;padding:8px 18px;font-size:12.5px;font-weight:700;color:#9FC0C9;
  background:rgba(255,255,255,.07);border-radius:8px 8px 0 0;text-decoration:none;}
.tabs a.active{background:var(--bg);color:var(--teal);}

/* ヘッダ（.topbar .in）と同じ 1100px。**幅を揃えないと本文の左端がロゴより
   内側に入り、面ごとにずれて見える**（820px だった頃に実際そう見えていた）。 */
.wrap{max-width:1100px;margin:0 auto;padding:14px 14px 40px;}
.loadbox{background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:28px 16px;text-align:center;color:var(--muted);font-size:13px;}

/* 冒頭の注記。誰の言葉かを最初に言い切る */
.lede{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--teal);
  border-radius:0 9px 9px 0;padding:12px 14px;margin-bottom:16px;font-size:12.5px;line-height:1.85;}
.lede h1{font-family:var(--serif);font-size:17px;color:var(--teal);margin-bottom:6px;}
.lede .note{margin-top:8px;padding-top:7px;border-top:1px dashed var(--line);
  font-size:11.5px;color:var(--muted);}

/* 節の見出し。/context/ と同じ形（左の縦棒＋明朝＋右に件数） */
.sec{display:flex;align-items:center;gap:8px;margin:22px 0 9px;}
.sec .bar{width:3px;height:15px;background:var(--teal);flex:none;}
.sec h2{font-family:var(--serif);font-size:14.5px;font-weight:700;color:var(--teal);}
.sec .ct{margin-left:auto;font-size:11px;color:var(--muted);}

/* 節への近道。しぼり込み中は隠す（行き先が消えているため） */
.tnav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;}
.tnav a{background:var(--paper);border:1px solid var(--line);border-radius:7px;
  padding:6px 11px;font-size:11.5px;font-weight:700;text-decoration:none;color:var(--teal);}
.tnav a:hover{border-color:var(--teal-mid);}
.tnav a span{margin-left:6px;color:var(--muted);font-weight:400;}

/* しぼり込み。91語を上から探すのは現実的でないので入力欄を1つ置く */
.tfind{display:flex;align-items:center;gap:10px;margin:0 0 18px;}
.tfind input{flex:1;min-width:0;background:var(--paper);border:1px solid var(--line);
  border-radius:9px;padding:10px 13px;font:inherit;font-size:13px;color:var(--ink);}
.tfind input:focus{outline:none;border-color:var(--teal-mid);
  box-shadow:0 0 0 3px var(--teal-soft);}
.tfind span{font-size:11.5px;color:var(--muted);white-space:nowrap;}

.tsec[hidden]{display:none;}
.tsec .lead{font-size:11.5px;color:var(--muted);margin:0 0 9px;}

/* 用語1件。見出しと定義を1枚のカードに収める */
.tl{margin:0;}
.ti{background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:12px 15px;margin-bottom:8px;scroll-margin-top:12px;}
.ti[hidden]{display:none;}
.ti{scroll-margin-top:12px;}
/* 記事本文の用語リンクからここへ飛んでくる。どの語に着いたかを目印で示す */
.ti:target{border-color:var(--terra);box-shadow:0 0 0 2px var(--terra-soft);}
.ti dt{font-family:var(--serif);font-size:14.5px;font-weight:700;line-height:1.55;
  color:var(--teal);margin-bottom:5px;}
.ti dd{margin:0;font-size:12.5px;line-height:1.9;text-align:justify;line-break:strict;}

.foot{margin-top:26px;background:var(--teal);color:#fff;border-radius:10px;padding:15px;
  text-align:center;font-size:12.5px;line-height:1.9;}
.foot a{color:#fff;font-weight:700;}

@media (max-width:520px){
  .ti{padding:11px 12px;}
  .ti dt{font-size:14px;}
}


/* 2段組（/d/ /events/ と同じ作り・同じ折り返し幅）
 *
 * 右に「節への飛び先」と「絞り込み」を出す。91語を上から探すのは現実的では
 * ないので、**スクロールしても消えない位置**に置く。本文側には出さない
 * （同じものを2箇所に描くと、片方だけ直されて必ずずれる）。 */
@media (min-width:880px){
  .wrap{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:22px;align-items:start;}
  .wrap > .main{min-width:0;}
  .aside{position:sticky;top:14px;}
  .aside .box{background:var(--paper);border:1px solid var(--line);
    border-radius:10px;padding:12px 14px;margin-bottom:12px;}
  .aside .ah{font-size:10px;letter-spacing:.12em;color:var(--muted);font-weight:700;margin-bottom:8px;}
  /* 縦に積む（横幅が 250px しかないので、節名は1行1件） */
  .aside .tnav{flex-direction:column;gap:4px;margin:0;}
  .aside .tnav a{display:flex;justify-content:space-between;gap:8px;}
  .aside .tfind{margin:0 0 10px;}
  .aside .tfind input{font-size:12px;}
}
/* 狭い画面では段組をやめ、**飛び先と絞り込みを本文の上に**出す。
   DOM は1つのまま order で入れ替える ―― 同じ内容を2度描かないため。 */
@media (max-width:879px){
  .wrap{display:flex;flex-direction:column;}
  .aside{order:-1;}
  .aside .ah{display:none;}
}