:root {
  color-scheme: light dark;

  /* 明るい配色。これが既定で、暗い配色は下で変数だけ差し替える。 */
  --bg: #ffffff;          /* 地は白。色はカードのほうに持たせる */
  --bg-raised: #ffffff;   /* カード・入力 */
  --bg-sunken: #f2f2f0;
  --text: #0f0f0f;        /* 墨 */
  --text-quiet: #2b2b2b;
  --text-faint: #575757;  /* 添え物。読ませる字には使わない */
  --line: #0f0f0f;        /* 面の縁。**黒** */
  --line-soft: #e0e0dd;   /* 罫。目次の区切りなど、面ではないもの */
  /* 押せるもの。**単色**(uball の指定、2026-09-02)。 */
  --accent: #ff0000;
  --accent-ink: #ffffff;
  --accent-quiet: #ffe5e5;
  --r18: #c2005e;
  --r18-ink: #ffffff;

  /* 面の縁と影。**この見た目の芯**なので、ここだけで決める。
     影はぼかさず、右下へずらした黒の面にする(紙を重ねたように見せる)。 */
  --edge: #0f0f0f;
  --edge-w: 3px;
  --edge-w-sm: 2px;
  --shadow: 5px 5px 0 var(--edge);
  --shadow-lift: 8px 8px 0 var(--edge);
  --shadow-sm: 3px 3px 0 var(--edge);

  /* カードの色。**一覧は色の帯として見せる**ので、5色を順に回す。
     作品が3本のうちから画面が持ち、100本になっても飽きない。 */
  --card1: #fff0b3;
  --card2: #cfe6ff;
  --card3: #ffd7e6;
  --card4: #d5f4de;
  --card5: #e5dcff;

  /* 間隔の段階。その場で決めない。 */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4.5rem;

  /* 字の大きさの段階。 */
  --t-xs: 0.8125rem;
  --t-sm: 0.9rem;
  --t-md: 1rem;
  --t-lg: 1.125rem;
  --t-xl: 1.375rem;
  --t-2xl: 1.75rem;

  /* 読むための寸法。DESIGN 5章の数字。ここは見た目の都合で動かさない。 */
  --reading-size: 1.0625rem;  /* 17px */
  --reading-leading: 1.9;
  /* 1行に入れる全角の字数。em で書かないこと。em は「その要素の字の大きさ」で
     解決されるので、枠に 38em と書くと枠の字の大きさ(1rem = 16px)で計算され、
     本文が 17px のときに 38字ではなく 35字ぶんの幅になる(2026-09-01 に実測)。 */
  --measure-chars: 38;
  --measure: calc(var(--measure-chars) * var(--reading-size));
  --wrap: 52rem;

  --font-ui: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP",
             "Yu Gothic", Meiryo, sans-serif;
  --font-reading: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
                  "Noto Serif JP", serif;

  --radius: 10px;
  --radius-sm: 6px;
  --quick: 120ms cubic-bezier(0.2, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17171d;
    --bg-raised: #262630;
    --bg-sunken: #101015;
    --text: #f4f4f6;
    --text-quiet: #c9c9d2;
    --text-faint: #9a9aa6;
    /* 暗いところでは縁を**真っ黒**にする。地よりさらに暗いので、
       明るい線を引くより落ち着いて、同じ「縁がある」見え方になる。 */
    --line: #000000;
    --line-soft: #3a3a45;
    --accent: #ff5a5a;
    --accent-ink: #2a0000;
    --accent-quiet: #3a1414;
    --r18: #ff5c9d;
    --r18-ink: #2a0012;
    --edge: #000000;
    --card1: #3b3417;
    --card2: #16304a;
    --card3: #3f1c2c;
    --card4: #173a26;
    --card5: #2b2447;
  }
}

:root[data-theme="dark"] {
  --bg: #17171d;
  --bg-raised: #262630;
  --bg-sunken: #101015;
  --text: #f4f4f6;
  --text-quiet: #c9c9d2;
  --text-faint: #9a9aa6;
  /* 暗いところでは縁を**真っ黒**にする。地よりさらに暗いので、
     明るい線を引くより落ち着いて、同じ「縁がある」見え方になる。 */
  --line: #000000;
  --line-soft: #3a3a45;
  --accent: #ff5a5a;
  --accent-ink: #2a0000;
  --accent-quiet: #3a1414;
  --r18: #ff5c9d;
  --r18-ink: #2a0012;
  --edge: #000000;
  --card1: #3b3417;
  --card2: #16304a;
  --card3: #3f1c2c;
  --card4: #173a26;
  --card5: #2b2447;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* hidden を確実に効かせる。
   **class に display を書くと、UA の [hidden] より強くなって効かなくなる。**
   画面から後で中身を入れる置き場(続きから・お気に入り)は最初 hidden にしてあり、
   これが効かないと、空の箱が場所だけ取って大きな隙間になる(2026-09-01 に踏んだ)。 */
[hidden] { display: none !important; }

body {
  margin: 0;
  /* 中身が短いページでも、下の帯を画面の下まで押し下げる。
     押し下げないと、短いページで帯が画面の途中に浮いて、
     その下に地の色だけが残る(作りかけに見える)。 */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--t-md);
  line-height: 1.75;
  /* 和文の約物の余った空きを詰める。本文だけは下で戻す。 */
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-quiet); color: var(--accent); }

/* ---- 見出し ---- */

h1, h2, h3 {
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.005em;
  /* 題名は語の切れ目で折り返す。中途半端なところで切れると読みにくい。
     解さない環境では、ただの自動折り返しに戻るだけ。 */
  text-wrap: balance;
  word-break: auto-phrase;
}
h1 { font-size: var(--t-xl); margin: 0 0 var(--s3); }
h2 {
  font-size: var(--t-lg);
  margin: var(--s6) 0 var(--s4);
  padding-left: 0.55em;
  border-left: 3px solid var(--accent);
}
h3 { font-size: var(--t-md); margin: 0 0 var(--s1); }
/* 見出しの中の印は字とくっつかないよう少しだけ離す。
   見出しごと flex にはしないこと(長い題名が折り返せなくなる)。 */
h1 > .icon, h2 > .icon, h3 > .icon { margin-inline-end: 0.35em; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}
.section-head h2 { margin-bottom: var(--s3); }

/* ---- 文字と道 ---- */

