@charset "UTF-8";
/* お笑いレビュー MVP - モバイルファーストCSS（375px基準） */
/* ボタン・フォームは docs/dads-markdown/（デジタル庁デザインシステム）の
   components/button, components/input-text, webaccessibility の要件に準拠 */

:root {
    /* カラーパレット案D（ライトベース）: ヘッダーも明るい背景の構造 */
    --color-primary: #C1554A;
    --color-primary-dark: #A8443A;
    --color-primary-darker: #8C372F;
    --color-text: #3A3230;
    --color-text-sub: #7A6F68;
    --color-border: #e6ddd0;
    --color-bg: #F5F0E8;
    --color-card-bg: #ffffff;
    --color-star: #C1554A;
    --color-star-bg: #e4d8c8;
    --color-danger: #b3401f;
    --color-danger-bg: #fdeeea;
    --color-success: #1f7a3f;
    --color-success-bg: #eaf7ee;
    /* ヘッダー背景はアクセントカラーと別軸のため個別の変数を持つ */
    --color-header-bg: #FDFBF7;
    /* アクセントの薄い色調（バッジ・ホバー背景等で使用） */
    --color-tint: #F5DCD8;
    --color-tint-strong: #EDCAC3;
    --radius: 10px;
    /* ボタン最小サイズ（デジタル庁デザインシステム準拠） */
    --btn-size-l: 56px;
    --btn-size-m: 48px;
    --btn-size-s: 44px; /* ターゲット領域の最小値と一致させる */
    --target-min: 44px; /* ボタンのターゲット領域の最小値 */
    --target-min-link: 24px; /* ボタン以外のリンクのターゲット領域の最小値 */
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    /* filmarks.com 参考：装飾フォントではなくOS標準の日本語ゴシック体スタックに統一 */
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "游ゴシック体", "Meiryo", "メイリオ", sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
}

/* キーボード操作時のフォーカスインジケーター（全要素共通） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-primary-darker);
    outline-offset: 2px;
}

/* ============================================================
   ボタン（デジタル庁デザインシステム準拠）
   - 重要度: 塗り(primary) ＞ アウトライン(secondary) ＞ テキスト(tertiary)
   - サイズ: L(56px) / M(48px) / S(44px)
   - ターゲット領域は隣接要素と重複しない状態で44×44 CSS px以上を確保する。
     見た目の高さが44pxに満たないサイズ（S）はpaddingで領域を補う。
   - 色の違いだけで重要度を区別しないよう、塗り/アウトライン/下線の
     形状の違いも併用する。
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    font-family: inherit;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    line-height: 1.3;
}

.btn--l {
    min-height: var(--btn-size-l);
    min-width: 136px;
    padding: 8px 24px;
    font-size: 1rem;
}

.btn--m {
    min-height: var(--btn-size-m);
    min-width: 96px;
    padding: 8px 20px;
    font-size: 0.95rem;
}

/* Sサイズ・アイコンのみ等の小さいボタンは、paddingでターゲット領域(44px)を確保する */
.btn--s {
    min-height: var(--target-min);
    min-width: var(--target-min);
    padding: 8px 16px;
    font-size: 0.85rem;
}

.btn--full {
    width: 100%;
}

/* 塗りボタン（プライマリー：重要度・高） */
.btn--primary {
    background: var(--color-primary);
    border: 2px solid var(--color-primary);
    color: #fff;
}

.btn--primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.btn--primary:active {
    background: var(--color-primary-darker);
    border-color: var(--color-primary-darker);
}

/* アウトラインボタン（セカンダリー：重要度・中）
   プライマリーとの区別を色だけに頼らないよう、ボーダーを太くして形状でも差をつける */
.btn--secondary {
    background: #fff;
    border: 2px solid var(--color-primary);
    color: var(--color-primary-dark);
}

.btn--secondary:hover {
    background: var(--color-tint);
}

.btn--secondary:active {
    background: var(--color-tint-strong);
}

