:root {
  --bg: #15110f;
  --surface: #1e1916;
  --line: #3a302a;
  --text: #e9e1d7;
  --muted: #a39586;
  --accent: #c9876b;
  --accent-ink: #1a1210;
  --font-size: 18px;
  --mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --gothic: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
}
:root[data-theme="sepia"] {
  --bg: #f3ead8; --surface: #ebe0ca; --line: #d6c7a8;
  --text: #3b2f22; --muted: #7a6a55; --accent: #9a4f32; --accent-ink: #fff8ee;
}
:root[data-theme="light"] {
  --bg: #fbfaf8; --surface: #f2efea; --line: #e0dad1;
  --text: #24201c; --muted: #6f665c; --accent: #a2482c; --accent-ink: #fff;
}
:root[data-size="s"] { --font-size: 16px; }
:root[data-size="l"] { --font-size: 21px; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--gothic);
  line-height: 1.8;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; }
main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 0 16px 48px; }

.site-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.logo { font-family: var(--mincho); font-size: 20px; letter-spacing: .12em; text-decoration: none; }
.badge {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 3px; padding: 0 5px;
}
.site-footer {
  border-top: 1px solid var(--line); color: var(--muted);
  font-size: 12px; text-align: center; padding: 20px 16px;
}
.site-footer p { margin: 4px 0; }

.hero { text-align: center; padding: 56px 0 36px; }
.hero h1 { font-family: var(--mincho); font-weight: 500; font-size: 34px; letter-spacing: .2em; margin: 0; }
.hero p { color: var(--muted); font-family: var(--mincho); letter-spacing: .15em; margin: 8px 0 0; }

.head-nav { margin-left: auto; display: flex; gap: 16px; font-size: 13px; }
.head-nav a { color: var(--muted); text-decoration: none; }
.head-nav a:hover { color: var(--accent); }