a { color: var(--text); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* 鍵盤だけで操作する人が、案内を読み飛ばして本文へ行けるように。 */
.skip {
  position: absolute;
  left: var(--s4);
  top: -3rem;
  z-index: 20;
  padding: var(--s2) var(--s4);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--quick);
}
.skip:focus { top: 0; color: var(--accent-ink); }

code {
  padding: 0.1em 0.4em;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  font-size: 0.92em;
}

/* ---- 印(アイコン)----
   太さ・色・端の丸めはここで一括して決める。形は src/ui/icons.ts にある。 */

.icon {
  width: 1.08em;
  height: 1.08em;
  flex: none;
  vertical-align: -0.17em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- 枠 ---- */

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s5); }

/* 読む画面の枠。本文も見出しも同じ左端に揃えるため、枠のほうを狭める。
   本文だけを中央に寄せると、見出しと本文の左端がずれて、粗く見える。 */
.wrap-narrow .wrap { max-width: calc(var(--measure) + var(--s5) * 2); }

/* 読む画面だけ紙を白くする。本文が紙の上に載っているように見せるため。
   一覧はカードで奥行きを出すが、読む画面にカードは要らない(囲まれると窮屈)。 */
body.paper { background: var(--bg-raised); }
body.paper .site-header, body.paper .site-footer, body.paper .reading-bar {
  background: var(--bg-raised);
}

/* 文章を読ませる要素は、枠に関係なく1行の字数を抑える。
   max-inline-size にしてあるので、縦書きにすると自動で「1行の長さ」に効く。 */
.reading, .work-summary, .lede { max-inline-size: var(--measure); }

/* ---- 上の帯 ---- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 3.25rem;
}
.site-title { margin: 0; font-size: var(--t-md); font-weight: 700; letter-spacing: 0.1em; }
.site-title a { display: inline-flex; align-items: center; gap: 0.4em; text-decoration: none; }
.site-title .icon { color: var(--accent); width: 1.2em; height: 1.2em; }
.site-tagline {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--text-faint);
  letter-spacing: 0.06em;
}

.site-nav { margin-left: auto; display: flex; gap: 2px; font-size: var(--t-sm); }
.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.45em 0.7em;
  border-radius: var(--radius-sm);
  color: var(--text-quiet);
  text-decoration: none;
  transition: color var(--quick), background var(--quick);
}
.site-nav a:hover { background: var(--bg-sunken); color: var(--text); }
.site-nav a.write { color: var(--accent); font-weight: 700; }
.site-nav a.write:hover { background: var(--accent-quiet); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-quiet);
  cursor: pointer;
  transition: color var(--quick), border-color var(--quick);
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
/* 押すと何になるかを見せる。いまの状態ではなく、行き先を出す。 */
.theme-toggle .icon { display: none; }
.theme-toggle[data-to="dark"] .to-dark { display: block; }
.theme-toggle[data-to="light"] .to-light { display: block; }

main { flex: 1 0 auto; padding-block: var(--s6) var(--s8); }

/* ---- 下の帯 ---- */

.site-footer {
  margin-top: var(--s8);
  border-top: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--text-faint);
  font-size: var(--t-sm);
}
.site-footer .wrap { padding-block: var(--s6); }
.foot-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3) var(--s6);
}
.foot-brand a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--text);
  font-size: var(--t-md);
  font-weight: 700;
  text-decoration: none;
}
.foot-brand .icon { color: var(--accent); }
.foot-note { margin: var(--s4) 0 0; color: var(--text-faint); }
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin: 0; }
.foot-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--text-quiet);
  text-decoration: none;
}
.foot-nav a:hover { color: var(--accent); text-decoration: underline; }

/* ---- 本文 ---- */

.reading {
  font-family: var(--font-reading);
  font-size: var(--reading-size);
  line-height: var(--reading-leading);
  /* 本文では palt を戻す。長文は字送りが揃っているほうが読める。 */
  font-feature-settings: normal;
}
.reading p { margin-block: 0 1.6em; }
/* 空行は「間」として意味を持つので、潰さずに残す。
   ただし段落の間隔にそのまま足すと 3.2em になって、間が空きすぎる。
   **半拍ぶん**にとどめる(書いた人の意図は残しつつ、読む流れを切らない)。 */
.reading .blank { height: 0.8em; }

ruby rt { font-size: 0.5em; }

/* 傍点。text-emphasis は縦書きでも正しい側に付く。 */
.emphasis { -webkit-text-emphasis: filled sesame; text-emphasis: filled sesame; }

/* ---- 読書設定 ----
   値は <html> の属性で持つ。属性を差し替えるだけで見え方が変わるので、
   本文の HTML は誰に対しても同一 = キャッシュに載せられる(DESIGN 5章)。 */

html[data-size="s"] { --reading-size: 1rem; }
html[data-size="m"] { --reading-size: 1.09375rem; }
html[data-size="l"] { --reading-size: 1.25rem; }

html[data-leading="narrow"] { --reading-leading: 1.7; }
html[data-leading="normal"] { --reading-leading: 1.9; }
html[data-leading="wide"]   { --reading-leading: 2.2; }

/* 1行の長さ。**長く読む人ほど好みが割れる。** 目が戻る距離が変わるので、
   字の大きさとは別の軸として持たせる。 */
html[data-measure="narrow"] { --measure-chars: 32; }
html[data-measure="normal"] { --measure-chars: 38; }
html[data-measure="wide"]   { --measure-chars: 44; }

/* 書体。既定は明朝(長い和文はこちらが読みやすい)。
   画面で明朝が細く見える環境もあるので、ゴシックへ替えられるようにしてある。 */
html[data-font="gothic"] { --font-reading: var(--font-ui); }

/* 縦書き。既定にはしない(スマホで横スクロールになり、指の動かし方が変わる)。 */
html[data-vertical="on"] .wrap { max-width: none; }
html[data-vertical="on"] .reading {
  writing-mode: vertical-rl;
  /* 縦書きでは height が「1行の長さ」になる。max-inline-size と同じ軸。 */
  height: 76vh;
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: var(--s2);
  /* text-orientation は既定の mixed のままにすること。upright にすると
     仮名まで正立させられて字が重なる(2026-09-01 に実機で確認)。 */
}
html[data-vertical="on"] .reading p { margin-block: 0 1.5em; }
html[data-vertical="on"] .illust img { max-height: 60vh; width: auto; }

