/* ==================================================================
   DXO Wiki  —  スタイル

   構成
     1. 土台        色・文字・書体のもと
     2. 部品        ボタン・入力欄・タグ・ポップアップ
     3. 骨組み      左の柱・上のバー・本文の枠
     4. ホーム
     5. 流派ページ  五項・その他の情報・タブ
     6. 本文        経典と投稿の組み（読むときも書くときも同じ）
     7. 編集        書式バー・表と図の道具立て
     8. 投稿        一覧・コメント
     9. フォーム    流派を立ち上げる
    10. 狭い画面

   決めごと
     ・文字の大きさは --fs-xs / sm / base / lg の4つを使う。
       見出しなど一点ものだけ、その場で指定してよい。
     ・11.5px より小さい文字は使わない。
     ・タグは .tag に統一する。新しい見た目を増やさない。
================================================================== */

/* ---------------- 1. 土台 ---------------- */
:root{
  /* 紙と墨 */
  --paper:#ffffff;
  --rail:#faf9f6;
  --ink:#191713;
  --sumi:#4d4741;
  --faint:#8b8377;
  --mute:#a79d90;
  --line:#e8e4dc;
  --line2:#f1efea;
  --red:#9e2f26;
  --warm:#fdf6ef;
  --warm-line:#c9a06a;
  --grain:rgba(124,101,68,.020);

  /* いま開いている流派の色。app.js が入れかえる */
  --c:var(--ink);
  --ch:var(--ink);

  /* 改訂RINGOの状態 */
  --st-grow:#6f8f5f;
  --st-crop:#c8892f;
  --st-done:#3f5a75;
  --st-none:#a79d90;

  /* 文字の大きさ。本文まわりはこの5つだけを使う。
     見出しなど一点ものは、その場で指定してよい */
  --fs-xs:11.5px;    /* タグ・メタ・補足 */
  --fs-sm:12.5px;    /* ボタン・タブ・小さめの説明 */
  --fs-md:13.5px;    /* 入力欄・表・その他の情報 */
  --fs-base:14px;    /* 本文 */
  --fs-lg:15.5px;    /* 投稿のタイトル・五項の値 */

  /* 書体 */
  --mc:"Noto Serif JP",serif;
  --gt:"Noto Sans JP",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* 狭い画面の上バーの高さ。貼りつく要素の位置に使う */
  --top:0px;
}

*{ box-sizing:border-box; }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--gt); font-size:var(--fs-base); line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }


/* ---------------- 2. 部品 ---------------- */

/* ボタン */
.btn{
  display:inline-block; font-family:var(--gt); font-size:var(--fs-sm); letter-spacing:.08em;
  padding:9px 22px; border:1px solid var(--c); color:var(--c);
  background:none; border-radius:2px; cursor:pointer;
}
.btn:hover{ background:var(--c); color:var(--paper); }
.btn.sm{ font-size:var(--fs-sm); padding:6px 16px; }
.btn.ghost{ border-color:var(--line); color:var(--faint); }
.btn.ghost:hover{ background:none; border-color:var(--faint); color:var(--ink); }
.btn.ghost.sm{ padding:5px 14px; white-space:nowrap; }
.btn.danger{ border-color:var(--red); color:var(--red); }
.btn.danger:hover:not(:disabled){ background:var(--red); color:var(--paper); }
.btn.danger:disabled{ border-color:var(--line); color:var(--line); cursor:not-allowed; }
.btn[disabled]{ opacity:.35; cursor:not-allowed; }

/* アイコンだけのボタン */
.iconbtn{
  appearance:none; border:0; background:none; cursor:pointer;
  color:var(--faint); padding:6px; line-height:0; border-radius:3px;
  transition:color .15s, background .15s;
}
.iconbtn:hover{ color:var(--c); background:var(--rail); }

/* 入力欄 */
input[type=text],input[type=password],input[type=number],textarea{
  font-family:var(--gt); font-size:var(--fs-md); color:var(--ink);
  border:1px solid var(--line); background:var(--paper);
  padding:9px 12px; width:100%; border-radius:2px; line-height:1.7;
}
input:focus,textarea:focus{ outline:none; border-color:var(--c); }
textarea{ min-height:76px; resize:vertical; }
input.color{ width:56px; height:34px; padding:2px; cursor:pointer; }

/* タグ。ラベル・任意・状態、すべてこの形 */
.tag{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--gt); font-size:var(--fs-xs); font-weight:400; font-style:normal;
  letter-spacing:.06em; line-height:1.6; white-space:nowrap;
  color:var(--faint); background:var(--rail);
  border:1px solid var(--line); border-radius:2px; padding:1px 7px;
}
.tag::before{ content:""; }
.tag.dot::before{
  width:6px; height:6px; border-radius:50%; background:currentColor; flex:none;
}
.tag.grow{ color:var(--st-grow); border-color:color-mix(in srgb, var(--st-grow) 34%, var(--line)); }
.tag.crop{ color:var(--st-crop); border-color:color-mix(in srgb, var(--st-crop) 34%, var(--line)); }
.tag.done{ color:var(--st-done); border-color:color-mix(in srgb, var(--st-done) 34%, var(--line)); }
.tag.none{ color:var(--st-none); border-color:var(--line); }

/* いつ・誰が・状態 をならべる行 */
.metaline{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px;
  font-size:var(--fs-xs); letter-spacing:.04em; color:var(--faint);
}
.metaline > span{ display:inline-flex; align-items:center; gap:5px; }
.metaline svg{ flex:none; opacity:.8; }

