/* anime-episode.css — episode 単体ページ用ユーティリティ
   AFFINGER6 子テーマで使用する Bootstrap 互換クラスを最小実装。
   is_singular('episode') 限定 enqueue のため他ページへの副作用なし。 */

/* ── ページコンテナ（中央寄せ） ──
   single-episode.php の <main class="ep-main container my-4"> 用。
   anime-single.css の .anime-main と同じ中央寄せ方針に揃える。
   未定義だと本文が画面幅いっぱいに広がりレイアウトが崩れる。 */
.container {
    max-width: 880px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem;
    box-sizing: border-box;
}

/* ── 表示 / 配置 ── */
.d-none           { display: none !important; }
.d-block          { display: block; }
.d-flex           { display: flex; }
.flex-wrap        { flex-wrap: wrap; }
.justify-content-center { justify-content: center; }
.gap-2            { gap: .5rem; }
.flex-grow-1     { flex-grow: 1; }
@media (min-width: 576px) {
    .flex-sm-grow-0 { flex-grow: 0; }
}

/* ── グリッド（前話/次話ナビ等） ── */
.row              { display: flex; flex-wrap: wrap; margin-right: -.5rem; margin-left: -.5rem; }
.g-2              { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
.g-2 > *          { padding-right: .25rem; padding-left: .25rem; margin-bottom: .5rem; }
.col-6            { flex: 0 0 auto; width: 50%; padding-right: .25rem; padding-left: .25rem; }

/* ── テキスト ── */
.text-muted               { color: #6b7280; }
.text-success             { color: #198754; }
.text-end                 { text-align: right; }
.text-center              { text-align: center; }
.text-decoration-none     { text-decoration: none; }
.small                    { font-size: .85rem; }
.fs-3                     { font-size: 1.75rem; line-height: 1.2; }
.h-100                    { height: 100%; }
.fw-semibold              { font-weight: 600; }
.h5                       { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.h6                       { font-size: 1rem;    font-weight: 600; line-height: 1.3; }

/* ── マージン / パディング ── */
.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: .25rem; }
.mb-2  { margin-bottom: .5rem; }
.mb-3  { margin-bottom: 1rem; }
.mb-4  { margin-bottom: 1.5rem; }
.mt-1  { margin-top: .25rem; }
.mt-2  { margin-top: .5rem; }
.mt-3  { margin-top: 1rem; }
.mt-4  { margin-top: 1.5rem; }
.mt-5  { margin-top: 3rem; }
.my-4  { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.ms-1  { margin-left: .25rem; }
.p-1   { padding: .25rem; }
.p-3   { padding: 1rem; }

/* ── 枠 / 背景 ── */
.border        { border: 1px solid #dee2e6; }
.rounded       { border-radius: .375rem; }
.bg-light      { background-color: #f8f9fa; }
.bg-secondary  { background-color: #6c757d; color: #fff; }

/* ── リスト ── */
.list-unstyled        { padding-left: 0; list-style: none; }
.list-inline          { padding-left: 0; list-style: none; margin-bottom: 0; }
.list-inline-item     { display: inline-block; }
.list-inline-item:not(:last-child) { margin-right: .5rem; }

/* ── バッジ ── */
.badge {
    display: inline-block;
    padding: .35em .65em;
    font-size: .75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background-color: #6c757d;
    border-radius: .375rem;
    text-decoration: none;
}

/* ── アラート ── */
.alert {
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .375rem;
}
.alert-warning {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
}

/* ── リンク ── */
.link-primary { color: #0a58ca; text-decoration: underline; }
.link-primary:hover { color: #084298; }

/* ── ボタン ── */
.btn {
    display: inline-block;
    padding: .5rem 1rem;
    border: 1px solid transparent;
    border-radius: .375rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
    min-height: 44px;
}
.btn-sm {
    padding: .375rem .75rem;
    font-size: .875rem;
    min-height: 44px; /* WCAG 2.5.5 推奨タップ領域 */
}
.btn-link {
    background: none;
    border-color: transparent;
    color: inherit;
    padding: .25rem .5rem;
    min-height: 0;
}
.btn-link:hover,
.btn-link:focus {
    background: rgba(0,0,0,.05);
}
.btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: #0b5ed7;
    border-color: #0a58ca;
    color: #fff;
}
.btn-outline-secondary {
    background-color: transparent;
    border-color: #6c757d;
    color: #6c757d;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: #6c757d;
    color: #fff;
}
.btn-dark {
    background-color: #212529;
    border-color: #212529;
    color: #fff;
}
.btn-dark:hover,
.btn-dark:focus {
    background-color: #1c1f23;
    border-color: #16181b;
    color: #fff;
}
/* ── ソーシャルログインボタン（outline 系） ── */
.btn-outline-primary {
    background-color: transparent;
    border-color: #0d6efd;
    color: #0a58ca;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: #0d6efd;
    color: #fff;
}
.btn-outline-dark {
    background-color: transparent;
    border-color: #212529;
    color: #212529;
}
.btn-outline-dark:hover,
.btn-outline-dark:focus {
    background-color: #212529;
    color: #fff;
}
.btn-outline-success {
    background-color: transparent;
    border-color: #198754;
    color: #146c43;
}
.btn-outline-success:hover,
.btn-outline-success:focus {
    background-color: #198754;
    color: #fff;
}

/* ── 視聴済みトグルボタン ── */
.btn-watched {
    background-color: #fff;
    border-color: #198754;
    color: #146c43;
}
.btn-watched:hover,
.btn-watched:focus {
    background-color: #e8f5ee;
    color: #146c43;
}
.btn-watched.is-watched {
    background-color: #198754;
    border-color: #198754;
    color: #fff;
}
.btn-watched .ep-watched-icon { margin-right: .35em; }

/* ── X 感想投稿ボタン ── */
.ep-tweet-button .ep-x-icon { margin-right: .35em; font-weight: 700; }

/* ── ep-anime-review (Phase 5) ── */
.ep-anime-review-summary {
    font-size: 1rem;
    line-height: 1.6;
}
.ep-anime-review-summary strong {
    font-size: 1.15rem;
    color: #b45309; /* Amber-700: WCAG AA 5.02:1 on white */
}

/* ── B-2: 各話スター評価 focus-visible ── */
.ep-star:focus-visible {
    outline: 2px solid var(--brand-primary-dark, #0369a1);
    outline-offset: 2px;
    border-radius: 4px;
}