/* 公開サイトの見た目。外部のライブラリ・フォントは使わない（docs/spec.md の 11 章）。
   色は :root の変数にまとめ、端末の設定が暗い配色なら下の @media で入れ替える */
:root {
  --bg: #fbfaf9;
  --surface: #ffffff;
  --text: #24221f;
  --strong: #d0451b;  /* 太字。リンク（ピンク・下線）と紛れない朱色（#29） */
  --muted: #6b665f;
  --line: #e6e1da;
  --accent: #c2185b;
  --accent-soft: #fde7ef;
  --link: #b0144f;
  --mark: rgba(255, 200, 60, .45);
  --point: #1e88e5; --point-bg: #eaf3fc;
  --good: #2e7d32; --good-bg: #ebf5ec;
  --bad: #c62828; --bad-bg: #fcebeb;
  --memo: #6d4c41; --memo-bg: #f6f0ec;
  --caution: #ef6c00; --caution-bg: #fff3e5;
  --note-bg: #f4f2ef;
  --dlsite: #1565c0;
  --fanza: #d32f2f;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .04);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171615;
    --surface: #211f1d;
    --text: #ebe7e2;
    --strong: #ffab76;
    --muted: #a39d95;
    --line: #36322e;
    --accent: #f06292;
    --accent-soft: #3a2029;
    --link: #f48fb1;
    --mark: rgba(255, 190, 40, .32);
    --point: #64b5f6; --point-bg: #1b2733;
    --good: #81c784; --good-bg: #1c2a1d;
    --bad: #e57373; --bad-bg: #331d1d;
    --memo: #bcaaa4; --memo-bg: #2a2522;
    --caution: #ffb74d; --caution-bg: #33281a;
    --note-bg: #26231f;
    --dlsite: #64b5f6;
    --fanza: #ef9a9a;
    --shadow: none;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  font-size: 16.5px;
  line-height: 1.9;
  overflow-wrap: anywhere;
}
a { color: var(--link); }
img, video, iframe { max-width: 100%; }
img { height: auto; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* 2 カラム: 幅 960px 以上は右にサイドバー。狭いときはサイドバーの中身を本文の下に出す（目次は出さない） */
.main { min-width: 0; }
.sidebar { margin-top: 56px; }
@media (min-width: 960px) {
  .layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
  .sidebar { margin-top: 0; padding-top: 32px; }
}
/* 固定ページ（サイトについて）はサイドバーなしの 1 カラム。本文の幅は 2 カラムのときと同じにして真ん中に置く */
.layout.layout-single { display: block; }
.layout-single .main { max-width: 748px; margin: 0 auto; }

/* ヘッダー・フッター */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding-top: 12px; padding-bottom: 12px; }
.site-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.15rem; color: var(--text); text-decoration: none; }
.site-logo { display: block; flex: none; }  /* サイトのアイコン（assets/root/favicon.svg、#31） */
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .9rem; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--accent); }
.site-footer { margin-top: 64px; padding: 24px 0 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.site-footer a { color: var(--muted); }
.preview-note { margin: 0; padding: 6px 16px; background: var(--caution-bg); color: var(--caution); text-align: center; font-size: .85rem; }

/* 一覧 */
.list-title { font-size: 1.3rem; margin: 28px 0 16px; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.card { display: flex; gap: 14px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--text); text-decoration: none; line-height: 1.6; }
.card:hover { border-color: var(--accent); }
.card-thumb { flex: 0 0 168px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; background: var(--note-bg); }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.card-title { font-weight: 700; }
.card-meta { color: var(--muted); font-size: .8rem; }
.card-desc { color: var(--muted); font-size: .85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-external .card-desc { -webkit-line-clamp: 1; word-break: break-all; }
@media (max-width: 560px) {
  .card-thumb { flex-basis: 112px; }
  .cards .card-desc { display: none; }
}
/* 一覧のページ送り: ← 前へ 1 … 4 5 [6] 7 8 … 12 次へ →（番号の並びは builder.page_numbers） */
.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; margin: 28px 0; }
.pager-pages { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pager-pages a, .pager-current, .pager-gap { display: block; min-width: 34px; height: 34px; padding: 0 4px; border-radius: 6px; line-height: 34px; text-align: center; font-size: .92rem; }
.pager-pages a { background: var(--surface); border: 1px solid var(--line); line-height: 32px; color: var(--text); text-decoration: none; }
.pager-pages a:hover { border-color: var(--accent); color: var(--accent); }
.pager-current { background: var(--accent); color: #fff; font-weight: 700; }
.pager-gap { min-width: 16px; padding: 0; color: var(--muted); }
@media (max-width: 560px) {
  /* スマホは番号を 1 行目、前へ・次へを 2 行目に */
  .pager-pages { order: -1; flex-basis: 100%; justify-content: center; gap: 3px; }
  .pager-pages a, .pager-current { min-width: 32px; }
}
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud a { padding: 2px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; font-size: .9rem; }
.tag-cloud small { color: var(--muted); }

/* 記事 */
.article-header h1 { font-size: 1.55rem; line-height: 1.5; margin: 32px 0 8px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 16px; color: var(--muted); font-size: .85rem; }
/* 広告の表示（ステマ規制。作品へのリンクがある記事だけ、#27） */
.ad-notice { display: inline-block; margin: 0 0 16px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: .8rem; }
.hero { margin: 0 0 24px; }
.hero img { display: block; width: 100%; border-radius: var(--radius); }
.article-body h2 { font-size: 1.3rem; line-height: 1.5; margin: 48px 0 16px; padding: 10px 14px; background: var(--accent-soft); border-left: 5px solid var(--accent); border-radius: 4px; }
/* h3: 下の線の左側（3 文字ぶん）をピンクに。h4: 左にピンクの短い縦線と下に細い点線（#29） */
.article-body h3 { position: relative; font-size: 1.22rem; line-height: 1.5; margin: 40px 0 14px; padding-bottom: 7px; border-bottom: 3px solid var(--line); }
.article-body h3::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 3em; height: 3px; background: var(--accent); }
.article-body h4 { font-size: 1.12rem; line-height: 1.5; margin: 32px 0 10px; padding: 0 0 5px 12px; border-bottom: 1px dashed var(--line); position: relative; }
.article-body h4::before { content: ""; position: absolute; left: 0; top: .2em; bottom: calc(5px + .2em); width: 4px; border-radius: 2px; background: var(--accent); }
.article-body p { margin: 0 0 1.2em; }
.article-body ul, .article-body ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.article-body li { margin: .2em 0; }
.article-body li > ul, .article-body li > ol { margin-bottom: 0; }
.article-body strong, .article-body b { font-weight: 700; color: var(--strong); }  /* 暗い配色では太さだけだと見分けにくいので、色も変える（#29） */
.article-body a strong, .article-body a b { color: inherit; }  /* リンク・ボタンの中はリンクの色のまま */
.article-body mark { background: linear-gradient(transparent 55%, var(--mark) 55%); color: inherit; padding: 0 1px; }
.article-body blockquote { margin: 0 0 1.4em; padding: 12px 16px; background: var(--note-bg); border-left: 4px solid var(--line); border-radius: 4px; color: var(--muted); font-size: .92rem; }
.article-body blockquote p { margin: 0 0 .4em; }
.article-body hr { border: 0; border-top: 1px dashed var(--line); margin: 32px 0; }
.article-tags { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 32px; font-size: .9rem; }
.related h2 { font-size: 1.15rem; margin-top: 48px; }
.article-body .card { margin: 0 0 1.4em; }  /* 本文の中のリンクカード（::post・::link）。下のボタンやカードとくっつかないように */

/* サイドバー */
.side-box { margin: 0 0 24px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); font-size: .9rem; line-height: 1.7; }
.side-box > :last-child { margin-bottom: 0; }
.side-box p { margin: 0 0 8px; }
.side-title { margin: 0 0 10px; padding-left: 10px; border-left: 4px solid var(--accent); font-size: .95rem; line-height: 1.4; }
.side-more { text-align: right; font-size: .85rem; }
.side-list { list-style: none; margin: 0; padding: 0; }
.side-list li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.side-list li:last-child { border-bottom: 0; }
.side-list a { color: var(--text); text-decoration: none; }
.side-list a:hover { color: var(--accent); }
.side-list small { color: var(--muted); }
.tag-cloud-s { gap: 6px; }
.tag-cloud-s a { padding: 1px 8px; font-size: .8rem; }
.side-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.side-posts a { display: flex; gap: 10px; color: var(--text); text-decoration: none; }
.side-posts a:hover .side-post-title { color: var(--accent); }
.side-thumb { flex: 0 0 88px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: var(--note-bg); }
.side-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-post-body { display: flex; flex-direction: column; min-width: 0; }
.side-post-title { font-size: .85rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.side-post-body time { color: var(--muted); font-size: .75rem; }
/* 目次（記事のページだけ）。スクロールしても画面に残る（下の囲みはこの下をくぐる） */
.toc { position: sticky; top: 16px; z-index: 1; max-height: calc(100vh - 32px); overflow-y: auto; }
.toc ol { margin: 0; padding-left: 1.4em; }
.toc li { margin: .25em 0; line-height: 1.5; }
.toc a { color: var(--text); text-decoration: none; }
.toc a:hover, .toc a.is-current { color: var(--accent); }
.toc a.is-current { font-weight: 700; }
@media (max-width: 959px) { .toc { display: none; } }
.article-body h2, .article-body h3, .article-body h4 { scroll-margin-top: 16px; }

/* 画像 */
figure { margin: 0 0 1.4em; }
.media { text-align: center; }
.media img, .media video { border-radius: 6px; }
.media.size-s img { max-width: min(320px, 100%); }
.media.size-m img { max-width: min(480px, 100%); }
figcaption { margin-top: 4px; color: var(--muted); font-size: .85rem; text-align: center; }
.gallery ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.gallery li { margin: 0; }
.gallery img { display: block; width: 100%; border-radius: 6px; }

/* 表 */
.table-wrap { overflow-x: auto; margin: 0 0 1.4em; }
.article-body table { border-collapse: collapse; width: 100%; font-size: .92rem; line-height: 1.6; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 8px 10px; vertical-align: top; text-align: left; }
.article-body th { background: var(--note-bg); }

/* 囲み */
.box { margin: 0 0 1.4em; padding: 14px 16px; border-radius: var(--radius); background: var(--note-bg); }
.box > :last-child { margin-bottom: 0; }
.box-label { margin: 0 0 6px !important; font-weight: 700; font-size: .9rem; }
.box-point { background: var(--point-bg); border-left: 4px solid var(--point); } .box-point .box-label { color: var(--point); }
.box-memo { background: var(--memo-bg); border-left: 4px solid var(--memo); } .box-memo .box-label { color: var(--memo); }
.box-caution { background: var(--caution-bg); border-left: 4px solid var(--caution); } .box-caution .box-label { color: var(--caution); }
/* 印の囲み（info・announce・good・bad）: 左に塗りつぶした円と白の印、背景はその色の薄い色、枠もその色（#29）。
   色は --box-c / --box-bg、印は ::before の content で囲みごとに変える */
.box-info { --box-c: var(--caution); --box-bg: var(--caution-bg); }
.box-announce { --box-c: var(--point); --box-bg: var(--point-bg); }
.box-good { --box-c: var(--good); --box-bg: var(--good-bg); }
.box-bad { --box-c: var(--bad); --box-bg: var(--bad-bg); }
.box-info, .box-announce, .box-good, .box-bad { position: relative; padding-left: 52px; background: var(--box-bg); border: 1px solid var(--box-c); }
.box-info::before, .box-announce::before, .box-good::before, .box-bad::before, .box-caution .box-label::before {
  position: absolute; left: 14px; top: 16px; width: 26px; height: 26px; border-radius: 50%;  /* 1 行目の文字の高さにそろえる */
  background: var(--box-c); color: #fff; font: 700 15px/26px sans-serif; text-align: center;
}
/* 中身が箇条書きから始まるときは 1 行目の上のすき間を 0 にして、文章から始まるときと同じ高さに（円とそろう） */
:is(.box-info, .box-announce, .box-good, .box-bad) > :is(ul, ol):first-child > li:first-child { margin-top: 0; }
.box-info::before { content: "!"; }
.box-announce::before { content: "i"; font: 700 17px/26px Georgia, "Times New Roman", serif; }
.box-good::before { content: "\2714\FE0E"; }  /* ✔。FE0E は絵文字でなく文字の形で出す指定 */
.box-bad::before { content: "\2716\FE0E"; }  /* ✖ */
/* 注意（見出し付き）は見出しの左に同じ円の「!」 */
.box-caution { --box-c: var(--caution); }
.box-caution .box-label::before { content: "!"; position: static; display: inline-block; width: 22px; height: 22px; margin-right: 8px; font-size: 13px; line-height: 22px; vertical-align: 1px; }
@media (prefers-color-scheme: dark) {  /* 暗い配色では円の色が明るいので、印は黒 */
  .box-info::before, .box-announce::before, .box-good::before, .box-bad::before, .box-caution .box-label::before { color: #111; }
}
.box-note { border: 1px dashed var(--line); }

/* 手順 */
.steps { counter-reset: step; margin: 0 0 1.4em; }
.step { position: relative; padding: 0 0 8px 44px; counter-increment: step; }
.step::before { content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: .9rem; line-height: 30px; text-align: center; }
.step:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 34px; bottom: 0; border-left: 2px solid var(--line); }
.step-title { margin: 0 0 4px !important; font-weight: 700; line-height: 30px; }

/* 開閉 */
.accordion { margin: 0 0 1em; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.accordion summary { cursor: pointer; padding: 10px 14px; font-weight: 700; }
.accordion[open] summary { border-bottom: 1px solid var(--line); }
.accordion-body { padding: 14px 16px 2px; }

/* 横並び */
.columns { display: flex; gap: 16px; margin: 0 0 1.4em; }
.column { flex: 1 1 0; min-width: 0; }
.column > :last-child { margin-bottom: 0; }
@media (max-width: 560px) { .columns { flex-direction: column; } }

/* 見出し付きの囲み */
.tab { margin: 0 0 1.4em; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.tab-title { margin: 0 0 10px !important; font-weight: 700; color: var(--accent); }

/* ボタン・作品カード */
.btn { display: inline-block; padding: 10px 20px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: inherit; font-weight: 700; line-height: 1.4; text-decoration: none; cursor: pointer; }
.btn:hover { filter: brightness(1.08); }
.btn-dlsite { background: var(--dlsite); }
.btn-fanza { background: var(--fanza); }
.btn-sub { background: var(--muted); }
@media (prefers-color-scheme: dark) { .btn-dlsite, .btn-fanza { color: #111; } }
.buy { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 1.4em; }
.game { display: flex; gap: 16px; align-items: center; margin: 0 0 1.4em; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.game-cover { flex: 0 0 46%; }
.game-cover img { display: block; width: 100%; border-radius: 6px; }
.game-body { flex: 1; min-width: 0; }
.game-title { margin: 0 0 10px !important; font-weight: 700; line-height: 1.5; }
.game .buy { justify-content: flex-start; margin: 0; }
.game-s .game-cover { flex-basis: 30%; }
@media (max-width: 560px) { .game { flex-direction: column; align-items: stretch; } .game .buy { justify-content: center; } }

/* 埋め込み */
.embed-chobit { position: relative; margin: 0 0 1.4em; aspect-ratio: 560 / 347; }
.embed-chobit iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 6px; }

/* 年齢の確認（初回だけ。site.js） */
#age-gate { display: none; }
.age-gate body { overflow: hidden; }
.age-gate .site { filter: blur(18px); pointer-events: none; user-select: none; }
.age-gate #age-gate { display: flex; position: fixed; inset: 0; z-index: 10; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .55); }
.age-gate-box { max-width: 420px; padding: 24px; border-radius: var(--radius); background: var(--surface); text-align: center; line-height: 1.8; }
.age-gate-title { margin: 0 0 8px; font-size: 1.2rem; font-weight: 700; }
.age-gate-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px 0 0; }