.settings {
  margin-block: var(--s5);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
.settings > summary {
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: var(--s3) var(--s4);
  cursor: pointer;
  font-size: var(--t-sm);
  color: var(--text-quiet);
  list-style: none;
}
.settings > summary::-webkit-details-marker { display: none; }
.settings > summary:hover { color: var(--text); }
.settings[open] > summary { border-bottom: 1px solid var(--line-soft); }
.settings-body { padding: var(--s4); display: grid; gap: var(--s3); }
.settings-row { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; }
.settings-row > b {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--t-sm);
  font-weight: 600;
  min-width: 7em;
  color: var(--text-quiet);
}
.settings button {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.35em 0.8em;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
  transition: color var(--quick), border-color var(--quick), background var(--quick);
}
.settings button:hover { border-color: var(--accent); color: var(--accent); }
.settings button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}
/* JS が無いときは切り替えられないので、操作を出さない(押せない釦を見せない)。 */
html:not(.js) .settings { display: none; }

/* ---- 一覧 ---- */

.lede { font-size: var(--t-lg); line-height: 1.85; color: var(--text-quiet); margin-bottom: var(--s6); }

/* はじめのページの入口。**ここだけ余白を大きく取る。**
   検索から来た人が、何の場所かを判断するのに使う数秒がここにある。 */
/* 下の余白を s8 にすると、次の見出しとの間が 100px 近く空いて、
   別のページが始まったように見えた(2026-09-02、測って詰めた)。
   **次に来る h2 は inline-block なので、余白が相殺されない。**
   ここに書いた値が、そのまま見出しの余白に足される。 */
.hero { margin-block: var(--s5) var(--s4); }
.hero h1 {
  margin: 0 0 var(--s3);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  letter-spacing: 0.01em;
}
.hero .lede { margin-bottom: var(--s5); }
.hero .search { margin-block: 0; max-inline-size: 34rem; }

.note {
  margin-block: var(--s5);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--text-faint);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--bg-raised);
  color: var(--text-quiet);
}
.note h2 { margin-top: 0; border: none; padding: 0; font-size: var(--t-md); color: var(--text); }
.note :last-child { margin-bottom: 0; }

.work-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.work-list > li {
  padding: var(--s4) var(--s5);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-raised);
  transition: border-color var(--quick), box-shadow var(--quick), transform var(--quick);
}
.work-list > li:hover {
  border-color: var(--line);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.work-list h3 { line-height: 1.5; }
.work-list h3 a { text-decoration: none; }
.work-list h3 a:hover { color: var(--accent); text-decoration: underline; }
.work-list p { margin: var(--s1) 0 0; }
.catchphrase { color: var(--text-quiet); font-size: var(--t-sm); }

/* 数字の並び。印を添えて、目で拾えるようにする。 */
.meta {
  color: var(--text-faint);
  font-size: var(--t-sm);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s4);
  font-variant-numeric: tabular-nums;
}
.meta > span, .meta > a, .meta > button { display: inline-flex; align-items: center; gap: 0.35em; }
.meta a { color: var(--text-quiet); }
.meta .icon { opacity: 0.7; }

.tag-r18 {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.05em 0.5em;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  color: var(--r18);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* 完結の印。R18 と並ぶので、同じ形・同じ大きさにして色だけ落ち着かせる。
   **朱にしない** — 朱は「いま居るところ」と「押せるもの」に取ってある。 */
.done-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.05em 0.5em;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  color: var(--text-quiet);
  font-size: var(--t-xs);
  font-weight: 700;
}
.done-mark .icon { width: 0.95em; height: 0.95em; opacity: 1; }

/* 次に読むもの。**本文を読み終えた人にだけ出す**ので、
   本文より目立たせない。線1本で仕切り、字は一段落とす。 */
.next-reads {
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: var(--s6);
}
.next-reads h2 {
  margin: 0 0 var(--s3);
  font-size: var(--t-md);
  color: var(--text-quiet);
  font-weight: 700;
}

.mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.mini-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s4);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-raised);
  transition: border-color var(--quick);
}
.mini-list > li:hover { border-color: var(--line); }
.mini-list a { text-decoration: none; display: flex; align-items: baseline; gap: 0.6em; flex: 1 1 14em; }
.mini-list .name { font-weight: 700; color: var(--text); }
.mini-list a:hover .name { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }
.mini-list .by { font-size: var(--t-sm); color: var(--text-faint); }
.mini-list .meta { flex: 0 1 auto; gap: var(--s1) var(--s3); }

/* ---- 作品のページ ---- */

.work-header { margin-bottom: var(--s6); }
.work-header h1 { font-size: var(--t-2xl); }
.work-summary {
  margin-block: var(--s5);
  padding-left: var(--s4);
  border-left: 1px solid var(--line);
  font-size: var(--t-md);
  line-height: 1.9;
  white-space: pre-wrap;
  color: var(--text-quiet);
}
.tag-list { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4em; }
.tag-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em 0.7em;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text-quiet);
  font-size: var(--t-sm);
  text-decoration: none;
  transition: color var(--quick), border-color var(--quick), background var(--quick);
}
.tag-list a:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-quiet); }
.tag-list .count {
  margin-left: 0.15em;
  padding-left: 0.5em;
  border-left: 1px solid var(--line);
  font-size: 0.88em;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

/* 一覧の並べ方・絞り込み。
   **選択肢を隠さない。** 落とし込み(select)にすると、何で並んでいるかが
   閉じた中に消えて、押すまで分からない。数が少ないうちは全部見せるほうが速い。
   いま選ばれているものは aria-current で示し、色ではなく**面で**分かるようにする。 */
.filters {
  display: grid;
  gap: var(--s2);
  margin-block: var(--s5);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s3);
  font-size: var(--t-sm);
}
.filter-row > b {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-width: 6.5em;
  color: var(--text-faint);
  font-weight: 600;
}
.filter-row > b .icon { opacity: 0.7; }
.filter-row .row { display: contents; }
.filter-row a {
  padding: 0.15em 0.7em;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text-quiet);
  text-decoration: none;
  transition: color var(--quick), background var(--quick), border-color var(--quick);
}
.filter-row a:hover { border-color: var(--line); background: var(--bg-sunken); color: var(--text); }
.filter-row a[aria-current] {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg-raised);
  font-weight: 700;
}

