/* =====================================================================
   ibit.dev — Privacy page specific styles
   共有スタイル (style.css) のクラスを再利用し、ここには Privacy ページ
   固有のレイアウト・装飾（目次・制定/改定日）のみを定義する。
   ===================================================================== */

/* 方針カードは本文最適幅に絞り、01〜08 の番号バッジで目次と対応づける。
   display/max-width/gap/margin-top は元々 style.css と二重定義で、
   privacy.php でしか使わないこのクラスの分だけこちらへ一本化した。 */
.policy-list {
    counter-reset: policy;
    max-width: 820px;
    display: grid;
    gap: 16px;
    margin-top: 8px;
}

/* カード面(820px)は保ったまま本文だけ和文の快適行長に絞る。右側の余白は許容 */
.policy-item .card-text,
.policy-points {
    max-width: var(--measure);
}

/* 番号バッジ。見た目 (accent 枠/地/文字色/pill) は style.css V17 基底。 */
.policy-item .card-title::before {
    counter-increment: policy;
    content: counter(policy, decimal-leading-zero);
    content: counter(policy, decimal-leading-zero) / "";
    display: inline-block;
    margin-right: 12px;
    padding: var(--badge-pad);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    vertical-align: 4px;
}

@media (forced-colors: active) {
    .policy-item .card-title::before {
        border-color: CanvasText;
        color: CanvasText;
    }
}

/* ---- 目次（render_page_toc）の見た目は refine.css に集約 ---- */
.page-toc {
    margin-bottom: 24px;
}

/* ---- 各方針見出しのアンカー着地位置（固定ヘッダーぶん下げる）+ 8章立てを識別しやすいサイズに ---- */
.policy-item .card-title {
    scroll-margin-top: calc(var(--header-height) + 16px);
    font-size: 1.3rem;
}

/* ---- 制定日 / 最終改定日 ---- */
.policy-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    max-width: 760px;
    margin: 20px 0 0;
    padding: 14px 18px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: var(--dim);
}

.policy-date {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
}

.policy-date dt {
    margin: 0;
    color: var(--muted);
    font-weight: 600;
}

.policy-date dd {
    margin: 0;
    color: var(--text);
}

@media (max-width: 600px) {
    .policy-dates {
        flex-direction: column;
        gap: 6px;
    }
}