/* 「まえがき」の組版（site/assets/generate_maegaki_sample.py の見本と同じ規則）
   A5（148×210mm）・縦組み・本文11pt・質問8.5ptの青・漢数字のノンブル。
   画面でも印刷でも、同じこの規則で組む。 */
.mg{
  --paper:#F9F5EC; --ink:#2B2723; --ink-soft:#6E645A; --ao:#2C4A6E;
  --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --gothic:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
.mg *{box-sizing:border-box;margin:0;padding:0}
.mg .sheet{width:148mm;height:210mm;position:relative;background:var(--paper);color:var(--ink);
  font-family:var(--mincho);overflow:hidden;page-break-after:always;break-after:page}
.mg .tag{position:absolute;top:8mm;right:8mm;font-family:var(--gothic);font-size:7.5pt;
  letter-spacing:.3em;color:var(--paper);background:var(--ink);padding:1mm 3.5mm 1mm 4mm}
.mg .folio{position:absolute;bottom:9mm;left:0;right:0;text-align:center;
  font-size:8pt;letter-spacing:.3em;color:var(--ink-soft)}

/* 表紙＝ちらし玉（D25） */
.mg .cover{background-color:var(--paper);background-image:
  radial-gradient(circle at 50% 47%, #F9F5EC 0%, #F9F5EC 27%, rgba(249,245,236,0) 55%),
  radial-gradient(circle 12px at 29px 40px, rgba(44,74,110,.55) 96%, transparent),
  radial-gradient(circle 5.3px at 117px 112px, rgba(178,146,84,.75) 96%, transparent),
  radial-gradient(circle 8px at 189px 29px, rgba(44,74,110,.30) 96%, transparent),
  radial-gradient(circle 4.7px at 59px 176px, rgba(44,74,110,.45) 96%, transparent),
  radial-gradient(circle 9.3px at 157px 207px, rgba(44,74,110,.22) 96%, transparent),
  radial-gradient(circle 5.3px at 213px 144px, rgba(178,146,84,.6) 96%, transparent),
  radial-gradient(circle 6.7px at 88px 234px, rgba(44,74,110,.38) 96%, transparent);
  background-size:100% 100%,245px 261px,245px 261px,245px 261px,245px 261px,245px 261px,245px 261px,245px 261px}
.mg .tblock{position:absolute;left:0;right:0;top:76mm;display:flex;flex-direction:column;align-items:center;gap:8mm}
.mg .whose{font-size:10.5pt;letter-spacing:.44em;text-indent:.44em;color:var(--ink-soft)}
.mg .title{font-size:39pt;font-weight:600;letter-spacing:.18em;text-indent:.18em;line-height:1}
.mg .cover .brand{position:absolute;bottom:14mm;left:0;right:0;text-align:center;font-family:var(--gothic);
  font-size:9.5pt;font-weight:600;letter-spacing:.5em;text-indent:.5em;color:var(--ao)}

/* 献辞 */
.mg .fore{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12mm;text-align:center}
.mg .fore .lead{writing-mode:vertical-rl;font-size:12.5pt;line-height:2.6;letter-spacing:.18em;height:118mm;text-align:start}
.mg .fore .meta{font-family:var(--gothic);font-size:8.5pt;letter-spacing:.24em;color:var(--ink-soft)}

/* 目次 */
.mg .toc{padding:22mm 18mm}
.mg .toc .label{font-family:var(--gothic);font-size:9pt;letter-spacing:.5em;color:var(--ink-soft);text-align:center;margin-bottom:12mm}
.mg .toc .cols{writing-mode:vertical-rl;height:130mm;font-size:11pt;line-height:2.4;letter-spacing:.2em;padding-right:8mm}
.mg .toc .cols > span{display:block}
.mg .toc .num{font-size:8.5pt;color:var(--ao);letter-spacing:.3em}

/* 本文 */
.mg .chapter{padding:20mm 16mm 24mm}
.mg .body-v{writing-mode:vertical-rl;height:158mm;margin:0 auto;font-size:11pt;line-height:2.35;letter-spacing:.12em;text-align:start}
.mg .body-v .chap{font-size:14.5pt;font-weight:600;letter-spacing:.3em;margin-left:9mm}
.mg .body-v .chap .no{display:block;font-size:8.5pt;color:var(--ao);letter-spacing:.35em;margin-bottom:3mm}
.mg .body-v .q{display:block;font-size:8.5pt;color:var(--ao);letter-spacing:.2em;line-height:2.1;margin-left:5mm;padding-top:1mm}
.mg .with-photo .body-v{height:104mm}
.mg .photo{position:absolute;left:50%;bottom:20mm;width:56mm;transform:translateX(-50%) rotate(-1deg);
  box-shadow:0 3mm 8mm rgba(43,39,35,.18);background:#fff;padding:2.5mm 2.5mm 7mm}
.mg .photo.alt{transform:translateX(-50%) rotate(.8deg)}
.mg .photo .img{aspect-ratio:4/3;position:relative;overflow:hidden}
.mg .photo .img img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.5) saturate(.72) contrast(.93) brightness(1.03)}
.mg .photo .img::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 7mm rgba(43,32,18,.4)}
.mg .photo .cap{font-family:var(--gothic);font-size:6.8pt;letter-spacing:.14em;color:var(--ink-soft);text-align:center;margin-top:2.2mm}