/* テキストボタン（ターシャリー：重要度・低。キャンセル/削除等の中断操作向け） */
.btn--tertiary {
    background: transparent;
    border: 2px solid transparent;
    color: var(--color-primary-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.btn--tertiary:hover,
.btn--tertiary:active {
    background: var(--color-tint);
}

/* 危険操作（削除等）のテキストボタン。下線を保持しつつ色でも注意喚起する */
.btn--danger {
    color: var(--color-danger);
}

.btn--danger:hover,
.btn--danger:active {
    background: var(--color-danger-bg);
}

/* ヘッダー（明るい背景）の上で使うテキストボタン */
.btn--on-primary {
    color: var(--color-text);
}

.btn--on-primary:hover,
.btn--on-primary:active {
    background: rgba(58, 50, 48, 0.08);
}

/* ヘッダー（案D：ライトベース。暗色ヘッダーではなく明るい背景+下部ボーダーの構造） */
.site-header {
    background: var(--color-header-bg);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.site-header__inner {
    /* ナビ項目数が多いため、本文カラム(600px)より広めに確保しロゴ・ナビの余白と
       ユーザー名のフル表示・ログアウトの折り返し防止を両立する */
    max-width: 760px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
}

/* ログイン中はナビ幅が広がり検索窓も同じ行に必要なため、コンテナの上限幅を広げる。
   860px指定は「ログイン中の1行レイアウトを維持できる859pxブレークポイント」と対にしている。 */
.site-header--authed .site-header__inner {
    max-width: 860px;
}

.site-header__logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-height: var(--target-min);
    font-weight: 700;
    font-size: 1.1rem;
    white-space: nowrap;
}

.site-header__logo-icon {
    flex-shrink: 0;
}

.site-header__badge {
    display: block;
    font-weight: 400;
    font-size: 0.7rem;
    opacity: 0.85;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

/* ナビゲーションリンクは<button>ではないため最小24×24pxでよいが、
   モバイルでの操作性を優先し可能な限り大きなターゲット領域を確保する */
.site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min);
    padding: 4px 2px;
    white-space: nowrap;
}

/* 管理画面ナビはリンク数が多く1行に収まらないため、ロゴの下に折り返して複数行で表示する。
   公開サイトの.site-header/.site-navはハンバーガーメニュー等の別挙動を持つため、
   影響が及ばないよう.site-header--adminスコープ内でのみ上書きする。 */
.site-header--admin .site-header__inner {
    flex-wrap: wrap;
}

.site-header--admin .site-nav {
    flex-wrap: wrap;
    row-gap: 4px;
}

.site-nav a.is-active {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ユーザー名＋ログアウトを1つのまとまりとして右端に配置する */
.site-nav__account {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.site-nav__user {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min);
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 0.85rem;
    opacity: 0.9;
}

.site-nav__logout-form {
    display: inline;
    margin: 0;
}

/* ログアウトは<button>要素のため、44×44px以上のターゲット領域を確保する。
   white-space/flex-shrinkを明示しないと、行の他要素(nowrap指定あり)が幅を譲らず
   このボタンだけが圧縮されて文字が縦に折り返す事故があったため明示的に固定する */
.site-nav__logout-btn {
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ハンバーガーボタン（モバイルのみ表示） */
.site-nav__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--target-min);
    height: var(--target-min);
    padding: 0;
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

/* ヘッダー共通の検索窓（全ページ表示・ロゴ/ナビと同じ.site-header__innerのflex子要素）
   ⚠️ この基本ルールは必ずモバイル用メディアクエリより「前」に置くこと。
   同じ詳細度のセレクタはCSSカスケードで後に書かれた方が勝つため、メディアクエリより後ろに
   置くと「モバイルでは全幅に折り返す」上書き指定(flex:1 1 100%; max-width:none;)が
   無効化され、実機で検索窓がロゴ横にはみ出す不具合が再発する（2026-07-25に実際発生）。 */
.site-search {
    display: flex;
    align-items: center;
    gap: 6px;
    /* PCではロゴとナビの間の余白を埋める。tablet幅(600〜760px)で
       ナビ項目数が多い場合に詰まらないよう、伸びすぎを320pxで頭打ちにする */
    flex: 1 1 160px;
    min-width: 0;
    max-width: 320px;
}

.site-search__input {
    flex: 1;
    min-width: 0;
    font-family: inherit;
    font-size: 0.85rem;
    min-height: var(--target-min);
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text);
}

.site-search__submit {
    flex-shrink: 0;
    min-width: var(--target-min);
    padding: 8px 14px;
}

/* モバイル（〜599px）: ナビをハンバーガー開閉のドロップダウンにする */
@media (max-width: 599px) {
    .site-nav__toggle {
        display: inline-flex;
        /* ロゴの隣に検索窓が入るため、ハンバーガーは常に行の右端に固定する */
        order: 2;
        margin-left: auto;
    }

    /* 検索窓は1行目（ロゴ+ハンバーガー）に収まらないため、2行目に全幅で折り返す */
    .site-search {
        order: 3;
        flex: 1 1 100%;
        max-width: none;
    }

    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 16px 12px;
        background: var(--color-header-bg);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        font-size: 1rem;
    }

    .site-nav.is-open {
        display: flex;
    }

    .site-nav a {
        padding: 10px 4px;
        border-top: 1px solid rgba(58, 50, 48, 0.15);
    }

    .site-nav__account {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(58, 50, 48, 0.15);
        justify-content: space-between;
    }

    /* 🔴 管理画面にはハンバーガーボタン(data-nav-toggle)が無いため、上のdisplay:noneがそのまま
       効くとナビへの導線が完全に消える不具合があった（2026/08、タケシさんの実機報告で発覚）。
       管理画面ナビは元々「折り返して複数行表示」の設計（251行目のコメント参照）なので、
       ハンバーガー用のdisplay:none/position:absoluteを打ち消して常時表示に戻す。 */
    .site-header--admin .site-nav {
        display: flex;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 0 0;
        box-shadow: none;
        background: none;
        font-size: 0.85rem;
    }

    .site-header--admin .site-nav a {
        padding: 4px 2px;
        border-top: none;
    }
}

/* ログイン中（〜859px）: ユーザー名+ログアウトが加わりナビの必要幅が広がる（実測508px前後）ため、
   ゲスト向けの599pxブレークポイントだけでは760px幅のコンテナに検索窓を横並びで収めきれず
   ナビ全体が2行目に折り返ってしまう。ログイン時のみハンバーガー化の閾値を広げて対応する。
   ルール本体はゲスト向け(599px)ブロックと同一のため変更時は両方に反映すること。 */
@media (min-width: 600px) and (max-width: 859px) {
    .site-header--authed .site-nav__toggle {
        display: inline-flex;
        order: 2;
        margin-left: auto;
    }

    .site-header--authed .site-search {
        order: 3;
        flex: 1 1 100%;
        max-width: none;
    }

    .site-header--authed .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 16px 12px;
        background: var(--color-header-bg);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        font-size: 1rem;
    }

    .site-header--authed .site-nav.is-open {
        display: flex;
    }

    .site-header--authed .site-nav a {
        padding: 10px 4px;
        border-top: 1px solid rgba(58, 50, 48, 0.15);
    }

    .site-header--authed .site-nav__account {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(58, 50, 48, 0.15);
        justify-content: space-between;
    }
}

/* 視覚的には隠すがスクリーンリーダーには読み上げさせるラベル */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* メイン */
.site-main {
    max-width: 600px;
    margin: 0 auto;
    padding: 16px;
}

.site-footer {
    max-width: 600px;
    margin: 0 auto;
    padding: 24px 16px;
    text-align: center;
    color: var(--color-text-sub);
    font-size: 0.8rem;
}

.site-footer a {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min-link);
    color: var(--color-primary-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

h1 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 20px;
}

h2 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 14px;
}

/* カテゴリナビ */
.recent-broadcasts {
    margin-bottom: 28px;
}

/* トップページのカテゴリ別新着セクション：ポスター画像+指標帯の横スクロールカード
   （Filmarksアプリの検索結果カルーセルのレイアウトを参考。配色・ロゴは既存のTsubopin路線を維持し、
   横スクロール・カードの構成のみを踏襲）。works.php/search.php等で使う.work-list/.work-cardとは
   別クラスにして、既存ページのレイアウトに影響しないようにしている。 */