.toc-order { display: flex; gap: 0; margin: 0; font-size: var(--t-sm); }
.toc-order a {
  padding: 0.25em 0.75em;
  border: 1px solid var(--line-soft);
  color: var(--text-quiet);
  text-decoration: none;
  transition: color var(--quick), background var(--quick);
}
.toc-order a:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.toc-order a:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: none; }
.toc-order a:hover { background: var(--bg-sunken); color: var(--text); }
.toc-order a[aria-current] {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg-raised);
  font-weight: 700;
}

.episode-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.episode-list > li { border-bottom: 1px solid var(--line-soft); }
.episode-list a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4);
  padding: var(--s3) var(--s2);
  text-decoration: none;
  transition: background var(--quick);
}
.episode-list a:hover { background: var(--bg-sunken); }
.episode-list .no {
  color: var(--text-faint);
  font-size: var(--t-sm);
  min-width: 3.5em;
  font-variant-numeric: tabular-nums;
}
.episode-list .name { flex: 1; }
.episode-list .len {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--text-faint);
  font-size: var(--t-sm);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 既読の印。読んだ話を消したり畳んだりしない — 読み返す人が居る。 */
.episode-list li.read a { color: var(--text-faint); }
.episode-list li.read .no::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.28em;
  margin-right: 0.35em;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg) translateY(-0.1em);
}
.episode-list li.here a {
  background: var(--accent-quiet);
  box-shadow: inset 3px 0 0 var(--accent);
  font-weight: 600;
}

.start-reading { margin-block: var(--s6); }
.start-reading { display: flex; flex-wrap: wrap; gap: var(--s3); }
.start-reading .button { flex: 1 1 14rem; }
.fav-slot { margin-block: var(--s5); }
button.fav {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.55em 1.25em;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--accent);
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
  transition: background var(--quick), color var(--quick);
}
button.fav:hover { background: var(--accent-quiet); }
button.fav.on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
button.fav.on .icon { fill: currentColor; }
button.fav:disabled { opacity: 0.55; cursor: default; }

button.share {
  padding: 0.2em 0.75em;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text-quiet);
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
  transition: color var(--quick), border-color var(--quick), background var(--quick);
}
button.share:hover { color: var(--accent); border-color: var(--accent); }
button.share.done { color: var(--accent); border-color: var(--accent); background: var(--accent-quiet); }

/* ---- 読む画面 ---- */

.episode-head { margin-bottom: var(--s6); }
.episode-head .of-work { margin: 0 0 var(--s2); font-size: var(--t-sm); }
.episode-head .of-work a {
  display: inline-flex; align-items: center; gap: 0.35em; color: var(--text-quiet);
}
.episode-head h1 { margin: 0 0 var(--s3); font-size: var(--t-xl); }
.episode-head .no {
  display: block;
  font-size: var(--t-xs);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: var(--s1);
}

.illust { margin: var(--s6) 0; text-align: center; }
.illust img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.illust figcaption { margin-top: var(--s2); font-size: var(--t-sm); color: var(--text-faint); }

/* 読み終えた瞬間に押せること。題名まで出す — 「次の話」だけでは決められない。 */
.episode-nav {
  margin-top: var(--s7);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}
.episode-nav > a, .episode-nav > span {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-raised);
  text-decoration: none;
  min-width: 0;
  transition: border-color var(--quick), box-shadow var(--quick);
}
.episode-nav > a:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.episode-nav .side { display: grid; gap: 0.1em; min-width: 0; }
.episode-nav .side b {
  font-size: var(--t-xs);
  color: var(--text-faint);
  font-weight: 600;
  letter-spacing: 0.1em;
}
.episode-nav .side em {
  font-style: normal;
  font-size: var(--t-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.episode-nav .next { justify-content: flex-end; text-align: right; }
.episode-nav > span { opacity: 0.5; }
.episode-nav-toc { margin: var(--s3) 0 0; text-align: center; font-size: var(--t-sm); }
.episode-nav-toc a { display: inline-flex; align-items: center; gap: 0.35em; color: var(--text-quiet); }
.episode-foot { margin-top: var(--s5); text-align: center; }

.reading-bar {
  position: sticky;
  bottom: 0;
  margin-top: var(--s6);
  background: var(--bg-raised);
  border-top: 1px solid var(--line-soft);
}
/* どこまで読んだか。細く、静かに。本文の邪魔をしない。 */
.progress { height: 2px; background: var(--line-soft); }
.progress span { display: block; height: 100%; width: 0; background: var(--accent); }
.reading-bar .inner {
  /* 帯は main の外にあるので .wrap-narrow が効かない。本文と同じ幅を直に書く。 */
  max-width: calc(var(--measure) + var(--s5) * 2);
  margin-inline: auto;
  padding: var(--s2) var(--s5);
  display: flex;
  align-items: center;
  gap: var(--s1);
  font-size: var(--t-sm);
}
.reading-bar a {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--text-quiet);
  text-decoration: none;
  padding: 0.4em 0.7em;
  border-radius: var(--radius-sm);
  transition: color var(--quick), background var(--quick);
}
.reading-bar a:hover { background: var(--accent-quiet); color: var(--accent); }
.reading-bar .spacer { flex: 1; }
.reading-bar .left-time {
  color: var(--text-faint);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  padding-inline: var(--s2);
}
.reading-bar .resume {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.75em;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-quiet);
  color: var(--accent);
  font: inherit;
  font-size: var(--t-xs);
  cursor: pointer;
}

/* ---- 探す ---- */

.search { display: flex; gap: var(--s2); margin-block: var(--s5) var(--s6); }
.search input {
  flex: 1;
  min-width: 0;
  padding: 0.7em 0.9em;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  transition: border-color var(--quick);
}
.search input:hover { border-color: var(--text-faint); }
.search button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.7em 1.3em;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.hit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.hit-list a {
  display: block;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-raised);
  text-decoration: none;
  transition: border-color var(--quick), box-shadow var(--quick);
}
.hit-list a:hover { border-color: var(--line); box-shadow: var(--shadow); }
.hit-list .where {
  display: flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--t-xs);
  color: var(--text-faint);
  margin-bottom: var(--s1);
}
.hit-list .snippet { display: block; line-height: 1.85; }
mark {
  background: var(--accent-quiet);
  color: var(--accent);
  font-weight: 700;
  padding: 0 0.15em;
  border-radius: var(--radius-sm);
}

