/**
 * css/page.css
 * -----------------------------------------------------------------------------
 * A LEGEND — 固定ページ専用スタイル
 * -----------------------------------------------------------------------------
 *
 * 役割：
 * - page.php で出力される通常固定ページの見た目を調整する。
 * - プライバシーポリシー、利用規約、免責事項、サイト概要など、
 *   「投稿ではない固定ページ」向けの差分デザインをここに集約する。
 *
 * 前提：
 * - page.php 側では、ブログ詳細デザインを流用するために以下の構造を使用する。
 *
 *   <main class="site-main blog-single page-single">
 *     <div class="bs-wrap">
 *       ...
 *       <header class="bs-head">
 *         <div class="bs-meta">...</div>
 *         <h1 class="bs-title">...</h1>
 *       </header>
 *       <article class="bs-article">
 *         <div class="bs-content post-content">...</div>
 *       </article>
 *     </div>
 *   </main>
 *
 * - ベースデザインは css/blog/single-blog.css を利用する。
 * - この page.css は、その後に読み込まれる固定ページ専用の上書きCSSとして使う。
 *
 * メンテナンスポリシー：
 * - ブログ詳細ページにも効く汎用調整は css/blog/single-blog.css へ書く。
 * - 固定ページだけに効かせたい調整は、この css/page.css へ書く。
 * - セレクタは原則として .page-single 起点にし、ブログ詳細へ影響させない。
 */


/* =============================================================================
   1. 固定ページ全体
   ========================================================================== */

/**
 * 固定ページ専用の微調整起点。
 *
 * - blog-single の基本レイアウトは維持する。
 * - 固定ページだけの調整は、必ず .page-single 配下で行う。
 */
.page-single {
  /**
   * 将来的に固定ページだけのCSS変数を増やせるように、
   * ここを固定ページ専用の変数置き場として使う。
   */
  --page-meta-line-height: 34px;
  --page-meta-line-width: 4px;
  --page-meta-gap: 14px;
}


/* =============================================================================
   2. タイトル上の更新日メタ情報
   ========================================================================== */

/**
 * 固定ページのメタ情報エリア。
 *
 * ブログ詳細ではカテゴリ・日付・更新日・閲覧数など複数情報を扱うが、
 * 固定ページでは基本的に「更新日」だけを表示する。
 *
 * そのため、ブログ詳細用の大きなメタブロック感を抑え、
 * タイトル前の補助情報として自然に見える余白へ調整する。
 */
.page-single .bs-meta {
  display: block;
  margin: 22px 0 18px;
}

/**
 * 更新日の外側ラッパ。
 *
 * single-blog.css 側ではブログ詳細用に高さが大きく取られているため、
 * 固定ページでは高さを自動化し、短い縦線と日付がきれいに揃うようにする。
 */
.page-single .bs-catmod {
  display: flex;
  align-items: center;
  min-height: var(--page-meta-line-height);
  height: auto;
  padding-left: calc(var(--page-meta-gap) + var(--page-meta-line-width));
}

/**
 * タイトル上の縦線。
 *
 * ブログ詳細用の縦線は、日付ブロック全体に合わせて長くなりやすい。
 * 固定ページでは更新日だけなので、短く・角丸にして補助装飾として整える。
 */
.page-single .bs-catmod::before {
  width: var(--page-meta-line-width);
  height: var(--page-meta-line-height);
  top: 50%;
  transform: translateY(-50%);
  border-radius: 999px;
}

/**
 * 更新日テキストのラッパ。
 *
 * 不要な上下余白を抑え、縦線の中央に自然に並ぶようにする。
 */
.page-single .bs-modwrap {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/**
 * 更新日テキスト。
 *
 * 固定ページではメタ情報が主役ではないため、
 * 少し小さめ・薄めにして、タイトルを邪魔しない見た目にする。
 */
.page-single .bs-mod {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.04em;
  opacity: 0.72;
}

/**
 * 更新日アイコン。
 *
 * テキストとの高さズレを抑える。
 */
.page-single .bs-mod__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}


/* =============================================================================
   3. 固定ページタイトル周り
   ========================================================================== */

/**
 * 固定ページタイトル。
 *
 * ベースはブログ詳細側の .bs-title を使う。
 * ここでは固定ページとして少しだけ余白バランスを整える。
 */
.page-single .bs-title {
  margin-top: 0;
}