/* ポップアップ */
.modal{
  position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
  background:rgba(25,23,19,.28); padding:20px;
}
.sheet{
  background:var(--paper); border:1px solid var(--line); border-radius:3px;
  padding:26px 28px; width:100%; max-width:380px;
  max-height:calc(100vh - 40px); overflow-y:auto;
}
.sheet.wide{ max-width:520px; }
.sheet h4{ font-family:var(--mc); font-weight:500; font-size:17px; letter-spacing:.1em; margin:0 0 6px; }
.sheet label{ display:block; font-size:var(--fs-sm); color:var(--sumi); margin-bottom:14px; }
.sheet input,.sheet select{ margin-top:5px; }
.sheet textarea{ margin-top:5px; min-height:96px; }
.sheet .note{ font-size:var(--fs-sm); color:var(--faint); margin:0 0 16px; }
.sheet .lead{ font-size:var(--fs-sm); line-height:1.8; color:var(--sumi); margin:0 0 10px; }
.sheet .msg{ font-size:var(--fs-sm); color:var(--c); margin:0 0 12px; }
.sheet .warn{
  font-size:var(--fs-sm); line-height:1.85; color:var(--sumi);
  background:var(--warm); border-left:2px solid var(--warm-line);
  border-radius:2px; padding:11px 14px; margin:14px 0 4px;
}
.sheet .how{
  margin:0 0 18px; padding:14px 16px; border:1px solid var(--line); border-radius:3px;
  background:var(--rail); font-size:var(--fs-md); line-height:1.9; color:var(--ink);
}
.sheet .chk{
  display:flex; align-items:flex-start; gap:10px; margin-bottom:4px;
  font-size:var(--fs-md); line-height:1.7; color:var(--ink); cursor:pointer;
}
.sheet .chk input{ margin-top:4px; width:15px; height:15px; flex:none; accent-color:var(--ink); cursor:pointer; }
.sheet-act{ display:flex; gap:10px; margin-top:20px; }

/* 見つからないときの断り書き */
.ph{
  font-size:var(--fs-sm); letter-spacing:.06em; color:var(--faint);
  border:1px solid var(--line); padding:14px 16px; margin:0 0 18px;
}


/* ---------------- 3. 骨組み ---------------- */
.app{ display:flex; align-items:flex-start; min-height:100vh; }

/* 左の柱 */
.rail{
  width:214px; flex:none; position:sticky; top:0; height:100vh; overflow-y:auto;
  padding:34px 0 40px; border-right:1px solid var(--line); background:var(--rail);
  background-image:repeating-linear-gradient(91deg,
    var(--grain) 0 1px, transparent 1px 5px,
    rgba(124,101,68,.013) 5px 6px, transparent 6px 13px);
}
.rail .bm{ display:block; font-family:var(--mc); font-size:15px; letter-spacing:.24em; padding:0 26px; }
.rail nav{ display:flex; flex-direction:column; }
.rail nav.top{ margin-top:30px; }
.rail nav.shu{ margin-top:34px; }
.rail .g{
  position:relative;
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  font-family:var(--gt); font-size:var(--fs-sm); font-weight:600; letter-spacing:.14em;
  color:var(--sumi); margin:0 20px 10px 26px; padding:0;
}
.rail .g::before{
  content:""; position:absolute; left:-15px; top:50%; margin-top:-2px;
  border:4px solid transparent; border-top:5px solid var(--faint); border-bottom:0;
}
.rail .g em{
  font-style:normal; font-size:var(--fs-xs); font-weight:400; letter-spacing:.02em;
  color:var(--faint); white-space:nowrap;
}
.rail nav a{ display:block; font-size:var(--fs-base); color:var(--sumi); padding:6px 26px; }
.rail nav a:hover{ color:var(--ink); background:var(--paper); }
.rail nav a.on{ color:var(--ink); background:var(--paper); box-shadow:inset 2px 0 0 var(--ink); }
.rail nav a.on.tint{ color:var(--c); box-shadow:inset 2px 0 0 var(--c); }
.rail .add{
  margin-top:8px; padding:7px 26px;
  font-size:var(--fs-md); letter-spacing:.04em; color:var(--faint); white-space:nowrap;
}
.rail .add:hover{ color:var(--ink); background:var(--paper); }
.rail .add.on{ color:var(--ink); background:var(--paper); box-shadow:inset 2px 0 0 var(--ink); }

/* 狭い画面の上のバー。中身の指定は 10. にある */
.topbar{ display:none; }

/* 本文の枠 */
.body{ flex:1; min-width:0; padding:56px 64px 120px; max-width:1120px; margin:0 auto; }
.body h1{ font-family:var(--mc); font-weight:500; font-size:30px; letter-spacing:.06em; margin:0 0 12px; }
.wrap{ flex:1; min-width:0; display:flex; justify-content:center; }
.doc{ width:100%; max-width:1040px; margin:0 auto; padding:56px 48px 140px; }

.crumb{
  font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.14em;
  color:var(--faint); margin:0 0 22px;
}
.doc h1{ font-family:var(--mc); font-weight:500; font-size:29px; letter-spacing:.08em; margin:0; color:var(--c); }
.h1sub{ margin:9px 0 26px; }
.lede{ font-size:var(--fs-base); color:var(--sumi); max-width:52em; margin:0 0 10px; }

/* フッター */
.foot{
  margin-top:80px; padding:22px 0 0; border-top:1px solid var(--line2);
  font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.1em; color:var(--faint);
  display:flex; gap:26px; flex-wrap:wrap; align-items:baseline;
}
.foot a:hover{ color:var(--ink); }
.foot .r{ margin-left:auto; }


/* ---------------- 4. ホーム ---------------- */
.hero{ text-align:center; padding:52px 0 20px; }
.hero h1{
  font-family:var(--mc); font-weight:500; font-size:56px;
  letter-spacing:.14em; margin:0 0 42px; line-height:1.3;
}
.tense-link{ display:block; }
.hero .tense{ display:block; width:214px; height:auto; margin:0 auto 56px; transition:opacity .2s; }
.tense-link:hover .tense{ opacity:.75; }