.poster-carousel {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 10px;
    margin: 0 -2px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

/* カードサイズは縮小版（旧116px幅の約69%＝80px）。★・💬・🔖の3指標を収める都合で
   フォントサイズ・余白もあわせて縮小している。 */
.poster-card {
    flex: 0 0 auto;
    /* 🔴 80pxだと「★3.5」+レビュー数+気になる数のようにコンテンツが多い場合に
       ぴったり埋まってしまい安全マージンが無かった（2026/08、実機スクリーンショットで
       右端の数字が見切れることを確認）。92pxに広げて余裕を持たせる。 */
    width: 92px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    /* Windowsのカラー絵文字（💬🔖等）はfont-sizeを小さくしても最小表示サイズが優先され、
       隣のカードにはみ出して見えることがある（2026/08、実機スクリーンショットで確認）。
       overflow: hiddenでカード境界を越えて描画されないようにする。 */
    overflow: hidden;
}

.poster-card__thumb .work-card__thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    border-radius: 6px;
    object-fit: cover;
}

.poster-card__thumb .work-card__thumb-icon {
    width: 18px;
    height: 18px;
}

.poster-card__thumb .work-card__thumb-title {
    font-size: 0.56rem;
    -webkit-line-clamp: 4;
}

/* 🔴 高さの確保（アラインメント）と省略記号「…」表示を2つの要素に分離した
   （2026/08、実機検証の末の最終形）。
   外側の.poster-card__title: 高さをpxで固定+overflow: hiddenするだけの
   単純な箱。相対単位や-webkit-box系を使わないため実機でも確実に28pxになる
   （box-align/box-packの軸取り違え等、-webkit-box依存の実装は3回試みて
   実機で安定しなかった。詳細はgit logの本行修正コミット参照）。
   内側の.poster-card__title-inner: -webkit-line-clampで省略記号を試みる。
   万一line-clampが効かない環境でも、外側のoverflow: hiddenが28pxで
   必ずクリップするため、最悪でも「揃ってはいるが…が付かない」状態までは
   保証される（アラインメント崩れは起きない）。 */
.poster-card__title {
    /* 行間が詰まって見える指摘・3行目の頭がわずかに見切れる指摘への対応
       （2026/08）。line-height 16px×2行分に高さを広げ、行間の余白と
       クリップの安全マージンを両方確保する。 */
    height: 32px;
    margin: 6px 0 2px;
    overflow: hidden;
}

.poster-card__title-inner {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 700;
    font-size: 11px;
    line-height: 16px;
    word-break: break-word;
}

.poster-card__date {
    font-size: 0.6rem;
    color: var(--color-text-sub);
    margin: 0 0 4px;
    min-height: 1.1em;
}

.poster-card__stats {
    display: flex;
    /* 🔴 space-betweenは末尾の要素をカードの右端ぴったりに配置するため、レビュー数等の
       桁が増えて内容の合計幅が80pxに近づくと、実機のフォント計測誤差で右端が
       クリップされる（overflow: hiddenの影響で数字が見切れる）ことがあった
       （2026/08、実機スクリーンショットで確認）。flex-startで左詰めにし、
       右側に必ず余白が残るようにする。 */
    justify-content: flex-start;
    gap: 4px;
    font-size: 0.52rem;
    font-weight: 700;
    color: var(--color-text-sub);
    margin-top: auto;
}

.poster-card__stat {
    white-space: nowrap;
}

/* 💬🔖等の絵文字はOSのカラー絵文字フォントによりfont-sizeを無視した大きさで描画され、
   狭いカードでは隣にはみ出して見えることがあった（2026/08、実機で確認）。
   SVGアイコン（render_card_stat_icon()）はこのサイズで確実に描画される。 */
.card-stat-icon {
    width: 9px;
    height: 9px;
    vertical-align: -1px;
    margin-right: 1px;
}

.poster-card__stat--rating {
    color: var(--color-star);
}

.recent-broadcasts h2 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.section-subtext {
    font-size: 0.85rem;
    color: var(--color-text-sub);
    margin-top: 4px;
    margin-bottom: 16px;
}

.recent-broadcasts__more {
    font-size: 0.8rem;
    font-weight: 400;
    white-space: nowrap;
}

.category-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.category-nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min-link);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.85rem;
}

/* フィルターフォーム */
.filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 12px;
}

.filter-form select {
    font-family: inherit;
    font-size: 0.85rem;
    min-height: var(--target-min);
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: #fff;
}

.filter-form__checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--color-text-sub);
}

.filter-form__search {
    flex: 1 1 100%;
    font-family: inherit;
    font-size: 0.85rem;
    min-height: var(--target-min);
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text);
}

/* 作品カード（filmarks.com 検索結果リスト表示を参考：サムネイル+情報の横並びカード、
   余白を広めに取りカード同士の間隔をはっきり分ける） */
.work-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.work-card {
    display: flex;
    gap: 14px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px;
}

.work-card__thumb {
    width: 72px;
    height: 72px;
    flex: none;
    border-radius: 8px;
    background: var(--color-star-bg);
    object-fit: cover;
}

/* 公式画像・肖像権のリスクを避けるため、image_url未設定の作品はGD等での画像生成ではなく
   カテゴリ別の落ち着いた中間色＋ラインアイコン＋作品タイトルのCSSプレースホルダーで代替する
   （この環境にGD拡張が無いため。Filmarksの「NoImage」表示を参考、2026/07/27刷新）。
   彩度・明度を抑えた「プレースホルダー専用配色」で、既存のカテゴリアクセントカラー
   （--color-primary等）とは別軸として新設した。 */
.work-card__thumb--placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    text-align: center;
    /* 寄席の緞帳を思わせる、ごく薄い斜線パターン（2026/08、提案A第1段階）。
       opacity 0.05相当の白線のみで、タイトル文字の可読性を妨げない程度に抑えている。 */
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 2px, transparent 2px, transparent 10px);
}

.work-card__thumb-icon {
    width: 20px;
    height: 20px;
    flex: none;
    color: rgba(255, 255, 255, 0.8);
}

.work-card__thumb-title {
    color: #fff;
    font-weight: 700;
    font-size: 0.6rem;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    /* Flexアイテムのmin-height既定値(auto)が、-webkit-line-clampで見た目上は
       省略されているはずの全文の高さを最小サイズとして扱ってしまい、タイトルが
       長い番組ほどサムネイル全体（.work-card__thumb--placeholder、display:flex）が
       縦に伸びてしまう不具合があった（2026/08、実機スクリーンショットで確認。
       Flexbox + line-clampの組み合わせでよく起きる既知の相互作用）。
       min-height: 0でFlexアイテムの既定の最小サイズ制約を外して防ぐ。 */
    min-height: 0;
}