.tag-hint {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-block: 0 var(--s5);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-quiet);
  font-size: var(--t-sm);
}
.tag-hint .icon { color: var(--accent); }

/* ---- 書く画面・入る画面 ---- */

.account { max-inline-size: 26rem; }

.stack { display: grid; gap: var(--s5); margin-block: var(--s6); }
.stack label { display: grid; gap: var(--s1); font-size: var(--t-sm); font-weight: 600; color: var(--text-quiet); }
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.label-row .count { font-weight: 400; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.stack input[type="text"], .stack input[type="email"], .stack input[type="password"],
.stack input[type="file"], .stack textarea {
  width: 100%;
  padding: 0.65em 0.8em;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  font-weight: 400;
  transition: border-color var(--quick);
}
.stack input:hover, .stack textarea:hover { border-color: var(--text-faint); }
.stack textarea { line-height: 1.9; resize: vertical; }
/* 本文の入力は、読む画面と同じ組みで見えるほうが書きやすい。 */
.stack .body-input { font-family: var(--font-reading); font-size: var(--reading-size); }

/* 書き方の道具立て。**JS が無いときは出さない**(押しても何も起きないため。
   hidden を script が外す)。本文の枠と地続きに見えるよう、下の角だけ落とす。 */
.tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s2);
}
.tools button {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.9em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text-quiet);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--quick), border-color var(--quick), background var(--quick);
}
.tools button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-quiet); }
.tools button:disabled { opacity: 0.5; cursor: progress; }

/* 置いてある挿絵。**番号を覚えさせない** — 絵そのものを押させる。 */
.illust-strip { margin-block: var(--s2) 0; }
.illust-strip .label-row { margin: 0 0 var(--s2); font-size: var(--t-sm); color: var(--text-quiet); }
.illust-strip .label-row b { display: inline-flex; align-items: center; gap: 0.35em; }
.illust-strip .label-row a { display: inline-flex; align-items: center; gap: 0.35em; }
.illust-strip ul {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--s2);
  display: flex;
  gap: var(--s3);
  overflow-x: auto;
}
.illust-strip button {
  display: grid;
  gap: 0.25em;
  padding: var(--s2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text-faint);
  font: inherit;
  font-size: var(--t-xs);
  cursor: pointer;
  transition: border-color var(--quick);
}
.illust-strip button:hover { border-color: var(--accent); color: var(--accent); }
.illust-strip img {
  display: block;
  width: 88px;
  height: 66px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
}

/* その場の下見。**本文と同じ組み方で出す**(違う見え方の下見は意味が無い)。 */
.preview-out {
  margin-block: var(--s5);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
.preview-out .label-row { margin: 0 0 var(--s3); font-size: var(--t-sm); color: var(--text-quiet); }
.preview-out .label-row b { display: inline-flex; align-items: center; gap: 0.35em; }
.preview-out .reading { max-inline-size: none; }
button.link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: var(--t-sm);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* 書き方の説明。畳んで置く — 初めての人には要るが、二度目からは邪魔になる。 */
.howto {
  margin-block: var(--s4);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-raised);
  font-size: var(--t-sm);
}
.howto > summary {
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: var(--s3) var(--s4);
  color: var(--text-quiet);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.howto > summary::-webkit-details-marker { display: none; }
.howto[open] > summary { border-bottom: 1px solid var(--line-soft); }
.howto dl { margin: 0; padding: var(--s4); display: grid; gap: var(--s3); }
.howto dt { margin: 0; }
.howto dd { margin: 0.2em 0 0; color: var(--text-quiet); }
.howto code {
  padding: 0.1em 0.4em;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  font-size: 0.95em;
}
.howto .meta { padding: 0 var(--s4) var(--s4); margin: 0; }

.draft-notice {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin: 0 0 var(--s2);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-quiet);
  color: var(--accent);
  font-size: var(--t-sm);
  font-weight: 600;
}
.draft-notice button {
  margin-left: auto;
  padding: 0.35em 0.9em;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.choices {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}
.choices legend {
  padding-inline: 0.4em;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--text-faint);
  letter-spacing: 0.06em;
}
/* .stack label より強く書くこと。あちらは display:grid なので、
   同じ強さだと丸と字が縦に割れる(2026-09-01、実際にそうなった)。 */
.choices .choice {
  display: flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--text);
}
.choices .choice input { accent-color: var(--accent); margin: 0; }

button.primary, .button.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  padding: 0.7em 1.5em;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--quick);
}
button.primary:hover, .button.primary:hover { filter: brightness(1.1); color: var(--accent-ink); }

.form-error {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--r18);
  border-radius: var(--radius);
  color: var(--r18);
  font-weight: 600;
}

/* うまくいったときの知らせ。**朱にしない** — 朱は「押せるもの」に取ってある。
   済んだことを赤で言われると、失敗したように見える。 */
.form-done {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text-quiet);
  font-weight: 600;
}

/* 設定のような、いくつかの用紙が並ぶ画面。**見出しは横線で区切る。**
   縦棒(既定)のままだと、用紙の切れ目がどこか分からない。 */
.account h2 {
  margin-top: var(--s7);
  padding: var(--s5) 0 0;
  border-left: none;
  border-top: 1px solid var(--line-soft);
}

.logout, .danger { margin-top: var(--s7); }
.logout button, .danger button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.5em 1.1em;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text-quiet);
  font: inherit;
  cursor: pointer;
  transition: color var(--quick), background var(--quick), border-color var(--quick);
}
.danger button { border-color: var(--r18); color: var(--r18); }
.danger button:hover { background: var(--r18); color: var(--bg-raised); }

