/*! shinbun.css v0.1.1 | MIT License | 日本の新聞紙面（縦組み・横組み、段グリッド、段抜き見出し）のための、依存なしの CSS */

/* 仕様は docs/SPEC.md、用語は README.md の「用語集」を参照。
   必要なブラウザ: Chrome 123 / Firefox 120 / Safari 17.5 以降
   （@layer・CSS ネスティング・light-dark()・color-mix() を使うため）。

   設計の要点: 縦組みと横組みは、同じ「段グリッド」を 90 度回したもの。
     段   = 紙面を、行が進む方向と直交する向きに区切った帯
            （縦組みでは天地方向、横組みでは左右方向）
     行軸 = 行が進む向き（縦組みでは右から左、横組みでは上から下）
   記事は「段軸に --sb-span 段、行軸に --sb-w 行」を占める長方形。 */

@layer sb.tokens, sb.base, sb.layout, sb.components, sb.utilities;

/* ==========================================================================
   1. トークン（カスタムプロパティ）
   ========================================================================== */
@layer sb.tokens {
  :where(.sb-paper) {
    color-scheme: light;

    /* 色。light-dark(明, 暗) */
    --sb-paper: light-dark(#f4eedd, #17140f);
    --sb-ink: light-dark(#1b1812, #eee6d2);
    --sb-muted: light-dark(#5d564a, #a79f8c);
    --sb-rule: light-dark(#1b1812, #eee6d2);
    --sb-rule-soft: light-dark(#9a917c, #6f6858);
    --sb-accent: light-dark(#a02a1f, #e5786b);
    --sb-photo-bg: light-dark(#cfc6b0, #3a352b);

    /* 書体 */
    --sb-font-body: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho",
      "BIZ UDPMincho", "Noto Serif JP", "Source Han Serif JP", serif;
    --sb-font-gothic: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic",
      "BIZ UDPGothic", "Noto Sans JP", "Source Han Sans JP", sans-serif;

    /* 基本版面の設計要素（JLReq 2.2.4）
       --sb-fs    文字サイズ（本文の1字の大きさ）
       --sb-lh    行送り（文字サイズに対する倍率。行間 = 行送り − 1）
       --sb-chars 縦組みでの1段の字数（= 段の天地の字数）
       --sb-dan   縦組みでの1ページの段数
       --sb-dan-h 横組みでの1ページの段数
       --sb-lines 座標指定グリッド（.sb-page--grid）での、行軸方向の行数
       --sb-gap   段間・記事間のアキ */
    --sb-fs: 0.8rem;
    --sb-lh: 1.55;
    --sb-chars: 10;
    --sb-dan: 10;
    --sb-dan-h: 6;
    --sb-lines: 36;
    --sb-gap: var(--sb-fs);
    --sb-pitch: calc(var(--sb-fs) * var(--sb-lh)); /* 行送りの実寸 */

    /* 見出しの大きさ（本文の文字サイズに対する倍率） */
    --sb-h-xl: 3.4;
    --sb-h-l: 2.4;
    --sb-h-m: 1.7;
    --sb-h-s: 1.2;
  }

  /* 段数のプリセット。1段の字数は目安（出典と検証状況は docs/SPEC.md §10） */
  :where(.sb-paper--15dan) {
    --sb-dan: 15;
    --sb-chars: 10;
  }
  :where(.sb-paper--12dan) {
    --sb-dan: 12;
    --sb-chars: 12;
  }

  :where(.sb-paper[data-sb-theme="dark"]) {
    color-scheme: dark;
  }
  :where(.sb-paper[data-sb-theme="auto"]) {
    color-scheme: light dark;
  }
}

/* ==========================================================================
   2. ベース
   ========================================================================== */
@layer sb.base {
  .sb-paper {
    box-sizing: border-box;
    background: var(--sb-paper);
    color: var(--sb-ink);
    font-family: var(--sb-font-body);
    font-size: var(--sb-fs);
    line-height: var(--sb-lh);
    /* 禁則処理（JLReq 3.1.7, 3.1.8） */
    line-break: strict;
    word-break: normal;
    /* 和欧間のアキ（JLReq 3.2）。対応していないブラウザでは無視される */
    text-autospace: normal;
    /* 約物の連続・行頭の詰め（JLReq 3.1.4, 3.1.5）。対応していないブラウザでは無視される */
    text-spacing-trim: normal;
    font-kerning: normal;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .sb-paper *,
  .sb-paper *::before,
  .sb-paper *::after {
    box-sizing: inherit;
  }

  .sb-paper a {
    color: inherit;
    text-decoration: none;
  }
  .sb-paper a:hover,
  .sb-paper a:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  .sb-paper p {
    margin: 0;
  }
}

/* ==========================================================================
   3. レイアウト
   ========================================================================== */
@layer sb.layout {
  /* ---- 題字の帯（横組み。専門紙や横組みの紙面向け） ---- */
  .sb-masthead {
    writing-mode: horizontal-tb;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 0.4rem 0;
    margin-block-end: 0.8rem;
    border-block: 3px double var(--sb-rule);
    font-family: var(--sb-font-gothic);
    font-size: 0.78rem;
    line-height: 1.5;
  }
  .sb-masthead__title {
    margin: 0;
    font-family: var(--sb-font-body);
    font-weight: 900;
    font-size: clamp(2rem, 6vw, 3.6rem);
    letter-spacing: 0.25em;
    padding-inline-start: 0.25em; /* letter-spacing の右端ぶんの補正 */
    line-height: 1.2;
    text-align: center;
  }
  .sb-masthead__side {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }
  .sb-masthead__side--end {
    text-align: end;
  }

  /* ---- 欄外（面名・日付などの行） ---- */
  .sb-folio {
    writing-mode: horizontal-tb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 0.6rem;
    font-family: var(--sb-font-gothic);
    font-size: 0.72rem;
    color: var(--sb-muted);
  }
  .sb-folio__section {
    padding: 0.05em 0.6em;
    border: 1px solid var(--sb-rule);
    color: var(--sb-ink);
    font-weight: 700;
  }

  /* ---- 紙面（段グリッド） ----
     縦組み・横組みに共通する規則。
     grid-template-columns が「段」を、grid-template-rows が「行軸」を受け持つ。
       --sb-y    開始する段（1 から数える。省略で自動）
       --sb-span 占める段数
       --sb-x    行軸の開始位置（1 から数える。縦組みでは右から。省略で自動）
       --sb-w    行軸方向に占める行数 */
  .sb-page {
    display: grid;
    grid-auto-flow: row dense;
    gap: var(--sb-gap);

    & > * {
      grid-column: var(--sb-y, auto) / span var(--sb-span, 3);
      grid-row: var(--sb-x, auto) / span var(--sb-w, 1);
      align-self: start; /* 行軸方向は内容の大きさで止める */
      min-inline-size: 0;
    }

    /* 記事 = 段軸に n 段を占める矩形。本文は段ごとに流れ、見出しは全段にまたがる（段抜き）。 */
    & > :is(.sb-article, article) {
      --sb-span: 3;
      columns: var(--sb-span);
      column-gap: var(--sb-gap);
      column-rule: none;
      column-fill: balance;
      position: relative;
      text-align: justify;
      text-justify: inter-character; /* 日本語は字間で調整する */

      & > :is(.sb-headline, .sb-kicker, .sb-sleeve, .sb-sub, .sb-photo, .sb-box, h2, figure, aside) {
        column-span: all;
      }

      /* 記事どうしの罫線。アキの中央に引き、寸法を食わない */
      &::after {
        content: "";
        position: absolute;
        inset: calc(var(--sb-gap) / -2);
        border-inline-end: 1px solid var(--sb-rule-soft);
        border-block-end: 1px solid var(--sb-rule-soft);
        pointer-events: none;
      }
      &.sb-article--lead::after {
        border-block-end: 3px double var(--sb-rule);
      }
    }
  }

  /* 座標指定グリッド: 行軸方向も固定し、記事を長方形に敷き詰める。
     記事の本文は、指定した長方形に収まる分だけが表示される。収まらない分は
     はみ出すので、Shinbun.findOverflow() で検出して、文章か寸法を調整する。 */
  .sb-page--grid {
    grid-template-rows: repeat(var(--sb-lines), var(--sb-pitch));
    row-gap: 0;

    & > * {
      align-self: stretch;
    }
    & > :is(.sb-article, article) {
      column-fill: auto;
      padding-block: calc(var(--sb-gap) / 2);

      &::after {
        inset-block: 0;
      }
    }
  }

  /* ---- 縦組み（既定） ---- */
  .sb-paper:not([data-sb-writing="horizontal"]) {
    --sb-track: calc(var(--sb-chars) * var(--sb-fs)); /* 1段の天地寸法 */

    & .sb-page {
      writing-mode: vertical-rl;
      text-orientation: upright;
      grid-template-columns: repeat(var(--sb-dan), var(--sb-track));
      /* 天地の寸法は段数から決まる */
      inline-size: calc(var(--sb-dan) * var(--sb-track) + (var(--sb-dan) - 1) * var(--sb-gap));
      max-width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      padding: calc(var(--sb-gap) / 2);
    }
  }

  /* ---- 横組み ---- */
  .sb-paper[data-sb-writing="horizontal"] {
    --sb-dan: var(--sb-dan-h);
    --sb-gap: calc(var(--sb-fs) * 1.2);
    --sb-photo-ratio: 4 / 3;

    & .sb-page {
      writing-mode: horizontal-tb;
      grid-template-columns: repeat(var(--sb-dan), minmax(0, 1fr));
    }
  }
}

/* ==========================================================================
   4. コンポーネント
   ========================================================================== */
@layer sb.components {
  /* ---- 題字（紙面の中に置く枠）----
     文字（.sb-nameplate__title）でも、画像やロゴ（.sb-nameplate__logo）でもよい。
     縦組みの紙面では縦題字、横組みの紙面では横題字になる。 */
  :is(.sb-nameplate, .sb-page > header) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.5em;
    border: 1px solid var(--sb-rule);
    text-align: center;
  }
  .sb-nameplate--horizontal {
    writing-mode: horizontal-tb;
  }
  :is(.sb-nameplate__title, :where(.sb-page > header) > h1) {
    margin: 0;
    font-weight: 900;
    font-size: calc(var(--sb-fs) * 3.2);
    line-height: 1.15;
    letter-spacing: 0.12em;
    font-feature-settings: "palt", "vpal";
  }
  .sb-nameplate__logo {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }
  .sb-nameplate__meta {
    font-family: var(--sb-font-gothic);
    font-size: calc(var(--sb-fs) * 0.9);
    line-height: 1.4;
    color: var(--sb-muted);
    text-indent: 0;
  }

  /* ---- 見出し ----
     肩見出し(.sb-kicker) / 主見出し(.sb-headline) / 袖見出し(.sb-sleeve) / 脇見出し(.sb-sub) */
  .sb-headline,
  .sb-kicker,
  .sb-sleeve,
  .sb-sub {
    margin: 0;
    text-indent: 0;
  }
  :is(.sb-headline, :where(.sb-page > article) > h2) {
    margin: 0;
    text-indent: 0;
    font-weight: 800;
    font-size: calc(var(--sb-fs) * var(--sb-h-m));
    line-height: 1.25;
    margin-block-end: 0.35em;
    /* 大きな見出しは字面詰め（JLReq 2.1.3 の詰め組）。縦組みは vpal、横組みは palt */
    font-feature-settings: "palt", "vpal";
    text-wrap: balance;
  }
  .sb-headline--xl { font-size: calc(var(--sb-fs) * var(--sb-h-xl)); }
  .sb-headline--l  { font-size: calc(var(--sb-fs) * var(--sb-h-l)); }
  .sb-headline--m  { font-size: calc(var(--sb-fs) * var(--sb-h-m)); }
  .sb-headline--s  { font-size: calc(var(--sb-fs) * var(--sb-h-s)); }

  /* 横見出し: 縦組みの紙面で、横向きに組む見出し。紙面の直接の子にして、
     --sb-y / --sb-span / --sb-x / --sb-w で位置と大きさを指定する。 */
  .sb-yoko {
    writing-mode: horizontal-tb;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.15em 0.5em;
    font-weight: 900;
    font-size: calc(var(--sb-fs) * var(--sb-h-xl));
    line-height: 1.15;
    text-align: center;
    text-indent: 0;
    font-feature-settings: "palt";
    text-wrap: balance;
  }
  .sb-yoko--reverse {
    background: var(--sb-ink);
    color: var(--sb-paper);
  }

  .sb-kicker {
    font-family: var(--sb-font-gothic);
    font-weight: 700;
    font-size: calc(var(--sb-fs) * 0.95);
    color: var(--sb-accent);
    margin-block-end: 0.25em;
  }
  .sb-sleeve {
    font-weight: 700;
    font-size: calc(var(--sb-fs) * 1.25);
    line-height: 1.3;
    margin-block-end: 0.3em;
    text-wrap: balance;
  }
  .sb-sub {
    font-weight: 700;
    font-size: calc(var(--sb-fs) * 1.05);
    line-height: 1.35;
    margin-block-end: 0.5em;
    text-wrap: balance;
  }

  /* ---- リード（前文）・発信地・署名 ---- */
  .sb-lead {
    font-weight: 700;
    text-indent: 0;
  }
  .sb-article > .sb-lead {
    margin-block-end: 0.5em;
  }
  .sb-dateline,
  .sb-byline {
    font-family: var(--sb-font-gothic);
    font-size: calc(var(--sb-fs) * 0.85);
    color: var(--sb-muted);
    text-indent: 0;
  }
  .sb-byline {
    text-align: end;
    margin-block-start: 0.6em;
  }

  /* ---- 本文 ---- */
  .sb-article :where(p) {
    text-indent: 1em; /* 段落先頭行の字下げは1字（JLReq 3.5.1）。見出し類は個別に 0 */
  }
  /* 天付き（字下げをしない）。会話文を受けて続く段落など（JLReq 3.5.1）。
     段をまたいだ行の字下げは、段落の先頭行にしか効かないので打ち消す必要はない。 */
  .sb-article p.sb-flush {
    text-indent: 0;
  }
  /* 社説・論説: 本文をやや大きく、行を長く */
  .sb-article--editorial {
    font-size: calc(var(--sb-fs) * 1.08);
  }

  /* ---- 写真・図版 ---- */
  :is(.sb-photo, :where(.sb-paper) figure) {
    margin: 0 0 0.6em;
  }
  :is(.sb-photo__img, :where(.sb-paper) figure > img) {
    display: block;
    inline-size: 100%;
    /* 縦組みでは inline 軸が天地。比率は「幅 / 高さ」 */
    aspect-ratio: var(--sb-photo-ratio, 4 / 5);
    object-fit: cover;
    background: var(--sb-photo-bg);
  }
  /* 座標指定で置いた写真: 指定した長方形いっぱいに画像を広げる（説明文の分は除く） */
  .sb-page > :is(.sb-photo, figure) {
    display: flex;
    flex-direction: column;
    margin: 0;

    & > :is(.sb-photo__img, img) {
      flex: 1 1 0;
      min-block-size: 0;
      block-size: auto;
      aspect-ratio: auto;
    }
  }
  :is(.sb-photo__caption, :where(.sb-paper) figcaption) {
    margin-block-start: 0.3em;
    font-family: var(--sb-font-gothic);
    font-size: calc(var(--sb-fs) * 0.8);
    line-height: 1.4;
    color: var(--sb-muted);
    text-indent: 0;
  }

  /* ---- 囲み（解説・ポイント） ---- */
  :is(.sb-box, :where(.sb-paper) aside) {
    margin: 0.4em 0 0.8em;
    padding: 0.5em 0.7em;
    border: 1px solid var(--sb-rule);
    font-size: calc(var(--sb-fs) * 0.92);
  }
  .sb-page > :is(.sb-box, aside) {
    margin: 0;
  }
  :is(.sb-box__title, :where(.sb-paper) aside > h3) {
    margin: 0 0 0.3em;
    font-family: var(--sb-font-gothic);
    font-weight: 700;
    text-indent: 0;
  }

  /* ---- コラム（固定の署名欄） ---- */
  .sb-column {
    background: color-mix(in srgb, var(--sb-ink) 5%, transparent);
    padding: 0.6em;
  }
  .sb-column > .sb-headline {
    font-family: var(--sb-font-gothic);
  }

  /* ---- 表（番組表・市況など）----
     縦組みの紙面でも横組みで表示する。 */
  :is(.sb-table, :where(.sb-paper) table) {
    writing-mode: horizontal-tb;
    width: 100%;
    border-collapse: collapse;
    font-family: var(--sb-font-gothic);
    font-size: calc(var(--sb-fs) * 0.82);
    line-height: 1.3;
    text-indent: 0;

    & caption {
      padding-block-end: 0.3em;
      font-weight: 700;
      text-align: start;
    }
    & :is(th, td) {
      padding: 0.15em 0.35em;
      border: 1px solid var(--sb-rule-soft);
      text-align: start;
      vertical-align: top;
    }
    & th {
      font-weight: 700;
      background: color-mix(in srgb, var(--sb-ink) 7%, transparent);
    }
  }
  /* 紙面に直接置いた表は、指定した長方形いっぱいに伸ばさず、内容の高さで止める */
  .sb-page > :is(.sb-table, table) {
    align-self: start;
    justify-self: start;
  }
  .sb-table .sb-num {
    text-align: end;
    font-variant-numeric: tabular-nums;
  }
  /* 番組表: 時刻の列と、局ごとの列 */
  .sb-table--tv {
    font-size: calc(var(--sb-fs) * 0.74);
    line-height: 1.25;

    & :is(th, td) {
      padding: 0.1em 0.25em;
    }
    & th[scope="row"] {
      width: 2.2em;
      text-align: center;
    }
  }

  /* ---- 広告 ----
     記事下広告の大きさは、占める段数と横幅（全・半）で呼ぶ。
     縦組みの紙面では、記事下広告は紙面の下端（天地の末尾）に置く。 */
  .sb-ad {
    display: grid;
    place-items: center;
    border: 1px solid var(--sb-rule-soft);
    background: repeating-linear-gradient(
      135deg,
      transparent 0 6px,
      color-mix(in srgb, var(--sb-ink) 6%, transparent) 6px 7px
    );
    font-family: var(--sb-font-gothic);
    font-size: 0.7rem;
    color: var(--sb-muted);
    text-indent: 0;
  }
  /* 記事下: 段軸の末尾（縦組みでは紙面の下端）に寄せる */
  .sb-ad--kijishita {
    --sb-y: calc(var(--sb-dan) - var(--sb-span, 3) + 1);
  }
  /* 全: 行軸いっぱい。半: 行軸の半分 */
  .sb-ad--zen {
    --sb-x: 1;
    --sb-w: var(--sb-lines);
  }
  .sb-ad--han {
    --sb-w: calc(var(--sb-lines) / 2);
  }
  /* 全5段・半5段・全2段・半2段・全面 */
  .sb-ad--zen5 { --sb-span: 5; }
  .sb-ad--han5 { --sb-span: 5; }
  .sb-ad--zen2 { --sb-span: 2; }
  .sb-ad--han2 { --sb-span: 2; }
  .sb-ad--full {
    --sb-span: var(--sb-dan);
    --sb-y: 1;
    --sb-x: 1;
    --sb-w: var(--sb-lines);
  }

  /* ---- 罫線 ---- */
  .sb-rule {
    border: 0;
    border-block-start: 1px solid var(--sb-rule);
    margin-block: var(--sb-gap);
  }
  .sb-rule--double {
    border-block-start: 3px double var(--sb-rule);
  }

  /* ---- ルビ・圏点（JLReq 3.3） ---- */
  .sb-paper ruby {
    ruby-align: space-around;
  }
  .sb-paper rt {
    font-family: var(--sb-font-gothic);
    font-size: 0.5em;
    line-height: 1;
  }
  .sb-emphasis {
    text-emphasis: filled sesame;
  }
}

/* ==========================================================================
   5. ユーティリティ
   ========================================================================== */
@layer sb.utilities {
  /* 縦中横（JLReq 3.2.5）: 縦組みの中で数字や短い欧文を、横向きに1字分で組む */
  .sb-tcy {
    text-combine-upright: all;
  }
  /* 局所的な横組み */
  .sb-horizontal {
    writing-mode: horizontal-tb;
  }
  /* 欧文を90度回転して組む（縦組みの既定は upright） */
  .sb-sideways {
    text-orientation: sideways;
  }
  .sb-gothic {
    font-family: var(--sb-font-gothic);
  }
  .sb-nowrap {
    white-space: nowrap;
  }

  /* 作者向けの目印: 紙面の配置を点線で示す */
  .sb-paper[data-sb-debug] .sb-page > * {
    outline: 1px dashed #d33;
    outline-offset: -1px;
  }

  /* 配置の属性（data-sb-span、data-sb-y、data-sb-x、data-sb-w）。
     値は src/manifest.json で定め、この範囲は scripts/gen.mjs が生成する。手で編集しない。
     utilities レイヤーに置くので、クラス（.sb-ad--zen5 など）の指定より優先される。 */
  /* BEGIN GENERATED: placement */
  /* data-sb-span: 占める段数。 値は 1〜15。 */
  .sb-page > [data-sb-span="1"] { --sb-span: 1; }
  .sb-page > [data-sb-span="2"] { --sb-span: 2; }
  .sb-page > [data-sb-span="3"] { --sb-span: 3; }
  .sb-page > [data-sb-span="4"] { --sb-span: 4; }
  .sb-page > [data-sb-span="5"] { --sb-span: 5; }
  .sb-page > [data-sb-span="6"] { --sb-span: 6; }
  .sb-page > [data-sb-span="7"] { --sb-span: 7; }
  .sb-page > [data-sb-span="8"] { --sb-span: 8; }
  .sb-page > [data-sb-span="9"] { --sb-span: 9; }
  .sb-page > [data-sb-span="10"] { --sb-span: 10; }
  .sb-page > [data-sb-span="11"] { --sb-span: 11; }
  .sb-page > [data-sb-span="12"] { --sb-span: 12; }
  .sb-page > [data-sb-span="13"] { --sb-span: 13; }
  .sb-page > [data-sb-span="14"] { --sb-span: 14; }
  .sb-page > [data-sb-span="15"] { --sb-span: 15; }
  /* data-sb-y: 開始する段（1 から数える。縦組みでは上から、横組みでは左から）。 値は 1〜15。 */
  .sb-page > [data-sb-y="1"] { --sb-y: 1; }
  .sb-page > [data-sb-y="2"] { --sb-y: 2; }
  .sb-page > [data-sb-y="3"] { --sb-y: 3; }
  .sb-page > [data-sb-y="4"] { --sb-y: 4; }
  .sb-page > [data-sb-y="5"] { --sb-y: 5; }
  .sb-page > [data-sb-y="6"] { --sb-y: 6; }
  .sb-page > [data-sb-y="7"] { --sb-y: 7; }
  .sb-page > [data-sb-y="8"] { --sb-y: 8; }
  .sb-page > [data-sb-y="9"] { --sb-y: 9; }
  .sb-page > [data-sb-y="10"] { --sb-y: 10; }
  .sb-page > [data-sb-y="11"] { --sb-y: 11; }
  .sb-page > [data-sb-y="12"] { --sb-y: 12; }
  .sb-page > [data-sb-y="13"] { --sb-y: 13; }
  .sb-page > [data-sb-y="14"] { --sb-y: 14; }
  .sb-page > [data-sb-y="15"] { --sb-y: 15; }
  /* data-sb-x: 行軸の開始位置（1 から数える。縦組みでは右から、横組みでは上から）。 値は 1〜60。 */
  .sb-page > [data-sb-x="1"] { --sb-x: 1; }
  .sb-page > [data-sb-x="2"] { --sb-x: 2; }
  .sb-page > [data-sb-x="3"] { --sb-x: 3; }
  .sb-page > [data-sb-x="4"] { --sb-x: 4; }
  .sb-page > [data-sb-x="5"] { --sb-x: 5; }
  .sb-page > [data-sb-x="6"] { --sb-x: 6; }
  .sb-page > [data-sb-x="7"] { --sb-x: 7; }
  .sb-page > [data-sb-x="8"] { --sb-x: 8; }
  .sb-page > [data-sb-x="9"] { --sb-x: 9; }
  .sb-page > [data-sb-x="10"] { --sb-x: 10; }
  .sb-page > [data-sb-x="11"] { --sb-x: 11; }
  .sb-page > [data-sb-x="12"] { --sb-x: 12; }
  .sb-page > [data-sb-x="13"] { --sb-x: 13; }
  .sb-page > [data-sb-x="14"] { --sb-x: 14; }
  .sb-page > [data-sb-x="15"] { --sb-x: 15; }
  .sb-page > [data-sb-x="16"] { --sb-x: 16; }
  .sb-page > [data-sb-x="17"] { --sb-x: 17; }
  .sb-page > [data-sb-x="18"] { --sb-x: 18; }
  .sb-page > [data-sb-x="19"] { --sb-x: 19; }
  .sb-page > [data-sb-x="20"] { --sb-x: 20; }
  .sb-page > [data-sb-x="21"] { --sb-x: 21; }
  .sb-page > [data-sb-x="22"] { --sb-x: 22; }
  .sb-page > [data-sb-x="23"] { --sb-x: 23; }
  .sb-page > [data-sb-x="24"] { --sb-x: 24; }
  .sb-page > [data-sb-x="25"] { --sb-x: 25; }
  .sb-page > [data-sb-x="26"] { --sb-x: 26; }
  .sb-page > [data-sb-x="27"] { --sb-x: 27; }
  .sb-page > [data-sb-x="28"] { --sb-x: 28; }
  .sb-page > [data-sb-x="29"] { --sb-x: 29; }
  .sb-page > [data-sb-x="30"] { --sb-x: 30; }
  .sb-page > [data-sb-x="31"] { --sb-x: 31; }
  .sb-page > [data-sb-x="32"] { --sb-x: 32; }
  .sb-page > [data-sb-x="33"] { --sb-x: 33; }
  .sb-page > [data-sb-x="34"] { --sb-x: 34; }
  .sb-page > [data-sb-x="35"] { --sb-x: 35; }
  .sb-page > [data-sb-x="36"] { --sb-x: 36; }
  .sb-page > [data-sb-x="37"] { --sb-x: 37; }
  .sb-page > [data-sb-x="38"] { --sb-x: 38; }
  .sb-page > [data-sb-x="39"] { --sb-x: 39; }
  .sb-page > [data-sb-x="40"] { --sb-x: 40; }
  .sb-page > [data-sb-x="41"] { --sb-x: 41; }
  .sb-page > [data-sb-x="42"] { --sb-x: 42; }
  .sb-page > [data-sb-x="43"] { --sb-x: 43; }
  .sb-page > [data-sb-x="44"] { --sb-x: 44; }
  .sb-page > [data-sb-x="45"] { --sb-x: 45; }
  .sb-page > [data-sb-x="46"] { --sb-x: 46; }
  .sb-page > [data-sb-x="47"] { --sb-x: 47; }
  .sb-page > [data-sb-x="48"] { --sb-x: 48; }
  .sb-page > [data-sb-x="49"] { --sb-x: 49; }
  .sb-page > [data-sb-x="50"] { --sb-x: 50; }
  .sb-page > [data-sb-x="51"] { --sb-x: 51; }
  .sb-page > [data-sb-x="52"] { --sb-x: 52; }
  .sb-page > [data-sb-x="53"] { --sb-x: 53; }
  .sb-page > [data-sb-x="54"] { --sb-x: 54; }
  .sb-page > [data-sb-x="55"] { --sb-x: 55; }
  .sb-page > [data-sb-x="56"] { --sb-x: 56; }
  .sb-page > [data-sb-x="57"] { --sb-x: 57; }
  .sb-page > [data-sb-x="58"] { --sb-x: 58; }
  .sb-page > [data-sb-x="59"] { --sb-x: 59; }
  .sb-page > [data-sb-x="60"] { --sb-x: 60; }
  /* data-sb-w: 行軸方向に占める行数。 値は 1〜60。 */
  .sb-page > [data-sb-w="1"] { --sb-w: 1; }
  .sb-page > [data-sb-w="2"] { --sb-w: 2; }
  .sb-page > [data-sb-w="3"] { --sb-w: 3; }
  .sb-page > [data-sb-w="4"] { --sb-w: 4; }
  .sb-page > [data-sb-w="5"] { --sb-w: 5; }
  .sb-page > [data-sb-w="6"] { --sb-w: 6; }
  .sb-page > [data-sb-w="7"] { --sb-w: 7; }
  .sb-page > [data-sb-w="8"] { --sb-w: 8; }
  .sb-page > [data-sb-w="9"] { --sb-w: 9; }
  .sb-page > [data-sb-w="10"] { --sb-w: 10; }
  .sb-page > [data-sb-w="11"] { --sb-w: 11; }
  .sb-page > [data-sb-w="12"] { --sb-w: 12; }
  .sb-page > [data-sb-w="13"] { --sb-w: 13; }
  .sb-page > [data-sb-w="14"] { --sb-w: 14; }
  .sb-page > [data-sb-w="15"] { --sb-w: 15; }
  .sb-page > [data-sb-w="16"] { --sb-w: 16; }
  .sb-page > [data-sb-w="17"] { --sb-w: 17; }
  .sb-page > [data-sb-w="18"] { --sb-w: 18; }
  .sb-page > [data-sb-w="19"] { --sb-w: 19; }
  .sb-page > [data-sb-w="20"] { --sb-w: 20; }
  .sb-page > [data-sb-w="21"] { --sb-w: 21; }
  .sb-page > [data-sb-w="22"] { --sb-w: 22; }
  .sb-page > [data-sb-w="23"] { --sb-w: 23; }
  .sb-page > [data-sb-w="24"] { --sb-w: 24; }
  .sb-page > [data-sb-w="25"] { --sb-w: 25; }
  .sb-page > [data-sb-w="26"] { --sb-w: 26; }
  .sb-page > [data-sb-w="27"] { --sb-w: 27; }
  .sb-page > [data-sb-w="28"] { --sb-w: 28; }
  .sb-page > [data-sb-w="29"] { --sb-w: 29; }
  .sb-page > [data-sb-w="30"] { --sb-w: 30; }
  .sb-page > [data-sb-w="31"] { --sb-w: 31; }
  .sb-page > [data-sb-w="32"] { --sb-w: 32; }
  .sb-page > [data-sb-w="33"] { --sb-w: 33; }
  .sb-page > [data-sb-w="34"] { --sb-w: 34; }
  .sb-page > [data-sb-w="35"] { --sb-w: 35; }
  .sb-page > [data-sb-w="36"] { --sb-w: 36; }
  .sb-page > [data-sb-w="37"] { --sb-w: 37; }
  .sb-page > [data-sb-w="38"] { --sb-w: 38; }
  .sb-page > [data-sb-w="39"] { --sb-w: 39; }
  .sb-page > [data-sb-w="40"] { --sb-w: 40; }
  .sb-page > [data-sb-w="41"] { --sb-w: 41; }
  .sb-page > [data-sb-w="42"] { --sb-w: 42; }
  .sb-page > [data-sb-w="43"] { --sb-w: 43; }
  .sb-page > [data-sb-w="44"] { --sb-w: 44; }
  .sb-page > [data-sb-w="45"] { --sb-w: 45; }
  .sb-page > [data-sb-w="46"] { --sb-w: 46; }
  .sb-page > [data-sb-w="47"] { --sb-w: 47; }
  .sb-page > [data-sb-w="48"] { --sb-w: 48; }
  .sb-page > [data-sb-w="49"] { --sb-w: 49; }
  .sb-page > [data-sb-w="50"] { --sb-w: 50; }
  .sb-page > [data-sb-w="51"] { --sb-w: 51; }
  .sb-page > [data-sb-w="52"] { --sb-w: 52; }
  .sb-page > [data-sb-w="53"] { --sb-w: 53; }
  .sb-page > [data-sb-w="54"] { --sb-w: 54; }
  .sb-page > [data-sb-w="55"] { --sb-w: 55; }
  .sb-page > [data-sb-w="56"] { --sb-w: 56; }
  .sb-page > [data-sb-w="57"] { --sb-w: 57; }
  .sb-page > [data-sb-w="58"] { --sb-w: 58; }
  .sb-page > [data-sb-w="59"] { --sb-w: 59; }
  .sb-page > [data-sb-w="60"] { --sb-w: 60; }
  /* END GENERATED: placement */
}

@media print {
  .sb-paper .sb-page {
    overflow: visible;
  }
}