/* まいばん昔話 — 軽さ優先（Webフォントなし・外部読み込みなし） */
:root {
  --bg: #faf5ea;
  --panel: #fffdf8;
  --text: #2b2a33;
  --muted: #6d6a76;
  --accent: #b1651a;
  --accent-soft: #f4e3c8;
  --border: #e5dbc7;
  --fs: 1;
  color-scheme: light;
}
:root[data-theme="night"] {
  --bg: #131a2b;
  --panel: #1b2338;
  --text: #efe6d3;
  --muted: #aaa497;
  --accent: #f0b35b;
  --accent-soft: #28334f;
  --border: #2e3a57;
  color-scheme: dark;
}
:root[data-fontsize="s"] { --fs: 0.9; }
:root[data-fontsize="l"] { --fs: 1.18; }
:root[data-fontsize="xl"] { --fs: 1.4; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
  font-size: calc(17px * var(--fs));
  line-height: 1.9;
  letter-spacing: 0.03em;
}
a { color: var(--accent); }

/* ヘッダー */
.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  font-size: calc(15px * var(--fs));
}
.brand { font-weight: 700; text-decoration: none; color: var(--text); font-size: 1.1em; margin-right: auto; display: inline-flex; align-items: center; gap: 8px; }
.brand-icon { width: 36px; height: 36px; flex: none; }
.nav { display: flex; gap: 12px; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--muted); }
.nav a:hover { color: var(--accent); }
.tools { display: flex; gap: 6px; }
.tool, .btn {
  font: inherit;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
.tool:hover, .btn:hover { border-color: var(--accent); color: var(--accent); }

main { max-width: 42rem; margin: 0 auto; padding: 24px 16px 48px; }

/* お話 */
.date-label { margin: 0; color: var(--accent); font-weight: 700; font-size: 0.95em; }
.story .title { margin: 4px 0 8px; font-size: 1.9em; line-height: 1.3; }
.meta { margin: 0 0 16px; color: var(--muted); font-size: 0.88em; }
.meta span + span::before { content: "・"; margin: 0 4px; }
.note {
  margin: 8px 0;
  padding: 8px 12px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 6px;
  font-size: 0.9em;
}
.audio {
  margin: 12px 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}
.audio.placeholder { border-style: dashed; color: var(--muted); font-size: 0.9em; }
.audio.placeholder p { margin: 0; }
.audio-btn {
  font: inherit;
  font-weight: 700;
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #1a1408;
  cursor: pointer;
}
.audio-note { margin: 8px 0 0; font-size: 0.82em; color: var(--muted); }
.audio audio { width: 100%; }
.text p { margin: 0 0 1.1em; text-indent: 0; }

/* 本文の文字: 漢字（既定・親が読む）／ルビつき／ひらがな。同じHTMLをCSSで切り替える */
.rb .sp { display: none; }
.rb .sp-k { display: inline; } /* 漢字表示でも、ひらがな同士の境目だけ細い空きを残す */
/* 題名は短いので、漢字表示でも読みを出す（転失気・船徳などが親にも読めるように） */
html:not([data-mode="kana"]) .story .title rt { display: ruby-text; font-size: 0.42em; letter-spacing: 0; }
.rb rt { display: none; }
html[data-mode="ruby"] .text .sp,
html[data-mode="kana"] .text .sp { display: inline; }
html[data-mode="ruby"] .text { line-height: 2.5; }
html[data-mode="ruby"] .rb rt { display: ruby-text; font-size: 0.5em; letter-spacing: 0; }
html[data-mode="kana"] .rb ruby { display: inline; }
html[data-mode="kana"] .rb .k { display: none; }
html[data-mode="kana"] .rb rt { display: inline; font-size: inherit; }
.mode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 2px; font-size: 0.9em; }
.mode-label { color: var(--muted); margin-right: 4px; }
.mode-btn {
  font: inherit;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
html:not([data-mode]) .mode-btn[data-mode="kanji"],
html[data-mode="kanji"] .mode-btn[data-mode="kanji"],
html[data-mode="ruby"] .mode-btn[data-mode="ruby"],
html[data-mode="kana"] .mode-btn[data-mode="kana"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a1408;
  font-weight: 700;
}
.mode-hint { margin: 0 0 18px; color: var(--muted); font-size: 0.8em; }
.ending { color: var(--accent); font-weight: 700; margin: 1.5em 0; }
.pr {
  margin: 20px 0;
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.88em;
}
.pr-label {
  display: inline-block;
  margin-right: 8px;
  padding: 0 6px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 0.8em;
}
/* 子どもが読む表示（ルビつき・ひらがな）では PR 枠を出さない */
html[data-mode="ruby"] .pr, html[data-mode="kana"] .pr { display: none; }
.pager { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 24px 0 8px; font-size: 0.92em; }
.pager a { text-decoration: none; }
.source { color: var(--muted); font-size: 0.82em; }

/* 一覧 */
.finder h1 { font-size: 1.5em; margin: 0 0 8px; }
.finder h1 small { color: var(--muted); font-size: 0.6em; font-weight: 400; }
.finder-row { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-bottom: 8px; }
.finder-row label { font-size: 0.9em; color: var(--muted); }
.finder-row input {
  font: inherit;
  font-size: 1em;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
}
.month { margin-top: 20px; }
.month h2 { font-size: 1.15em; margin: 0 0 4px; border-bottom: 1px solid var(--border); }
.month h2 small { color: var(--muted); font-weight: 400; font-size: 0.8em; }
.story-list { list-style: none; margin: 0; padding: 0; }
.story-list li a { display: block; padding: 6px 8px; border-radius: 8px; text-decoration: none; color: var(--text); }
.story-list li a:hover { background: var(--accent-soft); }
.story-list .d { display: inline-block; min-width: 3.2em; color: var(--accent); font-weight: 700; }
.story-list .empty { color: var(--muted); font-size: 0.9em; padding: 4px 8px; }

/* ページ */
.page h1 { font-size: 1.6em; }
.page h2 { font-size: 1.15em; margin-top: 1.6em; }
.foot { padding: 24px 16px 40px; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.82em; text-align: center; }
.foot p { margin: 4px 0; }

@media (max-width: 600px) {
  .top { font-size: calc(14px * var(--fs)); }
  .nav { order: 3; width: 100%; }
  .story .title { font-size: 1.6em; }
}

/* SEO で足した部品: パンくず・あらすじ・関連・さがし方・足もとの案内 */
.crumbs { font-size: 0.8em; color: var(--muted); margin: 0 0 12px; }
.crumbs a { color: var(--muted); }
.lead { margin: 0 0 14px; color: var(--muted); font-size: 0.9em; }
.meta a { color: var(--muted); text-decoration: underline dotted; }
.summary { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); font-size: 0.92em; }
.summary-label { display: block; font-weight: 700; color: var(--accent); font-size: 0.85em; margin-bottom: 2px; }
.related { margin: 28px 0 8px; }
.related h2 { font-size: 1.05em; margin: 0 0 6px; }
.permalink { font-size: 0.85em; color: var(--muted); }
.intro { color: var(--muted); font-size: 0.92em; margin: 4px 0 12px; }
.chips p { margin: 6px 0; font-size: 0.85em; line-height: 2.1; }
.chips strong { color: var(--muted); font-weight: 700; margin-right: 6px; }
.chip { display: inline-block; margin: 0 4px 4px 0; padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px; text-decoration: none; color: var(--text); background: var(--panel); }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.month h2 a { color: var(--text); text-decoration: none; }
.foot-nav { text-align: left; max-width: 42rem; margin: 0 auto 14px; line-height: 2; }
.foot-nav p { margin: 2px 0; }
.foot-nav strong { margin-right: 6px; }
.about-story { margin: 24px 0 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.about-story h2 { font-size: 1.02em; margin: 0 0 6px; }
.about-story dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 0.9em; }
.about-story dt { color: var(--muted); font-weight: 700; }
.about-story dd { margin: 0; }
@media (max-width: 600px) { .about-story dl { grid-template-columns: 1fr; } .about-story dd { margin-bottom: 6px; } }