/* 🔴 2026/08、category(tv/streaming/live)→medium(video/radio)移行の際に取り残されていたデッドCSS。
   --tv/--streaming/--liveは旧カテゴリ値で現在は使われず、video-medium作品のサムネイルが
   専用背景色を持たずベースの.work-card__thumb（--color-star-bg）にフォールバックしていた
   （2026/08デザイン修正で発覚）。--videoを新設して統一する。 */
.work-card__thumb--video {
    background-color: #A87C74;
}

.work-card__thumb--radio {
    background-color: #8078A0;
}

/* 疑似ポスターの配色バリエーション（2026/08、提案A第1段階）。タイトルのハッシュから決定的に
   選ばれる（render_work_thumb()参照）。mediumのアイコン形状で動画/音声は区別できるため、
   背景色はmediumと無関係な純粋なバリエーションとして与え、一覧が「色とりどりのポスター棚」に
   見えるようにする。--videoデフォルト・--radioデフォルトより後に書くことで上書きする。
   ブランドの臙脂（--color-primary系）と調和する、彩度・明度を抑えた8色。 */
.work-card__thumb--tone-0 { background-color: #A8574C; }
.work-card__thumb--tone-1 { background-color: #8C6B45; }
.work-card__thumb--tone-2 { background-color: #6B7A52; }
.work-card__thumb--tone-3 { background-color: #4F7A73; }
.work-card__thumb--tone-4 { background-color: #5C6B8A; }
.work-card__thumb--tone-5 { background-color: #6B5C8A; }
.work-card__thumb--tone-6 { background-color: #8A5C74; }
.work-card__thumb--tone-7 { background-color: #8C4A3E; }

/* work-detail__media内で出演者と横並びにするため固定サイズに（2026/07/28、Filmarks参考レイアウト刷新に伴い
   「幅50%」指定から変更。画像・プレースホルダーとも同じ固定サイズを使う）。
   🔴 .work-card__thumb.work-card__thumb--hero と2クラス連結にして詳細度を上げている
   （PC幅(min-width:600px)の.work-card__thumb{width:80px;height:80px}メディアクエリより
   後方に書かれた単一クラスの--heroだと、詳細度が同点のため負けてしまうため）。 */
.work-card__thumb.work-card__thumb--hero {
    width: 140px;
    height: 180px;
    flex: none;
    border-radius: var(--radius);
}

.work-card__thumb--hero.work-card__thumb--placeholder {
    gap: 12px;
    padding: 16px;
}

/* アイコンは一覧・トップページと同じ見た目（.work-card__thumb-iconの基本サイズ20px）をそのまま使う。
   装飾バッジは追加しない（2026/07/28、タケシさんのフィードバックにより撤回）。 */

.work-card__thumb--hero .work-card__thumb-title {
    font-size: 1rem;
    -webkit-line-clamp: 4;
}

.work-card__body {
    min-width: 0;
}

.work-card__title {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.4;
    margin: 0 0 6px;
}

.work-card__meta {
    font-size: 0.78rem;
    color: var(--color-text-sub);
    margin: 0 0 8px;
}

.work-card__stats {
    display: flex;
    gap: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-sub);
    margin: 4px 0 0;
}

.work-card__stat {
    white-space: nowrap;
}

.work-detail__parent-link {
    font-size: 0.85rem;
    color: var(--color-text-sub);
    margin: 10px 0 0;
}

.broadcast-episodes {
    margin: 20px 0;
}

.broadcast-episodes__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.broadcast-episodes__list a {
    display: block;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 0.9rem;
}

.broadcast-episodes__date {
    display: inline-block;
    color: var(--color-primary-dark);
    font-weight: 700;
    margin-right: 8px;
}

.badge {
    display: inline-block;
    background: var(--color-tint);
    color: var(--color-primary-dark);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.72rem;
    margin-right: 6px;
    text-decoration: none;
}

/* 星評価（filmarks.com 参考：星の並びだけでなく数値スコアも主役として見せる） */
.star-rating {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 1px;
    vertical-align: middle;
}

.star-rating__bg {
    color: var(--color-star-bg);
}

.star-rating__fg {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--color-star);
}

.star-rating__num {
    margin-left: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-star);
    vertical-align: middle;
}

.star-rating--empty {
    font-size: 0.78rem;
    color: var(--color-text-sub);
}

/* 作品詳細ページの主役評価: 大きめサイズ＋未評価分を白抜きにして塗り分けをはっきり見せる
   （2026/07/28、タケシさんの指示。他ページの.star-ratingは変更しない） */
.work-detail__rating .star-rating {
    font-size: 1.3rem;
}

.work-detail__rating .star-rating__bg {
    color: #fff;
}

.work-detail__rating .star-rating__num {
    font-size: 1.05rem;
    margin-left: 6px;
}

/* レビュー一覧（filmarks.com の作品ページ・タイムラインを参考：
   見出し（作品名/ユーザー名）+サブテキストを左、評価を右に配置するヘッダー構成。
   カード間の余白を広めに取り、カード内部も上下にゆとりを持たせる） */
.review-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.review-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px;
}

/* レビューカード共通ヘッダー（ユーザー名＋バッジ類。番組ページ内/外どちらでも使う、2026/07/28刷新） */
.review-card__feed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-bottom: 8px;
}

.review-card__work {
    font-weight: 700;
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.4;
}

/* 番組ページ以外でのみ表示する作品名（レビュー本文の直前） */
.review-card__feed-title {
    font-weight: 700;
    font-size: 0.92rem;
    margin: 0 0 6px;
}

.review-card__feed-title a {
    color: var(--color-text);
}

.review-card__feed-year {
    font-weight: 400;
    color: var(--color-text-sub);
    font-size: 0.82rem;
}

.review-card__rating {
    margin-bottom: 6px;
}

/* 番組ページ以外: 本文(左) + ポスター・アイコン(右)の横並び */
.review-card__feed-body {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.review-card__feed-text {
    flex: 1;
    min-width: 0;
}

.review-card__continue {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.review-card__feed-media {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.review-card__feed-media .work-card__thumb {
    width: 80px;
    height: auto;
    aspect-ratio: 2 / 3;
    border-radius: 6px;
    object-fit: cover;
}

.review-card__feed-media .work-card__thumb-icon {
    width: 18px;
    height: 18px;
}

.review-card__feed-media .work-card__thumb-title {
    font-size: 0.56rem;
    -webkit-line-clamp: 4;
}

.review-card__feed-actions {
    display: flex;
    gap: 6px;
}

/* work-detail__action-icon（作品ページのレビュー/気になるアイコン）を、この一覧カード用に
   小さく再利用する。詳細度を上げて必ず優先させる（.work-card__thumb--hero系と同じ理由）。 */
.review-card__feed-actions .work-detail__action-icon {
    min-width: 36px;
    min-height: 32px;
    padding: 4px 8px;
    font-size: 1rem;
}

.review__spoiler.is-hidden .review__comment {
    display: none;
}

.review__spoiler:not(.is-hidden) .spoiler-toggle,
.review__spoiler.is-revealed .spoiler-toggle {
    display: none;
}

.review__spoiler.is-hidden.is-revealed .review__comment {
    display: block;
}

/* ネタバレ表示切替ボタン（テキストボタン・Sサイズ相当） */
.spoiler-toggle {
    font-family: inherit;
}

.review__comment {
    font-size: 0.88rem;
    line-height: 1.7;
    white-space: pre-wrap;
}

.empty-state {
    text-align: center;
    color: var(--color-text-sub);
    padding: 32px 16px;
    font-size: 0.9rem;
}

/* ページネーション */
.pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    font-size: 0.85rem;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--target-min-link);
    min-height: var(--target-min-link);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: var(--color-card-bg);
}

.pagination .is-current {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* ============================================================
   フォーム部品共通（デジタル庁デザインシステム インプットテキスト準拠）
   - 項目ラベル／要否ラベル／サポートテキスト／入力フィールド／エラーテキストの
     アナトミーに合わせて構成する。
   - placeholderはサポートテキストの代替として使用しない。
   - 入力フィールドの高さはMediumサイズ（48px）を基本とする。
   ============================================================ */
.field-label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.required-badge,
.optional-badge {
    font-size: 0.72rem;
    font-weight: 700;
}

.required-badge {
    color: var(--color-danger);
}

.optional-badge {
    color: var(--color-text-sub);
    font-weight: 400;
}

.support-text {
    font-size: 0.78rem;
    color: var(--color-text-sub);
    font-weight: 400;
}

/* エラーテキストは地の文と区別するため冒頭に「＊」を付与する */
.error-text {
    font-size: 0.8rem;
    color: var(--color-danger);
    font-weight: 400;
    margin: 2px 0 0;
}

.error-text::before {
    content: "＊";
    margin-right: 2px;
}

/* 認証フォーム（登録・ログイン） */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
}

.auth-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--color-text-sub);
}

.auth-form input,
.auth-form select {
    font-family: inherit;
    font-size: 0.95rem;
    min-height: var(--btn-size-m);
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

.work-form__broadcast-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px;
    margin: 4px 0;
}

.work-form__broadcast-fields legend {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-sub);
    padding: 0 4px;
}

/* 放送曜日（帯番組対応の複数選択チェックボックス群、2026/08） */
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 4px;
}