.status {
  display: inline-flex;
  align-items: center;
  padding: 0.05em 0.55em;
  border-radius: var(--radius-sm);
  font-size: var(--t-xs);
  font-weight: 700;
  border: 1px solid var(--line);
}
.status-public { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.status-draft { color: var(--text-faint); }
.status-private { color: var(--text-faint); border-style: dashed; }

.preview-bar {
  margin-bottom: var(--s5);
  padding: var(--s3) var(--s4);
  border: 1px dashed var(--accent);
  border-radius: var(--radius);
  background: var(--accent-quiet);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  font-size: var(--t-sm);
}
.preview-bar > span { display: inline-flex; align-items: center; gap: 0.4em; }

.illust-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.illust-list > li {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  padding: var(--s3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
.illust-list img {
  width: 128px; height: auto; max-height: 128px;
  object-fit: contain;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
}
.illust-list p { margin: 0 0 var(--s1); }
.illust-list .danger { margin-top: var(--s2); }

.about-list {
  max-inline-size: var(--measure);
  margin-block: var(--s4);
  padding-left: 1.3em;
  line-height: 1.9;
  color: var(--text-quiet);
}
.about-list li { margin-bottom: var(--s2); }

/* ---- ページ送り ---- */

.pager { margin-block: var(--s6); display: flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); }
.pager a, .pager > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.5em 1em;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-raised);
  text-decoration: none;
  transition: border-color var(--quick), color var(--quick);
}
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager > span { color: var(--text-faint); opacity: 0.55; }
.pager .current {
  border: none;
  background: none;
  opacity: 1;
  margin-left: auto;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* ---- 年齢の確認 ---- */

.gate { max-width: 30em; margin-inline: auto; text-align: center; }
.gate .mark { color: var(--r18); margin: 0; }
.gate .mark .icon { width: 2.4rem; height: 2.4rem; stroke-width: 1.4; }
.gate h1 { font-size: var(--t-lg); margin-top: var(--s3); }
.gate .actions { display: flex; gap: var(--s3); justify-content: center; margin-top: var(--s6); flex-wrap: wrap; }
.gate button, .gate .leave {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.7em 1.5em;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.gate button { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }

@media (max-width: 40rem) {
  /* 帯は**2段にする。** 案内が6つに増えたので、名前と一緒に1行へ詰めると
     配色の釦が折り返して、1行目に大きな空きができる(2026-09-02 に見つけた)。
     1段目に名前と配色、2段目に案内を全幅で置く。 */
  .site-header .wrap { flex-wrap: wrap; row-gap: var(--s2); padding-block: var(--s2); }
  .site-tagline { display: none; }
  .site-title { order: 1; }
  .theme-toggle { order: 2; margin-left: auto; }
  .site-nav {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
    justify-content: space-between;
    font-size: var(--t-sm);
    gap: 0;
  }
  .site-nav a { padding: 0.35em 0.5em; }
  .site-nav a .icon { display: none; }
  h1 { font-size: var(--t-lg); }
  .work-header h1 { font-size: var(--t-xl); }
  .episode-nav { grid-template-columns: 1fr; }
  .episode-nav .next { justify-content: flex-start; text-align: left; flex-direction: row-reverse; }
  .wrap { padding-inline: var(--s4); }

  /* 並べ方・絞り込み。**ラベルを1行目に独立させる。**
     横に並べたままだと選択肢が折り返して、どのラベルの下なのかが読めなくなる。 */
  .filter-row { display: grid; grid-template-columns: 1fr; gap: var(--s2); }
  .filter-row > b { min-width: 0; }
  .filter-row .row { display: flex; flex-wrap: wrap; gap: var(--s2); }

  /* はじめのページの入口。**内側の余白を詰める。**
     枠が太いぶん、画面の狭いところでは中身の幅がそのぶん削られる。 */
  .hero { padding: var(--s5) var(--s4); }
  .hero .search { flex-wrap: wrap; }
  .hero .search input { flex: 1 1 100%; }
  .hero .search button { flex: 1 1 auto; }

  /* 数字の並び。字と字の間を詰めて、行数を1つでも減らす。 */
  .meta { gap: var(--s1) var(--s3); }

  /* 感想と運営の操作。押せるものが横に並びきらないので、間を詰める。 */
  .comment-list > li { padding: var(--s3) var(--s4); }
  form.inline button { padding: 0.3em 0.7em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==== 面と縁 — この見た目の芯 ====================================
 *
 * **枠の太さと影は、ここでまとめて決める。** 部品ごとに書くと必ずばらつき、
 * 「なんとなく揃っていない」画面になる。ここに並んでいるものが「面」で、
 * それ以外は面ではない(罫や字)。
 *
 * **順番の都合で、この節は部品の定義より後ろに置いてある。**
 * 同じ強さの規則は後に書いたほうが勝つので、部品側の細い枠を上書きできる。
 * 逆に、ここで潰したくないもの(本文・読む画面)は下で戻している。
 * ================================================================= */

/* 大きい面。 */
.hero,
.work-list > li,
.note,
.filters,
.howto,
.preview-out,
.episode-list,
.hit-list a,
.settings,
.illust-list > li,
.preview-bar,
.choices,
.draft-notice {
  border: var(--edge-w) solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* 小さい面(押せるもの・印)。影も小さくする。 */
.mini-list > li,
.tag-list a,
.pager a,
.done-mark,
.tag-r18,
.status,
.tools button,
.illust-strip button,
.settings button,
.settings-row button,
.reading-bar .resume,
button.fav,
button.share,
.link-button,
.site-nav a.write,
.theme-toggle,
.form-error,
.form-done,
.episode-nav > a,
.episode-nav > span {
  border: var(--edge-w-sm) solid var(--edge);
  box-shadow: var(--shadow-sm);
}

/* 書き込む欄。**縁は黒**だが、影は付けない(沈んで見えるべきもの)。 */
.stack input[type="text"], .stack input[type="email"], .stack input[type="password"],
.stack input[type="url"], .stack input[type="file"], .stack textarea, .search input {
  border: var(--edge-w-sm) solid var(--edge);
  box-shadow: none;
}
.stack input:focus-visible, .stack textarea:focus-visible, .search input:focus-visible {
  box-shadow: var(--shadow-sm);
}

/* 押せるものの面。**色はここでまとめて決める**
   (部品ごとに書くと、必ず一つ塗り忘れる)。 */
button.primary,
.button.primary,
.search button,
.site-nav a.write,
.settings button[aria-pressed="true"],
.status-public {
  background: var(--accent);
  border-color: var(--edge);
  color: var(--accent-ink);
}

/* 押せるものは、押すと沈む。影の長さを縮めて、同じぶん動かす。 */
button.primary, .button.primary, .search button {
  border: var(--edge-w) solid var(--edge);
  box-shadow: var(--shadow);
  transition: transform var(--quick), box-shadow var(--quick), filter var(--quick);
}
button.primary:hover, .button.primary:hover, .search button:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-lift);
}
button.primary:active, .button.primary:active, .search button:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--edge);
}

/* 帯は上下を黒で切る。 */
.site-header { border-bottom: var(--edge-w) solid var(--edge); }
.site-footer { border-top: var(--edge-w) solid var(--edge); }
.reading-bar { border-top: var(--edge-w) solid var(--edge); }

/* 一覧は**色の帯**。5色を順に回す。
   作品が3本しかないうちでも画面が持ち、増えても飽きない。 */
.work-list > li:nth-child(5n + 1) { background: var(--card1); }
.work-list > li:nth-child(5n + 2) { background: var(--card2); }
.work-list > li:nth-child(5n + 3) { background: var(--card3); }
.work-list > li:nth-child(5n + 4) { background: var(--card4); }
.work-list > li:nth-child(5n + 5) { background: var(--card5); }
.work-list > li:hover {
  border-color: var(--edge);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-lift);
}
.hit-list a:hover, .episode-nav > a:hover {
  border-color: var(--edge);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-lift);
}