/**
 * タイトル下の区切り線。
 *
 * 固定ページでは本文がすぐ始まるケースが多いため、
 * 線と本文の距離が詰まりすぎないようにする。
 */
.page-single .bs-head .bs-rule {
  margin-top: 22px;
}


/* =============================================================================
   4. 固定ページ本文
   ========================================================================== */

/**
 * 固定ページ本文。
 *
 * .post-content の本文装飾はブログ詳細から流用する。
 * ここでは固定ページとして読み物ページに向いた行間だけ微調整する。
 */
.page-single .bs-content {
  line-height: 2;
}

/**
 * 本文冒頭の要素。
 *
 * 固定ページでは、タイトル直後に本文が始まることが多い。
 * 先頭要素の上余白が大きくなりすぎないように整える。
 */
.page-single .bs-content > :first-child {
  margin-top: 0;
}

/**
 * 本文末尾の要素。
 *
 * 最後に不要な余白が出すぎないようにする。
 */
.page-single .bs-content > :last-child {
  margin-bottom: 0;
}


/* =============================================================================
   5. 固定ページ内テーブル
   ========================================================================== */

/**
 * 固定ページ内のテーブル。
 *
 * プライバシーポリシーや利用規約では表を使うことが多いため、
 * ブログ本文内テーブルとして自然に読めるよう、幅と余白を整える。
 */
.page-single .bs-content table {
  width: 100%;
  margin: 24px 0 36px;
  border-collapse: collapse;
}

/**
 * テーブルセル。
 *
 * 固定ページの説明表として使いやすいように、
 * セル内の余白と縦方向の見やすさを確保する。
 */
.page-single .bs-content th,
.page-single .bs-content td {
  padding: 14px 16px;
  vertical-align: top;
}

/**
 * テーブル内リンク。
 *
 * URLが長い場合でもレイアウトを壊しにくくする。
 */
.page-single .bs-content table a {
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* =============================================================================
   6. 固定ページ内リスト
   ========================================================================== */

/**
 * 箇条書き。
 *
 * プライバシーポリシーや利用規約ではリストが多くなりやすいため、
 * 行間と余白を少しだけ読みやすくする。
 */
.page-single .bs-content ul,
.page-single .bs-content ol {
  margin-top: 16px;
  margin-bottom: 28px;
}

/**
 * リスト項目。
 *
 * 項目同士が詰まりすぎないようにする。
 */
.page-single .bs-content li + li {
  margin-top: 0.35em;
}


/* =============================================================================
   7. 固定ページ内リンク
   ========================================================================== */

/**
 * 固定ページ本文内リンク。
 *
 * 長いURLをそのまま貼るページでも、折り返しできるようにする。
 */
.page-single .bs-content a {
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* =============================================================================
   8. レスポンシブ調整
   ========================================================================== */

@media (max-width: 768px) {
  /**
   * スマホではタイトル上のメタ情報の余白を少し詰める。
   */
  .page-single .bs-meta {
    margin: 18px 0 14px;
  }

  /**
   * スマホでは縦線も少し短くし、タイトル前の圧迫感を抑える。
   */
  .page-single {
    --page-meta-line-height: 28px;
    --page-meta-line-width: 4px;
    --page-meta-gap: 12px;
  }

  /**
   * スマホ時の更新日テキスト。
   */
  .page-single .bs-mod {
    font-size: 12px;
  }

  /**
   * スマホでは本文行間を少しだけ抑えて、
   * 画面内の情報密度を上げる。
   */
  .page-single .bs-content {
    line-height: 1.9;
  }

  /**
   * スマホ時のテーブル。
   *
   * 横幅が狭い端末では表が詰まりやすいため、
   * セル余白を少しだけ小さくする。
   */
  .page-single .bs-content th,
  .page-single .bs-content td {
    padding: 12px 10px;
  }
}

@media (max-width: 480px) {
  /**
   * 小さいスマホではメタ情報とタイトルの距離をさらに微調整する。
   */
  .page-single .bs-meta {
    margin: 16px 0 12px;
  }

  /**
   * 小さいスマホでは縦線を少し控えめにする。
   */
  .page-single {
    --page-meta-line-height: 24px;
  }

  /**
   * 小さいスマホで表の文字量が多い場合でも崩れにくくする。
   */
  .page-single .bs-content table {
    font-size: 0.95em;
  }
}