.checkbox-group .review-form__checkbox {
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
}

/* Googleログインボタン（login.php）。2026/08のGoogleログイン一本化で
   register.phpが廃止され、ログイン/新規登録を行き来する.auth-switchは不要になった */
.login-google {
    margin-top: 16px;
}

.login-google a {
    text-decoration: none;
}

/* エラー・成功メッセージ */
.form-errors {
    background: var(--color-danger-bg);
    border: 1px solid #f3b9a8;
    color: var(--color-danger);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 14px;
    font-size: 0.85rem;
}

.form-errors ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

/* エラーテキストの「＊」プレフィックスはCSS生成コンテンツではなくHTML側の実テキストとして
   出力する（スクリーンリーダーでの読み上げを確実にするため） */

.form-success {
    background: var(--color-success-bg);
    border: 1px solid #a8d9b9;
    color: var(--color-success);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 14px;
    font-size: 0.85rem;
}

.form-success ul {
    margin: 8px 0 0;
    padding-left: 1.2em;
}

/* レビュー投稿・編集フォーム */
.my-review-form {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 20px;
}

.my-review-form h2 {
    margin-top: 0;
}

.review-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.review-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--color-text-sub);
}

.review-form textarea {
    font-family: inherit;
    font-size: 0.95rem;
    min-height: 96px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    resize: vertical;
}

/* 評価スライダー（0.0〜5.0、0.1刻み） */
.review-form__rating-field {
    position: relative;
}

.review-form__rating-value {
    align-self: flex-start;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.review-form__rating-field input[type="range"] {
    width: 100%;
    height: var(--target-min);
    accent-color: var(--color-primary);
}

.review-form__checkbox {
    flex-direction: row !important;
    align-items: center;
    min-height: var(--target-min);
    gap: 10px !important;
}

.review-form__checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: none;
}

.review-form__delete {
    margin-top: 12px;
}

/* 複数レビュー対応（2026/08）: 作品ページで自分のレビューカードの下に出す編集/削除リンク行 */
.review-card__own-actions {
    margin: -8px 0 12px;
    font-size: 0.82rem;
    color: var(--color-text-sub);
}

.review-card__own-actions a {
    color: var(--color-primary-dark);
}

.review-form__delete-btn-inline {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-danger);
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: underline;
}

.review-card__watched-date {
    font-size: 0.78rem;
    color: var(--color-text-sub);
    margin: 0 0 4px;
}

.badge--mine {
    background: var(--color-tint);
    color: var(--color-primary-dark);
}

/* マイページ */
.mypage-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.mypage-stats__item {
    flex: 1 1 80px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px;
    text-align: center;
}

.mypage-stats__num {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.mypage-stats__label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-sub);
    margin-top: 4px;
}

.mypage-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.mypage-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min-link);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.85rem;
}

.mypage-tabs a.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* 管理画面 */
.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.85rem;
    margin-bottom: 16px;
}