.tag-list li:nth-child(5n + 1) a { background: var(--card1); }
.tag-list li:nth-child(5n + 2) a { background: var(--card2); }
.tag-list li:nth-child(5n + 3) a { background: var(--card3); }
.tag-list li:nth-child(5n + 4) a { background: var(--card4); }
.tag-list li:nth-child(5n + 5) a { background: var(--card5); }
.tag-list a { color: var(--text); font-weight: 700; }
.tag-list a:hover { background: var(--accent); border-color: var(--edge); color: var(--accent-ink); }
.tag-list .count { border-left: 2px solid var(--edge); opacity: 1; }

/* 印。**色で塗って、黒で囲う。** 字だけの印は、この地の上では弱い。 */
.done-mark { background: var(--card4); color: var(--text); border-radius: var(--radius-sm); }
.tag-r18 { background: var(--r18); color: var(--r18-ink); border-radius: var(--radius-sm); }

/* 見出しは黒い札にして、朱の影を落とす。**縦棒より、面のほうが強い。** */
h2 {
  display: inline-block;
  margin-block: var(--s6) var(--s4);
  padding: 0.3em 0.85em;
  border-left: 0;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--bg-raised);
  box-shadow: 4px 4px 0 var(--accent);
}
/* 札にしないところ。囲いの中の見出しと、字だけで足りるところ。 */
.note h2, .settings h2 {
  display: block;
  margin-top: 0;
  padding: 0;
  background: none;
  color: var(--text);
  box-shadow: none;
}
.account h2 { margin-top: var(--s8); border-top: 0; padding: 0.3em 0.85em; }
.next-reads h2 { color: var(--bg-raised); }

/* 見出しの字は太く。ポップな面に細い字を載せると、面だけが目立つ。 */
h1, h2, h3, .site-title, .site-nav a { font-weight: 800; letter-spacing: -0.012em; }
h1 { font-weight: 900; }
.hero h1 { font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.2rem); line-height: 1.22; }

/* はじめのページの入口は、白い紙を1枚置いた形にする。 */
.hero {
  background: var(--bg-raised);
  padding: var(--s6) var(--s6) var(--s6);
  box-shadow: var(--shadow-lift);
}
.hero .search { max-inline-size: 32rem; }

/* 案内の中の「書く」は、押せると分かるように札にする。 */
.site-nav a.write {
  padding: 0.3em 0.9em;
  border-radius: 999px;
  color: var(--accent-ink);
}
.site-nav a.write:hover { color: var(--accent-ink); filter: brightness(1.08); }

/* 目次は1枚の面。中の区切りは細い罫のままにする(全部黒くすると牢屋になる)。 */
.episode-list { border-top: var(--edge-w) solid var(--edge); overflow: hidden; }
.episode-list > li:last-child { border-bottom: 0; }

/* 並べ替えの二択は、ひと続きの面として囲う。
   ばらばらに縁を付けると、2つの別の釦に見えて「いま選ばれているほう」が読めない。 */
.toc-order {
  border: var(--edge-w-sm) solid var(--edge);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.toc-order a { border: 0; border-radius: 0; }
.toc-order a + a { border-left: var(--edge-w-sm) solid var(--edge); }

/* あらすじは囲わず、太い縦棒で「引用のかたまり」だと示す。
   ここを囲うと、目次までカードが3つ続いて画面が固くなる。 */
.work-summary { border-left: var(--edge-w) solid var(--edge); }

/* **読む画面には縁を持ち込まない。** 本文が囲まれると窮屈になる(DESIGN 5章)。 */
body.paper .settings { box-shadow: var(--shadow-sm); }
.reading, .work-summary { box-shadow: none; }

/* 新しく出た話。**作品ではなく話が主役**なので、
   作品名と作者は上に小さく、話の題名を大きく出す。 */
.update-list { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s3); }
.update-list > li {
  padding: var(--s3) var(--s5);
  border: var(--edge-w) solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--bg-raised);
  transition: transform var(--quick), box-shadow var(--quick);
}
.update-list > li:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lift); }
.update-list .of-work {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s3);
  margin: 0 0 var(--s1);
  font-size: var(--t-sm);
}
.update-list .of-work a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--text-quiet);
  text-decoration: none;
}
.update-list .of-work a:hover { color: var(--accent); text-decoration: underline; }
/* 同じ作品の話は1枚の面の中に積む。細い罫で区切るだけにして、
   札を何枚も重ねない(重ねると、作品名だけが何度も目に入る)。 */