.slider{ display:flex; align-items:center; justify-content:center; gap:22px; }
.slider .win{ width:min(690px, 72vw); overflow:hidden; padding:10px 0; }
.track{ display:flex; gap:26px; will-change:transform; }
.sh{
  --cc:var(--line);
  flex:none; width:184px; padding:18px 10px; border-radius:6px;
  border:1px solid var(--cc); background:var(--paper);
  font-size:var(--fs-base); color:var(--sumi); white-space:nowrap;
  transition:border-color .3s ease, color .3s ease;
}
.sh:hover{ color:var(--ink); box-shadow:0 2px 10px -6px rgba(25,23,19,.5); }
.sh.ghost{ color:var(--mute); border-style:dashed; cursor:default; }
.sh.ghost:hover{ color:var(--mute); box-shadow:none; }

.arw{
  flex:none; width:0; height:0; border:0; background:none; cursor:pointer; padding:0;
  border-top:12px solid transparent; border-bottom:12px solid transparent;
  opacity:.45; transition:opacity .2s;
}
.arw:hover{ opacity:1; }
.arw.l{ border-right:16px solid var(--sumi); }
.arw.r{ border-left:16px solid var(--sumi); }

.hero .mk{ margin:34px 0 0; font-size:var(--fs-base); }
.hero .mk a{ color:var(--sumi); border-bottom:1px solid var(--line); padding-bottom:2px; }
.hero .mk a:hover{ color:var(--ink); border-bottom-color:var(--faint); }
.mk2{ margin:14px 0 0; text-align:center; }
.mk2 a{
  font-size:var(--fs-xs); letter-spacing:.04em; color:var(--mute);
  border-bottom:1px solid transparent; padding-bottom:1px;
}
.mk2 a:hover{ color:var(--ink); border-bottom-color:var(--line); }


/* ---------------- 5. 流派ページ ---------------- */

/* 五項 */
.five{ margin:0 0 26px; border-top:2px solid var(--c); }
.five div{
  display:grid; grid-template-columns:6.5em 1fr; gap:18px;
  align-items:start; padding:11px 0; border-bottom:1px solid var(--line2);
}
.five dt{ font-family:var(--gt); font-size:var(--fs-sm); font-weight:600; letter-spacing:.12em; color:var(--ink); }
.five dd{ margin:0; font-size:var(--fs-lg); line-height:1.85; color:var(--ink); }
.five dd.tbd{ min-height:1.85em; }
.five .fnote{ display:block; font-size:var(--fs-xs); color:var(--faint); margin-top:5px; line-height:1.7; }

/* 「改」の下にそえる改訂方法。ラベルと本文を、上の行と同じ左端にそろえる */
.five dd .how{
  display:flex; align-items:baseline; gap:9px;
  margin-top:7px; font-size:var(--fs-sm); line-height:1.85;
  color:var(--sumi); white-space:pre-line;
}
.five dd .how .tag{ flex:none; }