.admin-actions a {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min-link);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: 0.85rem;
    margin-bottom: 20px;
}

.admin-table th,
.admin-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    overflow-wrap: anywhere;
}

.admin-table th {
    background: var(--color-tint);
    color: var(--color-primary-dark);
    font-weight: 700;
    font-size: 0.78rem;
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-table__delete-form {
    margin: 0;
}

.admin-table__inline-forms {
    margin: 0;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.admin-table__delete-btn {
    font-family: inherit;
}

.admin-import-help {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: 0.85rem;
}

.admin-import-help__sample {
    background: var(--color-bg);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.8rem;
}

/* 配信先バッジ（作品詳細） */
.work-platforms {
    margin: 0 0 10px;
}

.badge--platform {
    background: var(--color-tint);
    color: var(--color-primary-dark);
}

/* プラットフォームのkind別バッジ色（2026/08、設計書2-2節）。
   「いつまで見られるか」で色分けする: 放送=青系／見逃し配信=黄系／常時配信=緑系。
   TVer（1週間で消える）とNetflix（ずっと見られる）を同じ色にすると意味が伝わらないための区別。 */
.badge--broadcast {
    background: #dbe7f5;
    color: #2c5a8c;
}

.badge--catchup {
    background: #f6ecc9;
    color: #8a6d1f;
}

.badge--ondemand {
    background: var(--color-tint);
    color: var(--color-primary-dark);
}

.badge--ended {
    background: #ececec;
    color: #888;
    text-decoration: line-through;
}

/* AIレビュアー（設計書15節A）: 一般ユーザーのレビューと視覚的に明確に区別する */
.badge--ai {
    background: #e8f0fe;
    color: #1a56b0;
    border: 1px solid #b3cdf5;
}

/* AIレビュアーD: レビュー傾向の要約（設計書15節） */
.review-summary {
    background: #f5f0e8;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    line-height: 1.6;
}

/* 作品詳細ページ: 画像+出演者の横並び、評価、アイコン行（Filmarksを参考に刷新、2026/07/28） */
.work-detail h1 {
    margin-bottom: 4px;
}

.work-detail__genre {
    margin: 0 0 10px;
}

.work-detail__media {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.work-detail__poster {
    flex: none;
}

.work-detail__cast {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 出演者チップ: カテゴリプレースホルダーと同じ配色ローテーションで色分け（2026/07/28、Filmarks参考）
   2026/08、演者ページ（performer.php）へのリンクに変更（設計書5節） */
.work-detail__cast-chip {
    display: block;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

.work-detail__cast-chip:hover,
.work-detail__cast-chip:focus-visible {
    opacity: 0.85;
}

.work-detail__cast-chip-guest {
    margin-left: 6px;
    font-size: 0.7rem;
    font-weight: 400;
    opacity: 0.85;
}

/* 大会もの（M-1/KOC等）のハブページ案内リンク・前年翌年ナビ（フェーズ1/2、2026/08） */
.work-detail__tournament-link,
.work-detail__tournament-nav {
    font-size: 0.85rem;
    margin: 4px 0 12px;
}

.work-detail__tournament-nav a,
.work-detail__tournament-link a {
    color: var(--color-primary-dark);
    text-decoration: none;
}

.work-detail__tournament-nav a:hover,
.work-detail__tournament-link a:hover {
    text-decoration: underline;
}

/* 大会もの（M-1/KOC等）の優勝・準優勝バッジ（フェーズ2、2026/08）。
   チップ背景は配色ローテーションで変わるため、半透明の白いピルで強調する方式にして
   どの背景色でも視認できるようにしている。 */
.work-detail__cast-chip-guest--winner,
.work-detail__cast-chip-guest--runner-up {
    opacity: 1;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.28);
    border-radius: 4px;
    padding: 1px 6px;
}

.work-detail__cast-chip:nth-of-type(4n+1) {
    background: #A87C74;
}

.work-detail__cast-chip:nth-of-type(4n+2) {
    background: #6E8981;
}

.work-detail__cast-chip:nth-of-type(4n+3) {
    background: #B79A6C;
}

.work-detail__cast-chip:nth-of-type(4n+4) {
    background: #8078A0;
}

.work-detail__cast-extra {
    display: none;
    flex-direction: column;
    gap: 6px;
}

.work-detail__cast-extra.is-expanded {
    display: flex;
}

.work-detail__list-toggle {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 4px 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    min-height: var(--target-min-link);
    font-family: inherit;
}

/* ポスター（.work-card__thumb.work-card__thumb--hero、140px幅）と横幅を合わせる（2026/07/28）。
   幅を変えたら合わせてここも変更すること。 */
.work-detail__rating {
    width: 140px;
    margin: 0 0 12px;
}

.work-detail__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 16px;
}

.work-detail__action-form {
    display: contents;
}

/* アイコンのみ・テキストラベルなしのコンパクトなボタン（2026/07/28、右詰め+縦を短く） */
.work-detail__action-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 56px;
    min-height: var(--target-min-link);
    padding: 6px 12px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text-sub);
    text-decoration: none;
    font-family: inherit;
    cursor: pointer;
}

.work-detail__action-icon-glyph {
    font-size: 1.3rem;
    line-height: 1;
}

.work-detail__action-icon-count {
    font-size: 0.7rem;
    font-weight: 700;
}

.work-detail__action-icon.is-active {
    background: var(--color-tint);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

/* レビュー投稿/編集フォームは初期状態で非表示。レビューアイコン・自分のレビューカードの
   クリックでJS側が.is-hiddenを外して表示する（2026/07/28、デフォルト非表示化の指示） */
#my-review-form.is-hidden {
    display: none;
}

/* 自分のレビューカード（タップ/Enterで#my-review-formへジャンプ） */
.review-card--own-editable {
    cursor: pointer;
}

.review-card--own-editable:hover,
.review-card--own-editable:focus-visible {
    border-color: var(--color-primary);
}

#my-review-form {
    scroll-margin-top: 16px;
}

/* 放送回一覧の「もっと見る」展開（3件を超える分を隠す） */
.broadcast-episodes__list .is-extra {
    display: none;
}

.broadcast-episodes__list.is-expanded .is-extra {
    display: list-item;
}