.section-title, .news h2, .continue h2, .related h2 {
  font-family: var(--mincho); font-weight: 600; font-size: 18px; margin: 32px 0 12px; letter-spacing: .05em;
}
.news ul, .continue ul, .related ul { list-style: none; margin: 0; padding: 0; }
.news li, .continue li { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.news time { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.news a, .continue a { text-decoration: none; }
.news a:hover, .continue a:hover { color: var(--accent); }
.continue li a::before { content: "▶ "; color: var(--accent); }

.works { display: grid; gap: 16px; }
.card {
  position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 20px 22px; transition: border-color .2s;
}
.card:hover { border-color: var(--accent); }
.card h2 { font-family: var(--mincho); font-weight: 600; font-size: 22px; margin: 0 0 4px; letter-spacing: .05em; }
.card h2 a { text-decoration: none; }
.card h2 a::after { content: ""; position: absolute; inset: 0; }  /* カード全体をクリック可能に */
.card .tag { position: relative; z-index: 1; }
.catch { font-family: var(--mincho); color: var(--accent); margin: 0 0 8px; font-size: 15px; }
.catch:empty { display: none; }
.summary { color: var(--muted); margin: 0 0 12px; font-size: 15px; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 12px; }
.tag { border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; color: var(--muted); text-decoration: none; }
a.tag:hover { color: var(--accent); border-color: var(--accent); }
.tag small { margin-left: 6px; opacity: .7; }
.tag-cloud { gap: 8px; font-size: 14px; }
.stats { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.stats .date { margin-left: auto; }

.crumbs { font-size: 13px; color: var(--muted); padding: 16px 0; }
.crumbs a { color: var(--muted); }

.work-head { padding: 12px 0 24px; border-bottom: 1px solid var(--line); }
.work-head h1 { font-family: var(--mincho); font-weight: 600; font-size: 30px; margin: 0 0 12px; letter-spacing: .06em; }
.work-head .summary { margin: 16px 0 20px; color: var(--text); font-size: 16px; }
.btn {
  display: inline-block; cursor: pointer; font: inherit; font-size: 15px;
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent);
  border-radius: 6px; padding: 10px 22px; text-decoration: none;
}
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }

.toc h2 { font-family: var(--mincho); font-size: 18px; font-weight: 600; margin: 24px 0 8px; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li a {
  display: flex; gap: 14px; padding: 12px 4px; text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.toc li a:hover { color: var(--accent); }
.toc .no { color: var(--muted); font-variant-numeric: tabular-nums; }
.toc .t { flex: 1; }
.toc .m { color: var(--muted); font-size: 12px; }
.toc a.read .t { color: var(--muted); }
.toc a.read .t::after { content: " 既読"; font-size: 11px; color: var(--accent); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

.ep-meta { color: var(--muted); font-size: .7em; margin: 6px 0 0; }
.after { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 48px 0 8px; }
.btn.big { padding: 14px 28px; font-size: 16px; text-align: center; }
.end-note { color: var(--muted); font-family: var(--mincho); margin: 0; }
.share { font-size: 13px; color: var(--muted); }

.related li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.related a { font-family: var(--mincho); font-weight: 600; text-decoration: none; margin-right: 10px; }
.related a:hover { color: var(--accent); }
.related span { color: var(--muted); font-size: 13px; }

.ad {
  margin: 28px auto; width: calc(100% - 32px); max-width: 728px; padding: 12px 16px 16px; text-align: center;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.ad-label { display: block; font-size: 11px; color: var(--muted); letter-spacing: .1em; margin-bottom: 8px; }
.ad.placeholder { border-style: dashed; color: var(--muted); font-size: 14px; padding: 24px 16px; }
.ad.placeholder small { display: block; font-size: 12px; margin-top: 4px; }
.ad img, .ad iframe { max-width: 100%; }

.picks { margin: 32px auto; width: calc(100% - 32px); max-width: 728px; }
.picks h2 { font-size: 15px; margin: 0 0 12px; display: flex; align-items: baseline; gap: 10px; }
.picks h2 .ad-label { display: inline; margin: 0; }
.picks ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.picks a { display: block; text-decoration: none; color: inherit; }
.picks img { width: 100%; height: auto; aspect-ratio: 147 / 200; object-fit: cover; border-radius: 4px; background: var(--line); }
.picks .t { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; line-height: 1.5; margin-top: 6px; }
.picks a:hover .t { color: var(--accent); }
.picks li.more { display: none; }
/* 2本だけのときは、4列のときと同じ大きさで左に寄せる */
.picks ul[data-show="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: calc(50% - 6px); }
@media (max-width: 560px) { .picks ul[data-show="2"] { max-width: none; } }
.picks .credit { text-align: right; font-size: 11px; margin: 10px 0 0; }
.picks .credit a { color: var(--muted); }
@media (max-width: 560px) { .picks ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* トップの細い枠: 常に横1列。スマホでは表紙だけ */
.picks.strip { margin: 20px auto; max-width: 480px; }
.picks.strip h2 { font-size: 13px; margin-bottom: 8px; color: var(--muted); }
.picks.strip ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.picks.strip .t { font-size: 12px; }
.picks.strip .credit { display: none; }
@media (max-width: 560px) { .picks.strip ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } .picks.strip .t { display: none; } }

/* reader */
.reader-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  font-size: 13px; padding-bottom: 12px;
}
.reader-tools button {
  font: inherit; color: var(--muted); background: transparent;
  border: 1px solid var(--line); border-radius: 4px; padding: 3px 10px; cursor: pointer;
}
.reader-tools button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.reader-tools .sep { width: 8px; }

.reader { font-family: var(--mincho); font-size: var(--font-size); line-height: 2; }
.ep-head { margin: 24px 0 32px; }
.ep-head .work-title { color: var(--muted); font-size: .8em; margin: 0 0 4px; }
.ep-head h1 { font-weight: 600; font-size: 1.4em; margin: 0; letter-spacing: .05em; }
/* 横書き: Web小説で読みやすい形。字下げせず、段落・会話のあいだを1行あける */
.text p { margin: 0 0 1em; text-indent: 0; }
.text p.gap { height: 1em; margin: 0; }
/* 縦書き: 本の形（字下げあり、段落のあいだは詰める）のまま */
:root[data-dir="v"] .text p { margin: 0; text-indent: 1em; }
:root[data-dir="v"] .text p.dlg { text-indent: 0; }
.text rt { font-size: .5em; }

:root[data-dir="v"] .reader {
  writing-mode: vertical-rl;
  width: 100%;
  height: min(78vh, 720px);
  overflow-x: auto;
  overflow-y: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}
:root[data-dir="v"] .ep-head { margin: 0 0 0 2em; }
:root[data-dir="v"] .text p.gap { height: auto; width: 1em; }

.pager {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px;
  margin-top: 40px; font-size: 14px;
}
.pager a { padding: 10px 0; text-decoration: none; color: var(--accent); }
.pager a[rel="next"] { text-align: right; }
.pager a:nth-child(2) { color: var(--muted); }

/* age gate */
.age-page main { display: grid; place-items: center; }
.age { text-align: center; max-width: 640px; padding: 64px 0; }
.age h1 { font-family: var(--mincho); font-weight: 500; letter-spacing: .2em; }
.age-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 28px 0 16px; }
.note { color: var(--muted); font-size: 12px; }

@media (max-width: 480px) {
  .hero { padding: 40px 0 28px; }
  .hero h1 { font-size: 28px; }
  .card a { padding: 16px; }
  .work-head h1 { font-size: 24px; }
}

/* footer links / documents */
.foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-bottom: 10px; font-size: 13px; }
.foot-nav a { color: var(--muted); }
.doc { padding-bottom: 24px; }
.doc h1 { font-family: var(--mincho); font-weight: 600; font-size: 26px; margin: 8px 0 20px; letter-spacing: .05em; }
.doc h2 { font-size: 16px; margin: 28px 0 8px; padding-left: 10px; border-left: 3px solid var(--accent); }
.doc p, .doc li { font-size: 15px; }
.doc ul { padding-left: 1.4em; }
.doc .date { color: var(--muted); font-size: 13px; margin-top: 32px; }
.info { display: grid; grid-template-columns: 6em 1fr; gap: 8px 12px; font-size: 15px; }
.info dt { color: var(--muted); }
.info dd { margin: 0; word-break: break-all; }
.mail { color: var(--accent); user-select: all; }
.mail-note { color: var(--muted); font-size: 12px; margin-left: 4px; }

/* covers */
.card.has-cover { display: grid; grid-template-columns: 104px 1fr; column-gap: 20px; align-items: start; }
.card.has-cover .cover { grid-row: 1 / span 5; width: 104px; height: auto; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.45); }
.card.has-cover > :not(.cover) { grid-column: 2; }
.work-head.has-cover { display: grid; grid-template-columns: 180px 1fr; column-gap: 28px; }
.work-head.has-cover .cover { grid-row: 1 / span 6; width: 180px; height: auto; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.work-head.has-cover > :not(.cover) { grid-column: 2; }
@media (max-width: 560px) {
  .card.has-cover { grid-template-columns: 80px 1fr; column-gap: 14px; }
  .card.has-cover .cover { width: 80px; grid-row: 1 / span 3; }
  .card.has-cover .summary, .card.has-cover .meta, .card.has-cover .stats { grid-column: 1 / -1; }
  .work-head.has-cover { display: block; }
  .work-head.has-cover .cover { display: block; width: 60%; max-width: 240px; margin: 0 auto 20px; }
}

/* hidden属性を .btn などの display 指定より優先する */
[hidden] { display: none !important; }

/* ---- 日本語の改行位置 ---- */
/* 本文: 行頭に「。」「っ」などが来ないよう禁則を厳しめにし、行末の句読点はぶら下げる */
.text { line-break: strict; text-wrap: pretty; hanging-punctuation: allow-end; }
/* 会話文は小説の慣例どおり字下げしない */
.text p.dlg { text-indent: 0; }

/* work page image video (looping, muted, like a GIF) */
.work-video { position: relative; margin: 24px auto 8px; max-width: 200px; text-align: center; }
.work-video .play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85);
  background: rgba(0,0,0,.45); color: #fff; font-size: 22px; line-height: 1; padding-left: 4px;
  cursor: pointer; backdrop-filter: blur(2px);
}
.work-video .play:hover { background: rgba(0,0,0,.6); }
.work-video.playing .play { display: none; }
.work-video video { cursor: pointer; }
.work-video video { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.5); background: #000; }
.work-video figcaption { color: var(--muted); font-size: 12px; margin-top: 6px; }

/* 年齢確認ページ: 言葉の途中で改行しないよう、文のまとまりごとに折り返す */
.age p span { display: inline-block; }

/* 年齢確認（ページの上に重ねて表示） */
/* 年齢確認: 本文は消さずに（検索エンジンに読める形のまま）、上から不透明な幕で覆う。
   app.js が #age-overlay を出すまでの一瞬も中身が見えないよう、::after で先に覆っておく */
html.age-gate body::after { content: ""; position: fixed; inset: 0; z-index: 99; background: var(--bg); }
html.age-gate body { overflow: hidden; }
#age-overlay {
  position: fixed; inset: 0; z-index: 100; overflow-y: auto;
  display: grid; place-items: center; padding: 16px;
  background: var(--bg);
}