/* 五項の編集中 */
.five.editing div{ align-items:center; }
.five [contenteditable]{
  outline:none; border-radius:2px; padding:1px 6px; margin:0 -6px;
  background:rgba(124,101,68,.06); box-shadow:inset 0 -1px 0 var(--line);
}
.five [contenteditable]:focus{ background:var(--paper); box-shadow:inset 0 0 0 1px var(--c); }
.five.editing dd.tbd:empty::before{ content:""; display:inline-block; min-width:2em; }
.five.editing dd input[type=text]{ width:100%; }
.five.editing textarea{ width:100%; min-height:62px; font-size:var(--fs-base); padding:7px 10px; }
.five .edit-bar{ display:grid !important; border-bottom:0; padding-top:16px; }
.five .edit-bar dd{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* 流派を削除。公開のボタンからは離して小さく */
.five .del-row{
  display:flex; justify-content:flex-end; border-bottom:0;
  margin-top:34px; padding:12px 0 0; border-top:1px solid var(--line2);
}
.five .del-row a{
  font-size:var(--fs-xs); letter-spacing:.02em; color:var(--mute); cursor:pointer; padding:2px 0;
}
.five .del-row a:hover{ color:var(--red); text-decoration:underline; }

/* その他の情報 */
.extra{ margin:0 0 6px; border-top:1px solid var(--line2); }
.extra div{
  display:grid; grid-template-columns:6.5em 1fr; gap:18px;
  padding:9px 0; align-items:start; border-bottom:1px solid var(--line2);
}
.extra dt{ font-family:var(--gt); font-size:var(--fs-sm); font-weight:600; letter-spacing:.12em; color:var(--sumi); }
.extra dd{ margin:0; font-size:var(--fs-md); color:var(--ink); }
.extra a{ color:var(--c); }
.extra a:hover{ text-decoration:underline; }
.lkview{ display:flex; flex-wrap:wrap; gap:6px 16px; }
.five.more{ border-top:1px solid var(--line); margin-top:22px; }

/* リンクを足す欄 */
.five .lkrow,
.lkbox .lkrow{
  display:flex !important; grid-template-columns:none;
  gap:8px; align-items:center; margin-bottom:7px; padding:0; border:0;
}
.five .lkrow .l,
.lkbox .lkrow .l{ flex:0 0 150px; min-width:0; }
.five .lkrow .u,
.lkbox .lkrow .u{ flex:1 1 auto; min-width:0; }
.five .lkrow input,
.lkbox .lkrow input{ font-size:var(--fs-md); padding:8px 10px; }
.five .lkrow .x,
.lkbox .lkrow .x{
  flex:0 0 32px; align-self:stretch; border:1px solid var(--line); background:var(--paper);
  color:var(--faint); border-radius:2px; cursor:pointer;
}
.five .lkrow .x:hover,
.lkbox .lkrow .x:hover{ border-color:var(--c); color:var(--c); }
.addlk{
  border:0; background:none; color:var(--faint); cursor:pointer;
  font-family:var(--gt); font-size:var(--fs-sm); padding:2px 0;
}
.addlk:hover{ color:var(--ink); }

/* 枠の下の編集リンク */
.fedit{ display:flex; justify-content:flex-end; margin:9px 0 0; }
.fedit a{
  display:inline-flex; align-items:center; gap:7px; padding:3px 6px; border-radius:3px;
  font-size:var(--fs-xs); line-height:1.7; letter-spacing:.02em;
  color:var(--mute); cursor:pointer; transition:color .15s;
}
.fedit a svg{ width:14px; height:14px; flex:none; }
.fedit a:hover{ color:var(--c); }
.fedit a:hover span{ text-decoration:underline; }

/* タブ */
.tabs{
  display:flex; gap:26px; border-bottom:1px solid var(--line);
  margin:34px 0 18px; position:sticky; top:var(--top); z-index:9;
  background:var(--paper); padding-top:14px;
}
.tabs button{
  appearance:none; background:none; border:0; cursor:pointer;
  font-family:var(--gt); font-size:var(--fs-sm); letter-spacing:.08em; color:var(--faint);
  padding:0 0 9px; border-bottom:2px solid transparent;
}
.tabs button.on{ color:var(--c); border-bottom-color:var(--c); }
.tabs button:hover{ color:var(--ink); }

.toolbar{
  display:flex; justify-content:flex-end; align-items:center; gap:10px;
  margin:-8px -6px 18px 0; min-height:30px;
}
.toolbar .state{ font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.12em; color:var(--faint); }

/* 経典の目次 */
.kyo-toc{ border:1px solid var(--line2); padding:18px 22px; margin:0 0 40px; background:var(--rail); }
.kyo-toc .g{
  font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.2em;
  color:var(--faint); margin:0 0 10px;
}
.kyo-toc a{ display:block; font-size:var(--fs-sm); line-height:1.9; color:var(--sumi); }
.kyo-toc a:hover{ color:var(--c); }
.kyo-toc a.lvh2{ display:flex; align-items:center; gap:8px; cursor:pointer; padding:3px 0; font-weight:500; }
.kyo-toc a.lvh2.on{ color:var(--c); }
.kyo-toc a.lvh3{ padding-left:18px; font-size:var(--fs-sm); color:var(--faint); }
.kyo-toc .sub{ display:none; margin:2px 0 8px; }
.kyo-toc .sub.open{ display:block; }
.kyo-toc .tw{
  flex:none; width:0; height:0; cursor:pointer;
  border-left:4px solid var(--faint);
  border-top:3.5px solid transparent; border-bottom:3.5px solid transparent;
  transition:transform .12s;
}
.kyo-toc a.lvh2:has(+ .sub.open) .tw{ transform:rotate(90deg) translateX(-1px); }


/* ---------------- 6. 本文 ---------------- */
.paper{ font-family:var(--gt); max-width:none; }
.paper > *:first-child{ margin-top:0; }
.paper h2{
  font-size:21px; font-weight:600; line-height:1.5;
  margin:52px 0 14px; padding-bottom:9px; scroll-margin-top:60px;
  color:var(--ch); border-bottom:1px solid var(--ch);
}
.paper h3{
  font-size:16.5px; font-weight:600; margin:32px 0 8px;
  scroll-margin-top:60px; color:var(--ch);
}
.paper h4{ font-size:var(--fs-base); font-weight:600; color:var(--sumi); margin:24px 0 6px; }
.paper p{ margin:0 0 14px; line-height:1.95; text-wrap:pretty; }
.paper ul,.paper ol{ margin:0 0 14px; padding-left:1.5em; }
.paper li{ margin:3px 0; line-height:1.9; }
.paper blockquote{
  margin:0 0 14px; padding:2px 0 2px 16px;
  border-left:2px solid var(--line); color:var(--sumi);
}
.paper a{ color:var(--c); text-decoration:underline; }

/* 図 */
.paper figure{ margin:18px 0; max-width:100%; }
.paper figure img{ display:block; width:100%; height:auto; margin:0; }
.paper img{ max-width:100%; height:auto; margin:6px 0; border-radius:4px; }
.paper figcaption{
  font-size:var(--fs-xs); line-height:1.8; color:var(--faint);
  margin-top:7px; padding-left:1px;
}
.paper figure.w1{ max-width:32%; }
.paper figure.w2{ max-width:52%; }
.paper figure.w3{ max-width:74%; }
.paper figure.w4{ max-width:100%; }

/* 表 */
.paper table{
  border-collapse:collapse; width:100%; margin:0 0 18px;
  font-size:var(--fs-md); line-height:1.8;
}
.paper th,.paper td{
  border:1px solid var(--line); padding:8px 12px; text-align:left; vertical-align:top;
}
.paper th{ background:var(--rail); font-weight:600; }
.paper caption{
  caption-side:bottom; text-align:left;
  font-size:var(--fs-xs); line-height:1.8; color:var(--faint); padding-top:7px;
}
.paper table.w1{ width:38%; }
.paper table.w2{ width:58%; }
.paper table.w3{ width:78%; }
.paper table.w4{ width:100%; }


/* ---------------- 7. 編集 ---------------- */
.edit-wrap{ position:relative; }
.edit-area{
  outline:none; min-height:60vh; margin-top:-1px;
  border:1px solid var(--line); border-radius:0 0 2px 2px;
  padding:26px 28px 60px; background:var(--paper);
}
.edit-area table{ min-width:60%; }

/* 書式のバー */
.fmt{
  position:sticky; top:calc(var(--top) + 44px); z-index:8;
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  background:var(--paper); border:1px solid var(--line); border-radius:2px 2px 0 0;
  padding:8px 12px; margin:0;
}
body[data-page="post"] .fmt{ top:var(--top); }
.fmt button{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:28px; padding:0; cursor:pointer;
  color:var(--sumi); border:0; background:none; border-radius:2px;
}
.fmt button:hover{ background:var(--line2); color:var(--ink); }
.fmt button.on{ background:var(--line); color:var(--ink); }
.fmt button .gl{ font-family:var(--mc); font-size:15px; font-weight:700; line-height:1; }
.fmt button .gl.it{ font-style:italic; font-weight:500; }
.fmt .sep{ width:1px; height:18px; background:var(--line); margin:0 5px; }
.fmt-sel{
  appearance:none; cursor:pointer; min-width:126px;
  font-family:var(--gt); font-size:var(--fs-sm); color:var(--ink);
  border:1px solid var(--line); border-radius:2px; background:var(--paper);
  padding:5px 26px 5px 10px;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'>\
<path d='M2 4l3 3 3-3' fill='none' stroke='%234d4741' stroke-width='1.2' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 8px center;
}
.fmt-sel:hover{ border-color:var(--faint); }
.fmt-sel:focus{ outline:none; border-color:var(--c); }

/* 表と図の道具立て */
.tbl-ui{
  position:absolute; z-index:7; display:flex; align-items:center; flex-wrap:wrap; gap:2px;
  max-width:min(100%, 640px);
  background:var(--paper); border:1px solid var(--line); border-radius:3px;
  box-shadow:0 1px 4px rgba(25,23,19,.07); padding:3px 5px;
}
.tbl-ui button{
  font-family:var(--gt); font-size:var(--fs-xs); letter-spacing:.02em; white-space:nowrap;
  color:var(--sumi); background:none; border:0; border-radius:2px;
  padding:4px 7px; min-width:26px; cursor:pointer;
}
.tbl-ui button:hover{ background:var(--line2); color:var(--ink); }
.tbl-ui button.on{ background:var(--line); color:var(--ink); }
.tbl-ui button.x:hover{ background:#fbeceb; color:var(--red); }
.tbl-ui .sep{ width:1px; height:14px; background:var(--line); margin:0 3px; }
.tbl-ui .lb{
  font-family:var(--gt); font-size:var(--fs-xs); letter-spacing:.06em;
  color:var(--faint); padding:0 4px 0 2px;
}

/* 表を入れるときの大きさ */
.tbl-size{ display:flex; gap:20px; margin:14px 0 4px; }
.tbl-size label{ display:flex; align-items:center; gap:8px; font-size:var(--fs-md); margin:0; }
.tbl-size input{ width:70px; font-size:var(--fs-base); padding:6px 8px; margin:0; }

/* 画像を入れる */
.sheet .drop{
  border:1px dashed #d6cec1; border-radius:4px; background:var(--rail);
  padding:26px 18px 22px; text-align:center; margin:16px 0 6px;
}
.sheet .drop.over{ border-color:var(--ink); background:var(--paper); }
.sheet .drop .dnote{ margin:14px 0 0; font-size:var(--fs-sm); color:var(--sumi); }
.sheet .drop .dsub{ margin:7px 0 0; font-size:var(--fs-xs); line-height:1.7; color:var(--faint); }
.sheet .urlrow{ margin-top:20px; font-size:var(--fs-sm); color:var(--faint); }
.sheet .urlrow span{ display:flex; gap:8px; margin-top:6px; }
.sheet .urlrow input{ flex:1; min-width:0; }


/* ---------------- 8. 投稿 ---------------- */

/* 新しく書く */
.newpost{ display:flex; justify-content:flex-end; margin:0 0 18px; }
.newpost a{
  display:inline-flex; align-items:center;
  font-family:var(--gt); font-size:var(--fs-sm); letter-spacing:.04em;
  color:var(--sumi); background:var(--paper);
  border:1px solid var(--line); border-radius:3px; padding:7px 16px;
  transition:border-color .15s, color .15s, background .15s;
}
.newpost a:hover{ border-color:var(--c); color:var(--c); background:var(--rail); }

/* 一覧 */
ul.posts{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
ul.posts li{ display:block; padding:16px 0 17px; border-bottom:1px solid var(--line2); }
ul.posts a{ display:block; font-size:var(--fs-lg); line-height:1.7; color:var(--ink); }
ul.posts a:hover{ color:var(--c); text-decoration:underline; }
ul.posts .metaline{ margin-top:7px; }

/* 投稿の見出し */
.post-title{
  font-family:var(--mc); font-size:26px; font-weight:500; letter-spacing:.06em;
  border:0; border-bottom:1px solid var(--line); border-radius:0;
  padding:4px 0; width:100%; background:none;
}
.post-title:focus{ border-bottom-color:var(--c); }
/* 下線がボタンの行を横切らないよう、間をあける */
.post-title{ margin-bottom:16px; }
.post-title + .toolbar{ margin-top:0; }

/* コメント。Slackの並びに寄せています */
.cmts{ margin-top:56px; padding-top:22px; border-top:1px solid var(--line); }
.cmts .cg{
  font-family:var(--gt); font-size:var(--fs-sm); font-weight:600; letter-spacing:.12em;
  color:var(--sumi); margin:0 0 18px;
}
.cmts .cg b{ font-weight:400; color:var(--faint); }

/* 1件ぶん */
.cmts .c{ display:flex; gap:11px; padding:9px 8px 9px 0; border-radius:4px; }
.cmts .c:hover{ background:var(--rail); }
/* 名前の頭文字。色は流派のテーマカラーひとつ。
   人ごとに色を変えないのは、名前が自由入力で、色に意味を持たせられないためです */
.cmts .cav{
  flex:none; width:30px; height:30px; border-radius:4px; margin-top:2px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600; color:#fff;
  background:color-mix(in srgb, var(--c) 72%, #8b8377);
}
.cmts .cbody{ flex:1; min-width:0; }
.cmts .ch{ display:flex; align-items:baseline; gap:9px; margin:0 0 2px; }
.cmts .cw{ font-size:13.5px; font-weight:600; color:var(--ink); }
.cmts .cd{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--faint); }
.cmts .ct{ font-size:var(--fs-md); line-height:1.85; color:var(--ink); }
.cmts .ct > *:last-child{ margin-bottom:0; }
.cmts .ct p{ margin:0 0 6px; line-height:1.85; }
.cmts .ct blockquote{
  margin:0 0 8px; padding:1px 0 1px 12px;
  border-left:3px solid var(--line); color:var(--faint); font-size:var(--fs-sm);
}
.cmts .ct img{ max-width:min(100%, 420px); border-radius:4px; margin:6px 0 2px; }
.cmts .ct ul,.cmts .ct ol{ margin:0 0 6px; padding-left:1.4em; }

/* 押せるものは、カーソルを乗せたときだけ出す */
.cmts .cact{
  display:flex; gap:14px; margin-top:5px;
  font-size:var(--fs-xs); color:var(--mute); opacity:0; transition:opacity .12s;
}
.cmts .c:hover > .cbody > .cact{ opacity:1; }
.cmts .cact a{ cursor:pointer; }
.cmts .cact a:hover{ color:var(--c); text-decoration:underline; }
.cmts .cact .cx:hover{ color:var(--red); }

/* 返信 */
.cmts .cre{ margin-top:2px; }
.cmts .cre .c{ margin-left:-8px; padding-left:20px; border-left:2px solid var(--line2); border-radius:0; }
.cmts .cre .cav{ width:24px; height:24px; font-size:12px; }
.cmts .cre .cw{ font-size:var(--fs-sm); }

/* @名前 */
.mention{
  background:color-mix(in srgb, var(--c) 12%, transparent);
  color:var(--c); border-radius:3px; padding:0 3px; font-weight:500;
}

/* 書きこむところ */
.cnew{ margin-top:18px; position:relative; }
.cnew.rebox{ margin:10px 0 4px; }
.cinput{
  min-height:64px; font-size:var(--fs-md); line-height:1.85;
  border:1px solid var(--line); border-top:0; border-radius:0 0 3px 3px;
  padding:11px 13px; background:var(--paper); outline:none;
}
.cinput:focus{ border-color:var(--c); }
.cinput p{ margin:0 0 6px; }
.cinput > *:last-child{ margin-bottom:0; }
.cbtn{ display:flex; gap:8px; justify-content:flex-end; margin-top:9px; }
.fmt.slim{ position:static; border-radius:3px 3px 0 0; padding:5px 8px; gap:2px; }

/* 編集履歴 */
.hist-list{ font-size:var(--fs-md); }
.hist-list div{ display:flex; gap:18px; padding:10px 0; border-bottom:1px solid var(--line2); }
.hist-list .d{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--faint); flex:0 0 92px; }
.hist-list .t{ flex:1; color:var(--sumi); }
.hist-list .w{ color:var(--faint); font-size:var(--fs-sm); }


/* ---------------- 9. フォーム ---------------- */
.prose{ max-width:660px; }
.prose h2{ font-family:var(--mc); font-weight:500; font-size:16px; letter-spacing:.12em; margin:52px 0 14px; }
.prose p{ margin:0 0 16px; color:var(--sumi); }

.terms{ margin:0; border-top:1px solid var(--ink); }
.terms div{
  display:grid; grid-template-columns:5.5em 1fr; gap:20px; padding:16px 0;
  border-bottom:1px solid var(--line2); align-items:baseline;
}
.terms dt{ font-family:var(--mc); font-size:17px; letter-spacing:.14em; }
.terms dt small{
  display:block; font-family:var(--mono); font-size:var(--fs-xs);
  letter-spacing:.1em; color:var(--faint); margin-top:3px;
}
.terms dd{ margin:0; font-size:var(--fs-md); color:var(--sumi); }

.field{
  display:grid; grid-template-columns:8.5em 1fr; gap:24px; padding:16px 0;
  border-bottom:1px solid var(--line2); align-items:start;
}
.field:first-of-type{ border-top:1px solid var(--ink); }
.field label{ font-family:var(--mc); font-size:15px; letter-spacing:.1em; line-height:1.6; padding-top:6px; }
.field .hint{
  display:block; font-family:var(--gt); font-size:var(--fs-xs); letter-spacing:.02em;
  color:var(--faint); margin-top:2px; line-height:1.6;
}
.field .req{ color:var(--red); margin-left:6px; }
.field .fin{ min-width:0; }
.field .fwarn{
  grid-column:2; font-size:var(--fs-xs); line-height:1.85; color:var(--sumi); margin:10px 0 0;
  background:var(--warm); border-left:2px solid var(--warm-line); border-radius:2px; padding:10px 14px;
}
.actions{ display:flex; gap:12px; align-items:center; margin-top:30px; }

/* 「祖」「改」の下にぶら下がる欄 */
.subf{ margin-top:14px; padding-top:13px; border-top:1px dashed var(--line); }
.subf label{
  display:block; font-family:var(--gt); font-size:var(--fs-sm); font-weight:400;
  letter-spacing:.06em; color:var(--sumi); padding:0; margin:0 0 6px;
}
.subf input[type=text]{ font-size:var(--fs-md); padding:7px 10px; }
.subf .subnote{ font-size:var(--fs-xs); line-height:1.85; color:var(--faint); margin:6px 0 0; }
.subchk{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  margin:8px 0 0; padding:0; border:0;
}
.subchk input{ width:13px; height:13px; flex:none; margin:0; accent-color:var(--ink); cursor:pointer; }
.subchk span{ font-family:var(--gt); font-size:var(--fs-xs); line-height:1.7; color:var(--faint); }
.subchk:hover span{ color:var(--sumi); }

/* あとからでもいい欄 */
.optional{
  margin-top:40px; padding:22px 24px 6px;
  background:var(--rail); border:1px solid var(--line2); border-radius:4px;
}
.optional .oh{
  font-family:var(--gt); font-size:var(--fs-sm); font-weight:600; color:var(--sumi);
  margin:0 0 6px; letter-spacing:.06em;
}
.optional .field{ grid-template-columns:7em 1fr; gap:18px; padding:12px 0; }
.optional .field:first-of-type{ border-top:1px solid var(--line2); }
.optional .field:last-of-type{ border-bottom:0; }
.optional .field label{ font-family:var(--gt); font-size:var(--fs-md); letter-spacing:.06em; padding-top:8px; }
.optional input[type=text],.optional textarea{ font-size:var(--fs-md); padding:7px 10px; }
.optional textarea{ min-height:58px; }
.lkbox .lkrow{ margin-bottom:7px; }


/* ---------------- 10. 狭い画面 ---------------- */
@media(max-width:1180px){
  .doc{ max-width:none; padding:44px 40px 110px; }
  .body{ padding:48px 34px 100px; }
}

@media(max-width:900px){
  :root{ --top:50px; }
  .app{ display:block; }
  .rail{ display:none; }
  .body,.doc{ padding:28px 20px 80px; }
  .doc h1{ font-size:24px; }
  .body h1{ font-size:25px; }
  .field,.terms div{ grid-template-columns:1fr; gap:6px; }
  .field .fwarn{ grid-column:1; }

  /* 上のバー */
  .topbar{
    display:flex; position:sticky; top:0; z-index:20;
    align-items:center; gap:16px; height:50px; padding:0 18px;
    background:var(--rail); border-bottom:1px solid var(--line);
  }
  .topbar .tb-bm{
    font-family:var(--mc); font-size:var(--fs-md); letter-spacing:.2em;
    color:var(--ink); margin-right:2px; white-space:nowrap;
  }
  .topbar > a:not(.tb-bm){ font-size:var(--fs-md); color:var(--sumi); white-space:nowrap; }
  .topbar > a.on{ color:var(--ink); box-shadow:inset 0 -2px 0 var(--ink); }
  .tb-shu{
    display:flex; align-items:center; gap:6px; margin-left:auto;
    font-family:var(--gt); font-size:var(--fs-md); color:var(--sumi);
    background:none; border:0; padding:6px 0; cursor:pointer;
  }
  .tb-shu i{
    border:4px solid transparent; border-top:5px solid var(--faint); border-bottom:0;
    transition:transform .15s;
  }
  .topbar.open .tb-shu i{ transform:rotate(180deg); }
  .tb-drop{
    display:none; position:absolute; right:12px; top:48px; z-index:21;
    min-width:210px; max-width:min(78vw, 300px); max-height:70vh; overflow-y:auto;
    background:var(--paper); border:1px solid var(--line); border-radius:3px;
    box-shadow:0 4px 16px rgba(25,23,19,.10); padding:8px 0;
  }
  .topbar.open .tb-drop{ display:block; }
  .tb-drop .tb-g{
    display:flex; align-items:baseline; justify-content:space-between; gap:8px;
    font-size:var(--fs-xs); font-weight:600; letter-spacing:.12em; color:var(--sumi);
    margin:2px 0 6px; padding:0 16px;
  }
  .tb-drop .tb-g em{ font-style:normal; font-weight:400; font-size:var(--fs-xs); color:var(--faint); }
  .tb-drop a{ display:block; font-size:var(--fs-base); color:var(--sumi); padding:9px 16px; }
  .tb-drop a:hover{ background:var(--rail); }
  .tb-drop a.on{ color:var(--c); background:var(--rail); }
  .tb-drop .add{
    margin-top:6px; padding-top:12px; border-top:1px solid var(--line2);
    font-size:var(--fs-sm); color:var(--faint);
  }

  /* タブは横に流す */
  .tabs{ gap:20px; overflow-x:auto; scrollbar-width:none; margin:26px -20px 16px; padding:12px 20px 0; }
  .tabs::-webkit-scrollbar{ display:none; }
  .tabs button{ white-space:nowrap; }

  /* 五項とその他の情報は縦に積む */
  .five div,.extra div{ grid-template-columns:1fr; gap:3px; padding:12px 0; }
  .five dt{ font-size:var(--fs-sm); color:var(--faint); }
  .five .edit-bar{ grid-template-columns:1fr; }
  .five .lkrow,.lkbox .lkrow{ flex-wrap:wrap; }
  .five .lkrow .l,.lkbox .lkrow .l{ flex:1 1 100%; }

  /* 広いものは本文の中で横に流す */
  .paper{ overflow-x:auto; }
  .edit-area{ padding:20px 18px 50px; }

  /* ホーム */
  .hero h1{ font-size:36px; letter-spacing:.1em; margin-bottom:28px; }
  .hero .tense{ width:160px; margin-bottom:38px; }
  .slider{ gap:16px; }
  .slider .win{ width:66vw; padding:12px 0; }
  .sh{ width:160px; padding:16px 8px; font-size:var(--fs-base); }
}

/* ---------------- 11. 編集履歴の記録 ---------------- */
.recs{ border-top:1px solid var(--line); }
.rec{ padding:15px 0 16px; border-bottom:1px solid var(--line2); }
.rec .rh{ display:flex; align-items:baseline; gap:10px; margin:0; }
.rec .rt{ font-size:var(--fs-lg); line-height:1.7; color:var(--ink); cursor:pointer; }
.rec .rt::before{
  content:""; display:inline-block; margin-right:9px;
  border-left:4px solid var(--faint);
  border-top:3.5px solid transparent; border-bottom:3.5px solid transparent;
  transition:transform .12s; transform-origin:30% 50%;
}
.rec.open .rt::before{ transform:rotate(90deg); }
.rec .rt:hover{ color:var(--c); }
.rec .rx{
  margin-left:auto; color:var(--mute); cursor:pointer; line-height:0; padding:2px;
}
.rec .rx:hover{ color:var(--c); }
.rec .metaline{ margin:6px 0 0; padding-left:13px; }
.rec .rb{ display:none; padding:10px 0 0 13px; }
.rec.open .rb{ display:block; }
.rec .rbody{ margin:0; font-size:var(--fs-md); line-height:1.95; color:var(--sumi); }
.rec .rlink{ margin:10px 0 0; font-size:var(--fs-xs); color:var(--faint); }
.rec .rlink a{ color:var(--c); text-decoration:underline; }
.rdel{
  margin-left:auto; align-self:center;
  font-size:var(--fs-xs); color:var(--mute); cursor:pointer;
}
.rdel:hover{ color:var(--red); text-decoration:underline; }

/* ---------------- 12. 改訂RINGOの状態を選ぶ ---------------- */
.stpick{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin:0 0 18px; font-size:var(--fs-xs); color:var(--faint);
}
.stpick button{ cursor:pointer; opacity:.45; transition:opacity .15s; }
.stpick button:hover{ opacity:.8; }
.stpick button.on{ opacity:1; box-shadow:inset 0 0 0 1px currentColor; }

/* ---------------- 13. コメントのスレッド ---------------- */
.cmts .c.re{
  padding:12px 0 4px 18px; margin-top:10px;
  border-bottom:0; border-left:2px solid var(--line2);
}
.cmts .cre{ margin:8px 0 0; }
/* 編集されたことを示す */
.cmts .ced{
  font-size:var(--fs-xs); color:var(--faint);
  background:var(--rail); border:1px solid var(--line);
  border-radius:2px; padding:0 6px;
}

/* 荒らしを直すための入口。ふだんは目立たせない */
.cops{ margin:22px 0 0; text-align:right; }
.cops a{ font-size:var(--fs-xs); color:var(--mute); cursor:pointer; }
.cops a:hover{ color:var(--c); text-decoration:underline; }
.tag.mention{ color:var(--c); border-color:color-mix(in srgb, var(--c) 30%, var(--line)); }
.rebox{ margin-top:10px; }

/* @ を打ったときの候補 */
.mbox{
  position:absolute; left:10px; bottom:100%; z-index:12; min-width:150px;
  background:var(--paper); border:1px solid var(--line); border-radius:3px;
  box-shadow:0 2px 10px rgba(25,23,19,.10); padding:4px 0; margin-bottom:4px;
}
.mbox a{ display:block; font-size:var(--fs-md); color:var(--sumi); padding:6px 14px; cursor:pointer; }
.mbox a:hover{ background:var(--rail); color:var(--ink); }

/* 書き足りないときの知らせ */
.pwarn{
  font-size:var(--fs-sm); color:var(--red); margin:0 0 10px;
  background:#fbeceb; border-left:2px solid var(--red);
  border-radius:2px; padding:8px 12px;
}

/* ---------------- 14. 読みもの ---------------- */
.doc .lede{ margin:0 0 30px; }
.pgtools{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:30px; padding-top:16px; border-top:1px solid var(--line2);
}
.pgtools .k{
  font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.12em; color:var(--faint);
}
.pgtools .rdel{ margin-left:auto; }
/* ＋ は文字なので、鉛筆と大きさをそろえる */
.toolbar #newpage{ font-size:19px; line-height:1; padding:4px 8px; }
.rlede{ display:block; margin:0 0 22px; font-size:var(--fs-sm); color:var(--faint); }
.rlede input{ margin-top:5px; }

/* 用語の行 */
.trows{ border-top:1px solid var(--line); margin-bottom:12px; }
.trow{
  display:flex; gap:8px; align-items:center;
  padding:9px 0; border-bottom:1px solid var(--line2);
}
.trow .tw{ flex:0 0 88px; }
.trow .tr{ flex:0 0 96px; }
.trow .td{ flex:1 1 auto; min-width:0; }
.trow input{ font-size:var(--fs-md); padding:7px 10px; }
.trow .x{
  flex:0 0 30px; align-self:stretch; border:1px solid var(--line); background:var(--paper);
  color:var(--faint); border-radius:2px; cursor:pointer;
}
.trow .x:hover{ border-color:var(--c); color:var(--c); }

/* どちらの形にするか */
.kindpick{ display:flex; flex-direction:column; gap:8px; margin:0 0 6px; }
.kindpick .kp{
  display:flex; align-items:flex-start; gap:10px; margin:0; cursor:pointer;
  border:1px solid var(--line); border-radius:3px; padding:11px 13px;
}
.kindpick .kp:hover{ border-color:var(--faint); }
.kindpick input{ margin:4px 0 0; width:15px; height:15px; flex:none; accent-color:var(--ink); }
.kindpick span{ font-size:var(--fs-sm); line-height:1.75; color:var(--faint); }
.kindpick b{ display:block; font-size:var(--fs-md); color:var(--ink); margin-bottom:2px; }

@media(max-width:640px){
  .trow{ flex-wrap:wrap; }
  .trow .tw,.trow .tr{ flex:0 0 calc(50% - 4px); }
  .trow .td{ flex:1 1 100%; }
}