/* 管理画面：やることリスト（設計書16節） */
.admin-task-list {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.admin-task-list__heading {
    font-weight: 700;
    margin: 0 0 8px;
}

.admin-task-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-task-list li {
    padding: 4px 0;
}

.admin-task-list li .badge {
    margin-left: 6px;
}

/* 管理画面：見直し対象ハイライト */
.admin-legend {
    font-size: 0.78rem;
    color: var(--color-text-sub);
    margin: -8px 0 12px;
}

.admin-table__stale {
    color: var(--color-danger);
    font-weight: 700;
}

/* 管理画面：番組(親)/放送回(子)の親子関係表示 */
.admin-table__episode-marker {
    color: var(--color-text-sub);
}

.admin-table__episode-count {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.75rem;
    color: var(--color-primary-dark);
}

/* 管理画面：作品の配信先管理 */
.platform-manage {
    margin: 24px 0;
}

.platform-manage__list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.platform-manage__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.85rem;
}

.platform-manage__item--ended {
    opacity: 0.75;
}

.platform-manage__name {
    font-weight: 700;
    margin-right: 6px;
}

.platform-manage__meta {
    color: var(--color-text-sub);
    font-size: 0.75rem;
    margin-top: 4px;
}

.platform-manage__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.platform-manage__actions form {
    margin: 0;
}

.platform-add-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 12px;
}

.platform-add-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--color-text-sub);
}

.platform-add-form input {
    font-family: inherit;
    font-size: 0.88rem;
    min-height: var(--target-min);
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
}

/* 観たい（want）のブックマーク表示 */
.record-bookmark {
    display: inline-block;
    font-size: 0.82rem;
    color: var(--color-primary-dark);
    background: var(--color-tint);
    border-radius: 999px;
    padding: 2px 10px;
}

/* レビューへのイイね（設計書2-4節・7節）。自分のレビュー・未ログイン時は.review-card__like（静的表示）、
   それ以外はトグル可能な.review-card__like-btn。paddingでターゲット領域(44px)を確保する */
.review-card__like-form {
    display: inline-block;
    margin-top: 8px;
}

.review-card__like,
.review-card__like-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    min-height: var(--target-min);
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text-sub);
    font-family: inherit;
    font-size: 0.85rem;
    text-decoration: none;
    cursor: pointer;
}

.review-card__like--static {
    cursor: default;
}

.review-card__like-btn.is-active {
    background: var(--color-tint);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.review-card__like-count {
    font-weight: 700;
    font-size: 0.8rem;
}

/* コメント数バッジ（次フェーズ新機能）。.review-card__likeと同じ見た目に揃える */
.review-card__comment-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    margin-left: 6px;
    min-height: var(--target-min);
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text-sub);
    font-size: 0.85rem;
    text-decoration: none;
}

.review-card__comment-count-num {
    font-weight: 700;
    font-size: 0.8rem;
}

/* レビューへのコメントスレッド（次フェーズ新機能）。work.php上でのみ描画される */
.review-comments {
    margin: 4px 0 16px;
    padding-left: 12px;
    border-left: 2px solid var(--color-border);
}

.review-comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
}

.review-comment {
    font-size: 0.9rem;
    padding: 6px 0;
}

.review-comment__user {
    font-weight: 700;
    margin-right: 6px;
}

.review-comment-form textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 0.9rem;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    resize: vertical;
}

.review-comment-form {
    margin-top: 4px;
}

/* タイムライン：フォロー中ユーザーの記録を目立たせ、自分の記録は控えめにする。
   （主目的は「フォローしている人が何を観ているかの発見」なので他人の投稿を優先） */
.review-card--followee {
    border-left: 4px solid var(--color-primary);
    padding-left: 14px;
}

/* 自分の記録は通常の白背景で控えめに表示（強調しない） */
.review-card--mine {
    background: var(--color-card-bg);
    border-color: var(--color-border);
}

.review-card__mine-label {
    font-size: 0.72rem;
    color: var(--color-text-sub);
}

/* プロフィールページ */
.profile-header {
    margin-bottom: 20px;
}

.profile-header__note {
    font-size: 0.85rem;
    color: var(--color-text-sub);
    margin: 12px 0 0;
}

.profile-header__note a {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min-link);
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.follow-form {
    margin: 12px 0 0;
}

.follow-btn--following {
    background: #fff;
}

/* 検索結果ページ: タブ切替 */
.search-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}

.search-tabs__item {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min);
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text-sub);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.search-tabs__item.is-active {
    color: var(--color-primary-dark);
    border-bottom-color: var(--color-primary);
}

/* 検索結果: ユーザー一覧 */
.search-user-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.search-user-card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 12px 14px;
}

.search-user-card__name {
    font-weight: 700;
    font-size: 0.95rem;
    min-height: var(--target-min-link);
    display: inline-flex;
    align-items: center;
}

.search-user-card__stats {
    font-size: 0.78rem;
    color: var(--color-text-sub);
    flex: 1;
}

.search-user-card .follow-form {
    margin: 0;
}

/* タイムライン: いいね通知（次フェーズ新機能）。suggested-usersと同じカード見た目に揃える */
.like-notifications {
    margin-bottom: 20px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px;
}

.like-notifications__title {
    font-size: 0.9rem;
    margin: 0 0 10px;
}

.like-notifications__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.like-notifications__item {
    font-size: 0.88rem;
}

/* タイムライン: フォロー導線（最近レビューを投稿したユーザー） */
.suggested-users {
    margin-top: 20px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px;
}

.suggested-users__title {
    font-size: 0.9rem;
    margin: 0 0 10px;
}

.suggested-users__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.suggested-users__item a {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min);
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--color-tint);
    color: var(--color-primary-dark);
    font-size: 0.85rem;
    font-weight: 700;
}

/* PC幅（デザインはモバイル基準、中央寄せ1カラムのまま） */
@media (min-width: 600px) {
    .work-card__thumb {
        width: 80px;
        height: 80px;
    }
}

/* 演者ページ・演者一覧（2026/08、設計書5節）。
   アバターは名前のハッシュから色を決めるプレースホルダー（公式画像は著作権・肖像権・パブリシティ権の
   三重で使えないため。設計書13節）。 */
.performer-avatar {
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
}

.performer-avatar--unit {
    border-radius: 12px;
}

