/* =================================================================
 * 固定ページ共通の余白
 * (/about/ /ad/ /privacy/ /terms/ /contact/ /faq/ /sitemap/)
 *
 * これらは長文を読ませるページなので、ツールUIより余白を広く取る。
 * <main> に class="static-page" を付けると効く。
 *
 * 【方針】Bootstrap の作法に従い、!important や詳細度の上書きは使わない。
 *  - コンポーネントの余白は Bootstrap が公開している CSS 変数を差し替える
 *    （変数の差し替えなのでユーティリティと詳細度を争わない）
 *  - 要素ごとの間隔は各ページのマークアップ側で標準ユーティリティ
 *    （mt-5 / mb-4 / pb-3 など）を使う。ここでは指定しない
 *  - table-sm のような「詰める」バリアントは、そもそも使わない
 * ================================================================= */

.static-page {
    /* 表: 既定 .5rem → 広げる（.table-sm を使っていないので変数が効く） */
    --bs-table-cell-padding-y: .9rem;
    --bs-table-cell-padding-x: 1.1rem;

    /* カード: 既定 1rem */
    --bs-card-spacer-y: 1.75rem;
    --bs-card-spacer-x: 1.75rem;

    /* 注記（alert）: 既定 1rem */
    --bs-alert-padding-y: 1.35rem;
    --bs-alert-padding-x: 1.5rem;

    /* アコーディオン: 既定 1rem 1.25rem */
    --bs-accordion-btn-padding-y: 1.15rem;
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1.5rem;
    --bs-accordion-body-padding-x: 1.25rem;

    /* 長文なので行送りを広げる（Bootstrap の .lh-lg 相当） */
    line-height: 1.9;
}

.static-page .table th,
.static-page .table td { vertical-align: middle; }


/* =================================================================
 * リッチ表示のパーツ（媒体資料 docs/収益化/媒体資料/ と同じ視覚言語）
 *
 * アクセント色はマッハーバイオレット。Bootstrap の --bs-primary は
 * ページによって解決値が異なるため、ここでは明示的に持つ。
 * ================================================================= */

.static-page {
    --sp-accent: #7c5ac3;
    --sp-accent-soft: rgba(124, 90, 195, .09);
}
[data-bs-theme="dark"] .static-page {
    --sp-accent: #9d83d9;
    --sp-accent-soft: rgba(157, 131, 217, .13);
}

/* ページ見出し: 下に太いアクセント罫（媒体資料の表紙と同じ作り） */
.static-page h1 {
    border-bottom: 3px solid var(--sp-accent);
    padding-bottom: 1rem;
}

/* セクション見出し: 左のアクセントバー */
.static-page .sp-h2 {
    border-left: 5px solid var(--sp-accent);
    padding-left: .85rem;
    line-height: 1.5;
}

/* 数値カード */
.static-page .sp-kpi {
    height: 100%;
    padding: 1.35rem 1rem;
    border-radius: .75rem;
    background: var(--sp-accent-soft);
    text-align: center;
}
.static-page .sp-kpi .sp-kpi-n {
    display: block;
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--sp-accent);
    letter-spacing: -.01em;
}
.static-page .sp-kpi .sp-kpi-n small { font-size: .95rem; font-weight: 700; }
.static-page .sp-kpi .sp-kpi-l {
    display: block;
    margin-top: .35rem;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--bs-secondary-color);
}

/* 表の見出し行にも同じアクセントを薄く敷く */
.static-page .table > thead > tr > th { background: var(--sp-accent-soft); }

/* --- 推移バー（media_trend.php）と開発履歴のタイムライン（/history/）---
 * これらは Bootstrap の .progress / .badge を使うが、素の変数は青に解決される。
 * Bootstrap が公開している変数のほうを差し替えてアクセント色を通す
 * （詳細度を争わないので !important は不要）。 */
.static-page {
    --sp-accent-badge: rgba(124, 90, 195, .18);
    --bs-primary-bg-subtle: var(--sp-accent-badge);
    --bs-primary-text-emphasis: var(--sp-accent);
}
[data-bs-theme="dark"] .static-page {
    --sp-accent-badge: rgba(157, 131, 217, .25);
}
.static-page .progress {
    --bs-progress-bg: var(--sp-accent-soft);
    --bs-progress-bar-bg: var(--sp-accent);
}
.static-page .history-icon { background-color: var(--sp-accent); }

@media (max-width: 575.98px) {
    .static-page .sp-kpi { padding: 1rem .75rem; }
    .static-page .sp-kpi .sp-kpi-n { font-size: 1.45rem; }
}

/* スマートフォンでは広すぎる余白がかえって読みにくいので少し詰める */
@media (max-width: 575.98px) {
    .static-page {
        --bs-table-cell-padding-y: .75rem;
        --bs-table-cell-padding-x: .8rem;
        --bs-card-spacer-y: 1.25rem;
        --bs-card-spacer-x: 1.25rem;
        --bs-alert-padding-y: 1.1rem;
        --bs-alert-padding-x: 1.15rem;
        line-height: 1.85;
    }
}