.follow-x { font-size: 13px; color: var(--accent); }

/* リンクについて */
.doc .banner { margin: 16px 0 24px; }
.doc .banner img { display: block; max-width: 100%; height: auto; }
.doc .banner figcaption { font-size: 12px; color: var(--muted); margin: 6px 0; }
.doc .code { font-size: 12px; line-height: 1.6; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px;
  white-space: pre-wrap; word-break: break-all; user-select: all; margin: 0; }
.doc .friends li { margin: 6px 0; }

/* 本文の途中の広告（横書きのときだけ） */
.text .picks.inline { width: 100%; margin: 2em auto; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.text .picks.inline h2 { margin-bottom: 8px; }
.text .picks.inline ul[data-show="2"] { max-width: 320px; }
:root[data-dir="v"] .text .picks.inline { display: none; }

/* パソコンの広い画面だけ、右側に付いてくる広告 */
.picks.side { display: none; }
@media (min-width: 1280px) {
  .picks.side { display: block; position: fixed; top: 96px; right: max(24px, calc((100vw - 760px) / 2 - 220px)); width: 160px; margin: 0; }
  .picks.side ul, .picks.side ul[data-show="2"] { grid-template-columns: 1fr; max-width: none; gap: 14px; }
  .picks.side .credit { display: none; }
}

/* 自動で横に流れる広告 */
.slider { margin: 32px auto; width: calc(100% - 32px); max-width: 728px; }
.slider h2 { font-size: 15px; margin: 0 0 10px; display: flex; align-items: baseline; gap: 10px; }
.slider h2 .ad-label { display: inline; margin: 0; }
.slider .track { overflow: hidden; }
.slider .credit { text-align: right; font-size: 11px; margin: 8px 0 0; }
.slider .credit a { color: var(--muted); }
.slider ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; will-change: transform; }
.slider li { flex: 0 0 calc((100% - 36px) / 4); }
.slider img { display: block; width: 100%; height: auto; aspect-ratio: 147 / 200; object-fit: cover; border-radius: 4px; background: var(--line); }
.slider.strip { margin: 20px auto; max-width: 480px; }
.slider.strip h2 { font-size: 13px; margin-bottom: 8px; color: var(--muted); }
.text .slider.inline { width: 100%; margin: 2em auto; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
:root[data-dir="v"] .text .slider.inline { display: none; }
@media (max-width: 560px) { .slider li { flex-basis: calc((100% - 24px) / 3); } }

/* DMM公式バナー（300×250・ランダムに1つ） */
.banner-ad { margin: 28px auto; width: 300px; max-width: calc(100% - 32px); text-align: center; }
.banner-ad .ad-label { display: block; text-align: left; margin-bottom: 6px; }
.banner-ad .slot { min-height: 250px; }

/* 全画面広告（サイト内で2話に1回。assets/app.js） */
html.ad-open body { overflow: hidden; }
#ad-inter {
  position: fixed; inset: 0; z-index: 90; overflow-y: auto;
  display: grid; place-items: center; padding: 16px;
  background: rgba(0, 0, 0, .78);
}
#ad-inter .box {
  width: 100%; max-width: 420px; background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px; padding: 16px 16px 12px; text-align: center;
}
#ad-inter .head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
#ad-inter .head .ad-label { display: inline; margin: 0; }
#ad-inter .lead { font-size: 14px; color: var(--muted); flex: 1; text-align: left; }
#ad-inter .x {
  width: 44px; height: 44px; flex: none; border: 1px solid var(--line); border-radius: 50%;
  background: var(--bg); color: var(--text); font-size: 24px; line-height: 1; cursor: pointer;
}
#ad-inter ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#ad-inter li { min-width: 0; }
#ad-inter li a { display: block; text-decoration: none; color: inherit; }
#ad-inter img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 147 / 200; object-fit: cover; border-radius: 4px; background: var(--line); }
#ad-inter .t { display: block; font-size: 12px; line-height: 1.5; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ad-inter .btn { width: 100%; cursor: pointer; }
#ad-inter .credit { margin: 10px 0 0; font-size: 11px; }