/* 手紙・結び・奥付 */
.mg .letter-p{padding:22mm 18mm}
.mg .letter-p .body-v{height:150mm;font-size:11.5pt;line-height:2.6;letter-spacing:.16em}
.mg .letter-p .to{font-size:14pt;letter-spacing:.3em;margin-left:8mm}
.mg .letter-p .close{color:var(--ao)}
.mg .musubi{display:flex;align-items:center;justify-content:center}
.mg .musubi .v{writing-mode:vertical-rl;font-size:15pt;line-height:3.2;letter-spacing:.22em;height:126mm;text-align:start}
.mg .musubi .v .honpen{color:var(--ao)}
.mg .colophon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9mm;text-align:center}
.mg .colophon .brand{font-size:13pt;letter-spacing:.5em;text-indent:.5em}
.mg .colophon .note,.mg .colophon .seal{font-family:var(--gothic);font-size:7.5pt;line-height:2.2;letter-spacing:.12em;color:var(--ink-soft);max-width:96mm}
.mg .colophon .hash{font-family:ui-monospace,monospace;font-size:6.5pt;letter-spacing:.05em;color:var(--ink-soft);word-break:break-all;max-width:96mm}

/* 受取人の最後の一行（紹介導線はここ一箇所だけ＝design/05 (h)） */
.mg .last-line{display:flex;align-items:center;justify-content:center}
.mg .last-line .v{writing-mode:vertical-rl;font-size:12.5pt;letter-spacing:.22em;line-height:2.6;color:var(--ink-soft);height:110mm}

/* 声できく（画面のみ） */
.mg .voice{position:absolute;left:10mm;bottom:9mm;font-family:var(--gothic);font-size:8pt;letter-spacing:.2em;
  color:var(--ao);background:transparent;border:1px solid rgba(44,74,110,.35);padding:1.2mm 3mm;cursor:pointer;border-radius:0}
@media print{ .mg .voice{display:none} }

/* 画面：頁を縦に流す（台本第8場「完成した一冊が縦に流れる」）。幅に合わせて縮める */
@media screen{
  .mg-shelf{display:flex;flex-direction:column;align-items:center;gap:18px;padding:18px 0 40px}
  .mg-shelf .sheet{box-shadow:0 12px 44px rgba(43,39,35,.22)}
}
@page{size:148mm 210mm;margin:0}
@media print{ .mg-shelf{display:block;padding:0;gap:0;zoom:1!important} body{background:#fff!important} }