.performer-avatar--hero {
    width: 88px;
    height: 88px;
}

.performer-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.performer-avatar__initial {
    color: #fff;
    font-weight: 700;
    font-size: 1.4rem;
}

/* マイページ・プロフィールのアイコン+自己紹介文（次フェーズ新機能）。
   アバター自体は.performer-avatarを流用（丸型プレースホルダの見た目を揃えるため） */
.mypage-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.mypage-profile__username {
    font-weight: 700;
    margin: 0 0 4px;
}

.mypage-profile__bio {
    font-size: 0.9rem;
    color: var(--color-text-sub);
    white-space: pre-wrap;
}

.mypage-profile-edit {
    margin-bottom: 20px;
}

.mypage-profile-edit summary {
    cursor: pointer;
    color: var(--color-primary-dark);
    font-size: 0.9rem;
    padding: 6px 0;
}

.mypage-profile-edit form {
    margin-top: 10px;
}

.performer-detail__media {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.performer-detail__media h1 {
    margin: 0 0 4px;
}

.performer-detail__links {
    display: flex;
    gap: 12px;
    font-size: 0.85rem;
}

/* 番組公式サイトへのリンク（work.php、設計書11節） */
.work-detail__links {
    display: flex;
    gap: 12px;
    font-size: 0.85rem;
}

/* 放送・配信スケジュール（work.php、2026/08デザイン修正で新設） */
.work-detail__schedule {
    font-size: 0.85rem;
    color: var(--color-text-sub);
    margin: 4px 0 0;
}

/* ユーザープロフィールの外部リンク（user.php、UGCのためrender_user_links()がnofollow付与。設計書11節） */
.profile-header__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 0.85rem;
    margin: 4px 0 0;
}

.performer-detail__related {
    font-size: 0.85rem;
    color: var(--color-text-sub);
}

.performer-detail__related a {
    color: var(--color-primary-dark);
    margin-right: 8px;
}

.performer-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* PCで余白が目立つのを緩和するため、幅に余裕がある画面ではカードを複数列に並べる
   （2026/08デザイン修正）。サイト全体の.site-main{max-width:600px}制約はそのまま維持し、
   このリスト固有のCSSだけ変更する。 */
@media (min-width: 600px) {
    .performer-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px 12px;
    }
}

@media (min-width: 900px) {
    .performer-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* カード自体の見た目（背景・枠線）は<li>側が持つ。メンバー/所属ユニットのリンク行を
   同じカード内に追加するため、クリック領域（.performer-list__item）とカード外枠を分離した
   （2026/08デザイン修正。以前は<a>そのものがカード全体だったため、その内側に別のリンクを
   ネストできなかった）。 */
.performer-list__row {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px 14px;
}

.performer-list__item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--color-text);
}

.performer-list__name {
    font-weight: 700;
}

.performer-list__related {
    margin: 6px 0 0;
    padding-left: calc(56px + 12px); /* .performer-avatarの幅(56px)+gap(12px)に揃える */
    font-size: 0.78rem;
    color: var(--color-text-sub);
}

.performer-list__related a {
    margin-right: 8px;
}

/* ============================================================
   マーケティング導線（2026/08: トップの未ログイン向けバナー・初めての方へページ）
   ============================================================ */

/* トップページ最上部のサービス紹介バナー（未ログイン時のみ表示） */
.hero-banner {
    background: var(--color-header-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
}

.hero-banner__copy {
    margin: 0 0 6px;
    font-size: 1.25rem;
}

.hero-banner__sub {
    margin: 0 0 14px;
    font-size: 0.9rem;
    color: var(--color-text-sub);
}

.hero-banner__stats {
    margin: 0 0 14px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-primary);
}

.hero-banner__actions {
    margin: 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* 初めての方へ（about.php） */
.about-lead {
    font-size: 1.05rem;
    line-height: 1.9;
}

.about-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 16px 0;
    padding: 0;
    list-style: none;
}

.about-stats li {
    background: var(--color-header-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 12px 18px;
    text-align: center;
}

.about-stats__number {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
}

.about-stats__label {
    font-size: 0.8rem;
    color: var(--color-text-sub);
}

.about-cta {
    margin: 24px 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ============================================================
   SNS下書きページ（admin/sns_drafts.php、2026/08）
   ============================================================ */

.draft-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.draft-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 16px;
}

.draft-card__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.draft-card__label {
    font-weight: 700;
}

.draft-card__badge {
    font-size: 0.8rem;
    color: var(--color-text-sub);
}

.draft-card__badge--over {
    color: var(--color-danger);
    font-weight: 700;
}

.draft-card__text {
    width: 100%;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px;
    resize: vertical;
    margin-bottom: 8px;
}

.draft-card__image {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 8px;
}

.draft-card__note {
    font-size: 0.8rem;
    color: var(--color-text-sub);
    margin: 0 0 8px;
}

/* M-1・キングオブコント 歴代優勝者ハブページ（m1.php/koc.php、2026/08） */
.tournament-hub__intro {
    color: var(--color-text-sub);
    line-height: 1.7;
    margin-bottom: 20px;
}

.tournament-hub__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tournament-hub__row {
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
}

.tournament-hub__year-link {
    display: flex;
    align-items: baseline;
    gap: 8px;
    text-decoration: none;
    color: var(--color-text);
    font-weight: 700;
}

.tournament-hub__year-link:hover {
    color: var(--color-primary-dark);
}

.tournament-hub__year {
    color: var(--color-primary-dark);
    font-size: 0.9rem;
    white-space: nowrap;
}

.tournament-hub__title {
    font-size: 1rem;
}

.tournament-hub__result {
    margin: 6px 0 0;
}

.badge--winner {
    background: var(--color-tint-strong);
    color: var(--color-primary-darker);
    font-weight: 700;
}

.badge--runner-up {
    background: var(--color-tint);
    color: var(--color-primary-dark);
}

.badge--winner a,
.badge--runner-up a {
    color: inherit;
    text-decoration: underline;
}

.tournament-hub__finalist-count {
    font-size: 0.8rem;
    color: var(--color-text-sub);
    margin-left: 4px;
}

.tournament-hub__staff {
    font-size: 0.82rem;
    color: var(--color-text-sub);
    margin: 4px 0 0;
}