/* タグページの紹介文 */
.tag-intro { width: calc(100% - 32px); max-width: 728px; margin: 0 auto 24px; color: var(--muted); font-size: 14px; line-height: 1.9; }
.tag-intro ul { margin: 8px 0 0; padding-left: 1.2em; }
.tag-intro a { color: var(--text); }

/* 人気ランキング（トップ）: スマホでは新着の下、広い画面では左側に付いてくる */
.ranking { margin: 32px 0; }
.ranking h2, .next-reads h2 { font-family: var(--mincho); font-weight: 600; font-size: 18px; letter-spacing: .08em; margin: 0 0 8px; }
.ranking ol, .next-reads ul { list-style: none; margin: 0; padding: 0; }
.ranking li { border-bottom: 1px solid var(--line); }
.ranking a { display: grid; grid-template-columns: 1.6em 44px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px 0; text-decoration: none; }
.ranking .rk { grid-row: 1 / 3; font-family: var(--mincho); font-size: 20px; color: var(--accent); text-align: center; }
.ranking img, .next-reads img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px; background: var(--line); }
.ranking img { grid-row: 1 / 3; }
.ranking .tt, .next-reads .tt { font-family: var(--mincho); font-weight: 600; font-size: 15px; line-height: 1.5; }
.ranking .cc, .next-reads .cc { color: var(--muted); font-size: 12px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking a:hover .tt, .next-reads a:hover .tt { color: var(--accent); }
@media (min-width: 1280px) {
  .ranking { position: fixed; top: 96px; left: max(24px, calc((100vw - 760px) / 2 - 240px)); width: 190px; margin: 0;
    max-height: calc(100vh - 120px); overflow-y: auto; }
  .ranking h2 { font-size: 15px; }
  .ranking a { grid-template-columns: 1.3em 40px 1fr; column-gap: 8px; }
  .ranking .tt { font-size: 13px; }
  .ranking .cc { display: none; }
}

/* 読み終えたところの「次に読むなら」（表紙つき・3作品） */
.next-reads { width: 100%; margin: 8px 0 0; }
.next-reads h2 { text-align: center; }
.next-reads ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.next-reads a { display: block; text-decoration: none; }
.next-reads .tt { display: block; margin-top: 6px; font-size: 14px; }
.next-reads .cc { display: block; }

/* 読み終えた直後の広告（タイトル・作者・価格つき・2つ） */
.after .end-picks { width: 100%; max-width: 480px; margin: 8px auto 0; }
.end-picks h2 { justify-content: center; font-family: var(--mincho); font-weight: 600; font-size: 16px; }
.end-picks ul[data-show="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: 14px; }
.end-picks .tt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.5; margin-top: 6px; }
.end-picks .au, .end-picks .pr { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; }
.end-picks .pr { color: var(--accent); }
.end-picks .credit { text-align: right; }

/* アルファポリスのランキングバナー（作品ページの目次の下） */
.ap-banner { text-align: center; margin: 24px 0 0; }
.ap-banner img { display: inline-block; vertical-align: middle; }