.update-list .of-episodes {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--edge-w-sm) solid var(--line-soft);
}
.update-list .of-episodes > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s1) var(--s4);
  padding-block: var(--s2);
}
.update-list .of-episodes > li + li { border-top: var(--edge-w-sm) solid var(--line-soft); }
.update-list .of-episodes > li > a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55em;
  font-weight: 700;
  font-size: var(--t-md);
  text-decoration: none;
}
.update-list .of-episodes > li > a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.update-list .no {
  color: var(--text-faint);
  font-size: var(--t-sm);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.update-list .meta { margin: 0; }
.update-list .more {
  margin: var(--s2) 0 0;
  padding-top: var(--s2);
  border-top: var(--edge-w-sm) solid var(--line-soft);
  font-size: var(--t-sm);
}
.update-list .more a { display: inline-flex; align-items: center; gap: 0.4em; color: var(--text-quiet); }

/* よく読まれている作品。**順位だけを出し、回数は出さない**(DESIGN 5章)。
   数字は札にして左上に置く。行の中に混ぜると、他の数字(話数・字数)と
   見分けが付かなくなる。 */
.work-list.ranked > li { position: relative; padding-top: calc(var(--s6) + var(--s2)); }
.rank {
  position: absolute;
  inset-block-start: calc(var(--edge-w) * -1);
  inset-inline-start: calc(var(--edge-w) * -1);
  margin: 0;
  padding: 0.15em 0.7em;
  border: var(--edge-w) solid var(--edge);
  border-start-start-radius: var(--radius);
  border-end-end-radius: var(--radius);
  background: var(--edge);
  color: var(--bg-raised);
  font-size: var(--t-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}
.rank b { font-size: var(--t-md); font-weight: 900; }
/* 上位3つだけ差し色にする。**全部を赤くすると、順位の差が消える。** */
.work-list.ranked > li:nth-child(-n + 3) .rank { background: var(--accent); color: var(--accent-ink); }

/* 感想。**本文と同じ書体では出さない**(作品の続きに見えてしまう)。 */
.comment-list { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s3); }
.comment-list > li {
  padding: var(--s4) var(--s5);
  border: var(--edge-w) solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--bg-raised);
}
.comment-list .meta { margin: 0 0 var(--s2); }
.comment-body {
  margin: 0 0 var(--s2);
  white-space: pre-wrap;
  line-height: 1.9;
  overflow-wrap: anywhere;
}
.comment-list form.inline + form.inline { margin-left: var(--s2); }

/* 作者からの返信。**感想の中に入れ子で置く。**
   別の行として並べると、どの感想への返事なのかが読めなくなる。
   囲まずに太い縦棒で示す — 面をもう1枚重ねると、感想が二重の箱になって窮屈。 */
.comment-reply {
  margin: 0 0 var(--s2);
  padding: var(--s2) 0 var(--s1) var(--s4);
  border-left: var(--edge-w) solid var(--accent);
}
.comment-reply .meta { margin: 0 0 var(--s1); }
.comment-reply .comment-body { margin: 0; }

/* 棚に引いた感想。**返信そのものと見分けが付くように、字を落として置く。** */
.comment-quote {
  margin: 0 0 var(--s2);
  padding-left: var(--s3);
  border-left: var(--edge-w-sm) solid var(--line-soft);
  color: var(--text-quiet);
  font-size: var(--t-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* まだ見ていないもの。**面ごと変えず、縁だけを差し色にする**
   (背景まで変えると、読むところが読みにくくなる)。 */
.comment-list > li.is-new { border-color: var(--accent); }

/* 棚への道に付く丸。**数は出さない** — 数えるほどの意味が無く、
   「何かある」と分かれば人は見に行く。 */
.site-nav a .dot {
  display: inline-block;
  inline-size: 0.5em;
  block-size: 0.5em;
  margin-inline-start: 0.3em;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: super;
}

/* 返信の用紙は畳んでおく。**開いていると、感想より用紙のほうが長くなる。** */
.reply-form { margin: var(--s2) 0; }
.reply-form > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.9em;
  border: var(--edge-w-sm) solid var(--edge);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  background: var(--bg-raised);
  font-size: var(--t-sm);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.reply-form > summary::-webkit-details-marker { display: none; }
.reply-form > summary:hover { color: var(--accent); }
.reply-form[open] > summary { margin-bottom: var(--s3); }

/* 数を入れる欄。**幅を字数に合わせる**(名前と同じ幅だと、何を入れるか迷う)。 */
.stack .narrow-field input { max-inline-size: 8rem; }

/* 押せるが、いちばん強くはないもの。 */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  padding: 0.6em 1.3em;
  border: var(--edge-w-sm) solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background: var(--bg-raised);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}
.button:hover { color: var(--accent); }

/* 目立たせない道(通報など)。**あることは分かるが、目は引かない。** */
.meta.quiet, .meta a.quiet { color: var(--text-faint); }
.meta.quiet { font-size: var(--t-xs); max-inline-size: 44rem; }
.meta a.quiet:hover { color: var(--accent); }

/* 用紙を横に並べる(運営の画面の操作)。 */
form.inline { display: inline; }
form.inline button {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.9em;
  border: var(--edge-w-sm) solid var(--edge);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 700;
  cursor: pointer;
}
form.inline button:hover { background: var(--bg-sunken); }
/* 目立たせない操作(知らせる)。**押せることは分かるが、目は引かない。** */
form.inline.quiet button {
  border-color: var(--line-soft);
  box-shadow: none;
  color: var(--text-faint);
  font-weight: 400;
}
form.inline.quiet button:hover { border-color: var(--edge); color: var(--text); }

/* ---- 紙に出すとき ---- */
/* 長い小説を紙で読みたい人は確かに居る。**押せるものは全部消す**
   (紙の上では何の意味も無く、本文の場所を取るだけ)。
   道(URL)は本文の題の下に1行だけ添える。 */
@media print {
  :root {
    --bg: #ffffff;
    --bg-raised: #ffffff;
    --bg-sunken: #ffffff;
    --text: #000000;
    --text-quiet: #222222;
    --text-faint: #444444;
    --line: #999999;
    --line-soft: #cccccc;
    --shadow: none;
  }
  body { min-height: 0; display: block; background: var(--bg); }
  .site-header, .site-footer, .reading-bar, .settings, .episode-nav, .episode-nav-toc,
  .episode-foot, .next-reads, .skip, .theme-toggle, .filters, .pager, .toc-order,
  .fav-slot, [data-resume] { display: none !important; }
  main { padding: 0; }
  .wrap { max-width: none; padding: 0; }
  .reading {
    max-inline-size: none;
    font-size: 10.5pt;
    line-height: 1.8;
    writing-mode: horizontal-tb !important;
  }
  .reading p { orphans: 3; widows: 3; }
  .illust { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
  /* 影は紙の上では汚れにしかならない。 */
  *, *::before, *::after { box-shadow: none !important; }
  h2 { background: none !important; color: var(--text) !important; padding: 0 !important; }
  .episode-head { border-bottom: 1px solid var(--line); padding-bottom: 6pt; margin-bottom: 12pt; }
}