/* 印刷: お話の本文だけを白い紙に（表示中の 漢字／ルビつき／ひらがな のまま） */
@media print {
  .top, .tools, .crumbs, .lead, .note, .summary, .summary-label, .audio, .mode, .mode-hint, .pager, .pr,
  .about-story, .related, .permalink, .foot, .foot-nav { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  main { max-width: none; padding: 0; }
  .story .title { font-size: 1.6em; }
  .text p { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* トップの帯（共有画像 og.png と同じ見た目。画像ではなく文字で組む） */
.hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 22px;
  margin: 0 0 18px; padding: 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, #131a2b 0%, #222d4a 100%);
  color: #efe6d3;
}
.hero::before, .hero::after { content: "✦"; position: absolute; color: #efe6d3; opacity: .85; }
.hero::before { top: 12px; right: 22px; font-size: 18px; }
.hero::after { bottom: 14px; right: 64px; font-size: 11px; }
.hero-icon { width: 132px; height: 132px; flex: none; border-radius: 22%; }
.hero-text { min-width: 0; }
.hero-name { margin: 0; font-size: 2em; font-weight: 700; letter-spacing: .04em; line-height: 1.25; }
.hero-name::after { content: ""; display: block; width: 64px; height: 3px; margin: 10px 0 12px; background: #f0b35b; border-radius: 2px; }
.hero-tag { margin: 0 0 6px; font-size: 1em; }
.hero-sub { margin: 0; font-size: .82em; color: #aab2c7; }
@media (max-width: 480px) {
  .hero { gap: 14px; padding: 16px; }
  .hero-icon { width: 92px; height: 92px; }
  .hero-name { font-size: 1.5em; }
}
@media print { .hero { display: none !important; } }

/* 夜空の星（夜の表示だけ。画像ファイルを使わず CSS と埋め込みの SVG で描く＝読み込みなし） */
:root[data-theme="night"] body {
  background-image: radial-gradient(1.5px 1.5px at 23px 41px, rgba(239,230,211,0.7), transparent), radial-gradient(1.5px 1.5px at 97px 13px, rgba(239,230,211,0.5), transparent), radial-gradient(1.5px 1.5px at 171px 88px, rgba(239,230,211,0.65), transparent), radial-gradient(1.5px 1.5px at 260px 30px, rgba(239,230,211,0.45), transparent), radial-gradient(1.5px 1.5px at 310px 140px, rgba(239,230,211,0.65), transparent), radial-gradient(1.5px 1.5px at 60px 170px, rgba(239,230,211,0.45), transparent), radial-gradient(1.5px 1.5px at 140px 230px, rgba(239,230,211,0.6), transparent), radial-gradient(1.5px 1.5px at 230px 200px, rgba(239,230,211,0.4), transparent), radial-gradient(1.5px 1.5px at 300px 290px, rgba(239,230,211,0.6), transparent), radial-gradient(1.5px 1.5px at 40px 300px, rgba(239,230,211,0.5), transparent), radial-gradient(1.5px 1.5px at 190px 320px, rgba(239,230,211,0.4), transparent), radial-gradient(1.2px 1.2px at 80px 90px, rgba(239,230,211,0.4), transparent), radial-gradient(1.2px 1.2px at 330px 60px, rgba(239,230,211,0.35), transparent), radial-gradient(1.2px 1.2px at 420px 260px, rgba(239,230,211,0.45), transparent), radial-gradient(1.2px 1.2px at 210px 410px, rgba(239,230,211,0.35), transparent), radial-gradient(1.2px 1.2px at 480px 470px, rgba(239,230,211,0.4), transparent), radial-gradient(1.2px 1.2px at 20px 440px, rgba(239,230,211,0.35), transparent);
  background-size: 340px 340px, 340px 340px, 340px 340px, 340px 340px, 340px 340px, 340px 340px, 340px 340px, 340px 340px, 340px 340px, 340px 340px, 340px 340px, 523px 523px, 523px 523px, 523px 523px, 523px 523px, 523px 523px, 523px 523px;
}
/* 左右の余白に星座（左: オリオン座、右: 北斗七星とカシオペヤ座）。本文の幅が広い画面だけ */
:root[data-theme="night"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 270%22%3E%3Cg stroke=%22%23efe6d3%22 stroke-opacity=%22.28%22 stroke-width=%22.9%22%3E%3Cline x1=%2250%22 y1=%2240%22 x2=%22145%22 y2=%2255%22/%3E%3Cline x1=%2250%22 y1=%2240%22 x2=%2282%22 y2=%22132%22/%3E%3Cline x1=%22145%22 y1=%2255%22 x2=%22118%22 y2=%22120%22/%3E%3Cline x1=%2282%22 y1=%22132%22 x2=%22100%22 y2=%22126%22/%3E%3Cline x1=%22100%22 y1=%22126%22 x2=%22118%22 y2=%22120%22/%3E%3Cline x1=%2282%22 y1=%22132%22 x2=%2268%22 y2=%22215%22/%3E%3Cline x1=%22118%22 y1=%22120%22 x2=%22152%22 y2=%22205%22/%3E%3C/g%3E%3Cg fill=%22%23efe6d3%22 fill-opacity=%22.85%22%3E%3Ccircle cx=%2250%22 cy=%2240%22 r=%223.0%22/%3E%3Ccircle cx=%22145%22 cy=%2255%22 r=%222.3%22/%3E%3Ccircle cx=%2282%22 cy=%22132%22 r=%222.0%22/%3E%3Ccircle cx=%22100%22 cy=%22126%22 r=%222.1%22/%3E%3Ccircle cx=%22118%22 cy=%22120%22 r=%222.0%22/%3E%3Ccircle cx=%2268%22 cy=%22215%22 r=%222.0%22/%3E%3Ccircle cx=%22152%22 cy=%22205%22 r=%222.8%22/%3E%3C/g%3E%3Ctext x=%22100%22 y=%22255%22 fill=%22%238f98ad%22 font-size=%2211%22 text-anchor=%22middle%22 font-family=%22sans-serif%22%3E%E3%82%AA%E3%83%AA%E3%82%AA%E3%83%B3%E3%81%96%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 220 100%22%3E%3Cg stroke=%22%23efe6d3%22 stroke-opacity=%22.28%22 stroke-width=%22.9%22%3E%3Cline x1=%22196%22 y1=%2226%22 x2=%22192%22 y2=%2258%22/%3E%3Cline x1=%22192%22 y1=%2258%22 x2=%22152%22 y2=%2266%22/%3E%3Cline x1=%22152%22 y1=%2266%22 x2=%22146%22 y2=%2240%22/%3E%3Cline x1=%22146%22 y1=%2240%22 x2=%22196%22 y2=%2226%22/%3E%3Cline x1=%22146%22 y1=%2240%22 x2=%22108%22 y2=%2236%22/%3E%3Cline x1=%22108%22 y1=%2236%22 x2=%2276%22 y2=%2230%22/%3E%3Cline x1=%2276%22 y1=%2230%22 x2=%2238%22 y2=%2246%22/%3E%3C/g%3E%3Cg fill=%22%23efe6d3%22 fill-opacity=%22.85%22%3E%3Ccircle cx=%22196%22 cy=%2226%22 r=%222.6%22/%3E%3Ccircle cx=%22192%22 cy=%2258%22 r=%222.3%22/%3E%3Ccircle cx=%22152%22 cy=%2266%22 r=%222.1%22/%3E%3Ccircle cx=%22146%22 cy=%2240%22 r=%221.7%22/%3E%3Ccircle cx=%22108%22 cy=%2236%22 r=%222.5%22/%3E%3Ccircle cx=%2276%22 cy=%2230%22 r=%222.3%22/%3E%3Ccircle cx=%2238%22 cy=%2246%22 r=%222.4%22/%3E%3C/g%3E%3Ctext x=%22112%22 y=%2292%22 fill=%22%238f98ad%22 font-size=%2211%22 text-anchor=%22middle%22 font-family=%22sans-serif%22%3E%E3%81%BB%E3%81%8F%E3%81%A8%E3%81%97%E3%81%A1%E3%81%9B%E3%81%84%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 100%22%3E%3Cg stroke=%22%23efe6d3%22 stroke-opacity=%22.28%22 stroke-width=%22.9%22%3E%3Cline x1=%2215%22 y1=%2240%22 x2=%2255%22 y2=%2272%22/%3E%3Cline x1=%2255%22 y1=%2272%22 x2=%2295%22 y2=%2242%22/%3E%3Cline x1=%2295%22 y1=%2242%22 x2=%22135%22 y2=%2274%22/%3E%3Cline x1=%22135%22 y1=%2274%22 x2=%22180%22 y2=%2230%22/%3E%3C/g%3E%3Cg fill=%22%23efe6d3%22 fill-opacity=%22.85%22%3E%3Ccircle cx=%2215%22 cy=%2240%22 r=%222.2%22/%3E%3Ccircle cx=%2255%22 cy=%2272%22 r=%222.2%22/%3E%3Ccircle cx=%2295%22 cy=%2242%22 r=%222.2%22/%3E%3Ccircle cx=%22135%22 cy=%2274%22 r=%222.2%22/%3E%3Ccircle cx=%22180%22 cy=%2230%22 r=%222.2%22/%3E%3C/g%3E%3Ctext x=%22100%22 y=%2296%22 fill=%22%238f98ad%22 font-size=%2211%22 text-anchor=%22middle%22 font-family=%22sans-serif%22%3E%E3%82%AB%E3%82%B7%E3%82%AA%E3%83%9A%E3%83%A4%E3%81%96%3C/text%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 170px auto, 200px auto, 170px auto;
  background-position: left 4% top 30%, right 3% top 14%, right 6% top 62%;
}
@media (max-width: 1100px) { :root[data-theme="night"] body::before { display: none; } }