* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --font-sans: 'Inter', 'Noto Sans JP', 'Segoe UI', 'Hiragino Sans', system-ui, -apple-system, sans-serif;
    --color-bg: #f4f6fb;
    --color-surface: #ffffff;
    --color-surface-strong: #f8f9ff;
    --color-border: #e3e7f5;
    --color-border-strong: #d6dcf3;
    --color-text: #202334;
    --color-text-muted: #6b7285;
    --color-primary: #5c6ff0;
    --color-primary-strong: #4a5de0;
    --color-primary-soft: #eef1ff;
    --color-accent: #ff7ac3;
    /* rgba() 用（季節テーマで上書きする） */
    --color-primary-rgb: 92, 111, 240;
    --color-primary-strong-rgb: 74, 93, 224;
    --color-accent-rgb: 255, 122, 195;
    --color-success: #4caf50;
    --color-danger: #f44336;
    --shadow-soft: 0 6px 20px rgba(22, 33, 74, 0.12);
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-strong) 100%);
    /* ヘッダーは「白へ抜かない」近似色グラデ（季節で上書き） */
    --color-header-1: #3b4fdc;
    --color-header-2: #5c6ff0;
    /* 右側が薄くなりすぎないよう、終点も濃さを残す */
    --color-header-3: #6f86ff;
    --gradient-header: linear-gradient(120deg, var(--color-header-1) 0%, var(--color-header-2) 55%, var(--color-header-3) 100%);
    /* 固定ヘッダー: body padding-top 96px = .header の実効高さ目安。ロゴ行 = 96 - 上下padding(30) = 66px */
    --header-logo-slot-height: 66px;
}

/* ===== 季節テーマ（公開サイト） ===== */
:root[data-season-theme="spring"] {
    /* 春：桜ピンクベース（白へ抜かない近似グラデ） */
    --color-primary: #e45b98;
    --color-primary-strong: #b63b73;
    --color-primary-soft: #fff0f6;
    --color-accent: #ff9ac2;
    --color-header-1: #b63b73;
    --color-header-2: #e45b98;
    --color-header-3: #f06aa5;
    --color-primary-rgb: 228, 91, 152;
    --color-primary-strong-rgb: 182, 59, 115;
    --color-accent-rgb: 255, 154, 194;
    --color-bg: #fff7fb;
    --color-surface-strong: #fff3f9;
}
:root[data-season-theme="summer"] {
    /* 夏：緑ベース（鮮やかすぎない） */
    --color-primary: #16a34a;
    --color-primary-strong: #166534;
    --color-primary-soft: #ecfdf3;
    --color-accent: #34d399;
    --color-header-1: #166534;
    --color-header-2: #16a34a;
    --color-header-3: #21a85b;
    --color-primary-rgb: 22, 163, 74;
    --color-primary-strong-rgb: 22, 101, 52;
    --color-accent-rgb: 52, 211, 153;
    --color-bg: #f3fff7;
    --color-surface-strong: #effdf5;
}
:root[data-season-theme="fall"] {
    /* 秋：橙ベース */
    --color-primary: #f59e0b;
    --color-primary-strong: #b45309;
    --color-primary-soft: #fff7ed;
    --color-accent: #fbbf24;
    --color-header-1: #b45309;
    --color-header-2: #f59e0b;
    --color-header-3: #f2a51b;
    --color-primary-rgb: 245, 158, 11;
    --color-primary-strong-rgb: 180, 83, 9;
    --color-accent-rgb: 251, 191, 36;
    --color-bg: #fffbf3;
    --color-surface-strong: #fff7ea;
}
:root[data-season-theme="winter"] {
    /* 冬：水色ベース */
    --color-primary: #22c1dc;
    --color-primary-strong: #0e7490;
    --color-primary-soft: #ecfeff;
    --color-accent: #67e8f9;
    --color-header-1: #0e7490;
    --color-header-2: #22c1dc;
    --color-header-3: #34d2e8;
    --color-primary-rgb: 34, 193, 220;
    --color-primary-strong-rgb: 14, 116, 144;
    --color-accent-rgb: 103, 232, 249;
    --color-bg: #f1fdff;
    --color-surface-strong: #ecfbff;
}

/* 作品情報・レビューなどのアンカーリンクでフワッとスクロール */
html {
    scroll-behavior: smooth;
}

/* 画像：スムーズ補間（crisp-edges / -webkit-optimize-contrast は縮小サムネ向きで、拡大表示がジャギーになる） */
img {
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
}

/* 遅延読み込み画像のスタイル */
img[loading="lazy"] {
    content-visibility: auto;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* パンくず（全ページ共通） */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 14px;
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: normal;
}
.breadcrumb a {
    color: var(--color-primary-strong);
    text-decoration: none;
    font-weight: 600;
}
.breadcrumb a:hover {
    text-decoration: underline;
}
.breadcrumb-sep {
    color: #9ca3af;
}

/* ヘッダー（常に画面上部に固定・スクロールしても表示） */
.header {
    width: 100%;
    max-width: 100%;
    background: var(--gradient-header);
    background-color: var(--color-header-2);
    color: white;
    padding: 15px 0;
    box-shadow: 0 6px 24px rgba(41, 60, 124, 0.18);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    box-sizing: border-box;
    overflow: visible;
}

/* 固定ヘッダーの高さ分だけ本文を下にずらす（ロゴ大型化に合わせて確保） */
body.has-fixed-header {
    padding-top: 96px;
}

body.has-bottom-nav {
    padding-bottom: 0;
}

@media (max-width: 768px) {
    /*
     * 本文オフセット: common.js がヘッダー下端を測って --body-header-offset を設定（未設定時はフォールバック）
     * 旧 fixed 値 max(104px,…) は実ヘッダーより大きく、スライダー上に不自然な空きになっていた
     */
    body.has-fixed-header {
        padding-top: var(--body-header-offset, max(88px, calc(env(safe-area-inset-top, 0px) + 72px)));
    }

    /* 先頭スライダー：セクション＋ラッパーの上パディングが二重のため詰める */
    body.has-fixed-header .slider-section:first-of-type {
        padding-top: 0;
        padding-bottom: 8px;
    }

    body.has-fixed-header .slider-section:first-of-type .slider-wrapper {
        padding-top: 4px;
        padding-bottom: 8px;
    }

    body.has-fixed-header.has-header-compact .slider-section:first-of-type .slider-wrapper {
        padding-top: 2px;
        padding-bottom: 6px;
    }
}

.header-top {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 15px;
    box-sizing: border-box;
}

/* detail.php のフォールバックヘッダー専用: メニュー群を常に右寄せ */
.detail-fallback-header .header-top {
    justify-content: flex-start;
}
.detail-fallback-header .detail-fallback-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}
.detail-fallback-header .header-menu,
.detail-fallback-header .header-submenu {
    flex-shrink: 0;
}

/* 旧テンプレのキャッチコピーが残っていても表示しない */
.catch-copy {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    width: 1px !important;
    clip: rect(0, 0, 0, 0) !important;
}

.header-logo-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    min-width: 0;
}

/* スマホのみ：ロゴ右キャッチコピー（768px超では非表示） */
.header-mobile-tagline {
    display: none;
}

.logo {
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo.logo--image-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    line-height: 0;
    color: inherit;
    max-width: min(100%, min(720px, 94vw));
    overflow: visible;
}

.logo.logo--image-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 3px;
    border-radius: 10px;
}

.site-logo-img {
    display: block;
    box-sizing: border-box;
    /* 透過PNGの縦幅をヘッダー内スロットいっぱいに（余白のない素材は contain でそのまま拡大） */
    height: var(--header-logo-slot-height);
    max-height: var(--header-logo-slot-height);
    width: auto;
    max-width: min(720px, 94vw);
    object-fit: contain;
    object-position: left center;
    vertical-align: middle;
    background: transparent;
    background-color: transparent;
    image-rendering: auto;
}

.logo-icon {
    width: 28px;
    height: 28px;
    color: white;
}

.header-menu {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

/* ヘッダー検索 */
.header-search {
    flex: 1;
    min-width: 200px;
    max-width: 350px;
    margin: 0 10px;
    position: relative;
    overflow: visible;
}

/* 「🔍アニメを検索...」のうち「アニメ」部分をクリックしてモード切替 */
.search-input-line {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 0;
}

/* 検索対象ドロップダウン（アニメ / ユーザー） */
.header-search-dropdown {
    position: relative;
    flex-shrink: 0;
    z-index: 2;
}

.header-search-dropdown.is-open {
    z-index: 100200;
}

/* 「アニメ」のみ薄いピル枠（「を検索...」と同系の文字色で一体に見せる） */
.search-inline-mode {
    display: inline-flex;
    align-items: center;
    align-self: center;
    margin: 0;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 999px;
    padding: 2px 9px 2px 10px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.search-inline-mode:hover {
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.1);
}

.header-search-dropdown.is-open .search-inline-mode {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.search-inline-mode:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.75);
    outline-offset: 2px;
}

.header-search-mode-label {
    pointer-events: none;
}

/* 位置は script.js で position:fixed + top/left を付与（親の overflow でも隠れない） */
.header-search-mode-panel {
    min-width: 112px;
    padding: 6px;
    margin: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.header-search-mode-panel[hidden] {
    display: none !important;
}

.header-search-mode-option {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    transition: background 0.15s ease;
}

.header-search-mode-option:hover {
    background: var(--color-primary-soft);
}

.header-search-mode-option.is-active {
    background: rgba(var(--color-primary-rgb), 0.14);
    color: var(--color-primary-strong);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(var(--color-primary-rgb), 0.25);
}

.search-container {
    position: relative;
    display: flex;
    align-items: center;
    overflow: visible;
}

/* トグル＋入力を1つのピルに統合 */
.search-container--integrated {
    gap: 4px;
    padding: 3px 6px 3px 8px;
    border-radius: 25px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.15);
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.search-container--integrated:focus-within {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.search-icon {
    position: absolute;
    left: 12px;
    width: 18px;
    height: 18px;
    color: rgba(255, 255, 255, 0.7);
    pointer-events: none;
    z-index: 1;
}

.search-container--integrated .search-icon--inline {
    position: static;
    flex-shrink: 0;
    margin-left: 2px;
}

.search-input {
    width: 100%;
    padding: 8px 38px 8px 38px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 13px;
    transition: all 0.3s ease;
    outline: none;
}

.search-input--integrated {
    flex: 1;
    min-width: 0;
    width: auto;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 6px 30px 6px 0;
    border-radius: 0;
}

.search-input--integrated:focus {
    box-shadow: none !important;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.search-input:focus {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.search-container--integrated .search-input:focus {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.search-clear {
    position: absolute;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    z-index: 1;
}

.search-clear:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* 検索サジェスト（オートコンプリート） */
.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 6px;
    max-height: 360px;
    overflow-y: auto;
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 10050;
    display: none;
    border: 1px solid rgba(var(--color-primary-rgb), 0.20);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14), 0 0 0 3px rgba(var(--color-primary-rgb), 0.06);
}

.search-suggestions.show {
    display: block;
}

/* 固定オーバーレイ（body直下・スライダーより前面に表示） */
.search-suggestions-fixed {
    position: fixed !important;
    z-index: 100002 !important;
}

.search-suggestion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    transition: background 0.2s;
}

.search-suggestion-item:last-child {
    border-bottom: none;
}

.search-suggestion-item:hover {
    background: rgba(var(--color-primary-rgb), 0.08);
}

.search-suggestion-img {
    width: 48px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.search-suggestion-item--user .search-suggestion-img--user {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.search-suggestion-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.search-suggestion-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-suggestion-meta {
    font-size: 12px;
    color: var(--color-text-muted);
}

.search-suggestion-empty {
    padding: 20px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
}

/* 検索結果ページ：ユーザー一覧 */
.search-user-results {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 640px;
}

.search-user-result-item {
    border-radius: 12px;
    margin-bottom: 8px;
    border: 1px solid #eee !important;
}

.search-user-result-avatar-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--gradient-primary);
    opacity: 0.9;
}

/* ===== 検索結果ページ共通 ===== */
.search-page-container {
    min-height: calc(100vh - 72px);
    background: linear-gradient(160deg, var(--color-bg) 0%, rgba(var(--color-primary-rgb), 0.06) 45%, var(--color-bg) 100%);
}
.search-results-section {
    padding: 36px 0 60px;
}
.search-results-section > .container {
    max-width: 960px;
}
.search-page-title {
    position: relative;
    margin: 0 0 10px;
    padding: 6px 0 14px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.35;
    color: var(--color-text);
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.search-page-title::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 26px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-strong) 100%);
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.35);
    flex-shrink: 0;
}
.search-page-title::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(var(--color-primary-rgb), 0.45) 0%, rgba(var(--color-primary-strong-rgb), 0.25) 35%, transparent 100%);
    border-radius: 2px;
}

.search-page-form {
    display: none;
    margin: 14px 0 20px;
    padding: 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(22, 33, 74, 0.06);
}

.search-page-form-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-page-type-toggle {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
}

.search-page-type-btn {
    border: none;
    background: var(--color-surface-strong);
    color: var(--color-text-muted);
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.2;
}

.search-page-type-btn.is-active {
    background: var(--color-primary);
    color: #fff;
}

.search-page-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--color-text);
    background: var(--color-surface);
}

.search-page-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
}

.search-page-submit {
    border: none;
    border-radius: 10px;
    background: var(--gradient-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 14px;
    cursor: pointer;
    flex-shrink: 0;
}

.search-page-submit:hover {
    filter: brightness(0.98);
}
.search-empty-message {
    margin: 24px 0;
    padding: 28px 20px;
    background: var(--color-surface);
    border: 1px dashed var(--color-border-strong);
    border-radius: 12px;
    color: var(--color-text-muted);
    font-size: 14px;
    text-align: center;
}

/* ===== アニメ検索結果（横並びリスト表示） ===== */
.search-results-count {
    margin: 18px 0 14px;
    font-size: 13px;
    color: var(--color-primary-strong);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(var(--color-primary-rgb), 0.08);
}
.search-results-count::before {
    content: '🔍';
    font-size: 13px;
    line-height: 1;
}
.search-anime-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.anime-card.anime-card--list {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 20px;
    width: 100%;
    height: auto;
    min-height: 260px;
    background: #fff;
    border: 1px solid #e8e8ef;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    overflow: hidden;
}
.anime-card.anime-card--list:hover {
    transform: translateY(-2px);
    border-color: #cbd4ff;
    box-shadow: 0 8px 22px rgba(102, 126, 234, 0.14);
}
.anime-card.anime-card--list .anime-card-image {
    width: 180px;
    height: 260px;
    min-height: 260px;
    flex: 0 0 180px;
    border-radius: 10px;
    overflow: hidden;
    background: #f4f5fb;
    position: relative;
}
.anime-card.anime-card--list .anime-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.anime-card.anime-card--list .anime-card-content {
    padding: 4px 4px 4px 0;
    gap: 12px;
    min-width: 0;
}
.search-anime-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f5;
}
.search-anime-title-row .anime-title-link {
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
}
.search-anime-title {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.35;
    color: #1a1a1a;
    margin: 0 0 6px;
    padding: 0;
    min-height: 0;
    background: transparent;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
    letter-spacing: 0.01em;
}
.search-anime-title-row .anime-title-link:hover .search-anime-title {
    color: #5568d3;
}
.search-anime-status {
    flex-shrink: 0;
}
.search-anime-score-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    margin-top: 2px;
}
.anime-card.anime-card--list .anime-score.search-anime-score {
    flex: 0 0 auto;
}
.search-anime-meta-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    flex: 1 1 240px;
    min-width: 0;
}
.search-anime-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #333;
    background: #f5f7ff;
    border: 1px solid #e4e8f7;
    border-radius: 8px;
    padding: 5px 10px;
    max-width: 100%;
}
.search-anime-meta-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.5px;
    padding: 2px 6px;
    background: var(--color-primary-soft);
    border-radius: 4px;
    flex-shrink: 0;
}
.search-anime-meta-value {
    font-weight: 600;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}
.search-anime-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.search-anime-genre-tag {
    display: inline-block;
    padding: 4px 10px;
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}
.search-anime-synopsis {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    color: #555;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 768px) {
    .anime-card.anime-card--list {
        grid-template-columns: 120px 1fr;
        gap: 14px;
        padding: 12px;
        min-height: 0;
    }
    .anime-card.anime-card--list .anime-card-image {
        width: 120px;
        height: 170px;
        min-height: 170px;
        flex-basis: 120px;
    }
    .search-anime-title {
        font-size: 20px;
        min-height: 0;
        padding: 0;
    }
    .search-anime-title-row {
        gap: 10px;
        padding-bottom: 8px;
    }
    .search-anime-score-meta {
        gap: 10px 12px;
    }
    .search-anime-meta-list {
        gap: 5px 8px;
    }
    .search-anime-meta-item {
        font-size: 12px;
        padding: 4px 8px;
    }
    .search-anime-meta-value {
        max-width: 140px;
    }
    .search-anime-synopsis {
        font-size: 12.5px;
        -webkit-line-clamp: 3;
    }
}

@media (max-width: 480px) {
    .anime-card.anime-card--list {
        grid-template-columns: 96px 1fr;
        gap: 10px;
        padding: 10px;
    }
    .anime-card.anime-card--list .anime-card-image {
        width: 96px;
        height: 136px;
        min-height: 136px;
        flex-basis: 96px;
    }
    .anime-card.anime-card--list .favorite-btn {
        width: 28px;
        height: 28px;
        font-size: 16px;
        top: 6px;
        right: 6px;
    }
    .search-anime-title {
        font-size: 17px;
    }
    .search-anime-status .status-main-btn {
        min-width: 56px;
        padding: 6px 8px;
    }
    .search-anime-meta-value {
        max-width: 110px;
    }
}

/* モバイル検索サジェスト */
.mobile-search-suggestions {
    max-height: 280px;
    z-index: 10050;
}

.menu-item {
    color: white;
    text-decoration: none;
    padding: 9px 14px;
    border-radius: 10px;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    position: relative;
    font-size: 14px;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

.menu-item:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.menu-icon {
    width: 16px;
    height: 16px;
    color: white;
    flex-shrink: 0;
}

.header-submenu {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.submenu-item {
    color: white;
    text-decoration: none;
    padding: 9px 13px;
    border-radius: 10px;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.24);
    font-size: 13px;
    white-space: nowrap;
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

.submenu-item:hover {
    background-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ヘッダー「マイページ」横：DM 未読（丸数字） */
.header-dm-unread-badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    background: linear-gradient(135deg, #ff6b9d 0%, #ff8e53 100%);
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    box-sizing: border-box;
}

.header-dm-unread-badge.header-dm-unread-badge--visible {
    display: inline-flex;
}

.mobile-menu-item .header-dm-unread-badge--mobile {
    margin-left: auto;
}

.submenu-icon {
    width: 14px;
    height: 14px;
    color: white;
    flex-shrink: 0;
}

.burger-menu {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    z-index: 1001;
    position: relative;
}

.burger-menu span {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 3px 0;
    transition: 0.3s;
    border-radius: 2px;
}

/* スマホのみ表示（768px以下）。PC・タブレット769px〜では非表示のまま */
.header-mobile-search-link {
    display: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-shrink: 0;
}

.header-mobile-search-link__icon {
    width: 22px;
    height: 22px;
    display: block;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.burger-menu.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.burger-menu.active span:nth-child(2) {
    opacity: 0;
}

.burger-menu.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* モバイルメニュー */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    height: 100vh;
    background: var(--color-surface);
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu-content {
    padding: 80px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 16px;
    border-radius: 8px;
    transition: all 0.2s;
    font-weight: 500;
}

.mobile-menu-item:hover {
    background-color: rgba(var(--color-primary-rgb), 0.08);
    transform: translateX(4px);
}

.mobile-menu-icon {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.mobile-menu-divider {
    height: 1px;
    background-color: rgba(var(--color-primary-rgb), 0.16);
    margin: 12px 0;
}

/* モバイルメニュー内検索 */
.mobile-search-section {
    padding: 0 20px 20px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 12px;
}

/* 768px 以下はヘッダーの検索アイコンへ集約。769〜1200px は従来どおりドロワー内検索 */
.mobile-search-section.mobile-search-section--nav-drawer {
    display: block;
}

@media (max-width: 768px) {
    .mobile-search-section.mobile-search-section--nav-drawer {
        display: none !important;
    }
}

.mobile-search-container {
    position: relative;
    display: flex;
    align-items: center;
}

/* モバイル：トグル＋入力を1ピルに統合 */
.mobile-search-container--integrated {
    gap: 4px;
    padding: 4px 8px;
    border-radius: 25px;
    border: 2px solid var(--color-border);
    background: var(--color-surface-strong);
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.mobile-search-container--integrated:focus-within {
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.mobile-search-container--integrated .mobile-search-icon--inline {
    position: static;
    flex-shrink: 0;
    margin-left: 2px;
}

.mobile-search-input--integrated {
    flex: 1;
    min-width: 0;
    width: auto;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 10px 36px 10px 0;
    border-radius: 0;
}

.mobile-search-input--integrated:focus {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mobile-search-container--integrated .mobile-search-input:focus {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.mobile-search-container--integrated .search-inline-mode {
    color: var(--color-text-muted);
    border: 1px solid rgba(var(--color-primary-rgb), 0.35);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.mobile-search-container--integrated .search-inline-mode:hover {
    color: var(--color-text);
    border-color: rgba(var(--color-primary-rgb), 0.55);
    background: #fff;
}

.mobile-search-container--integrated .header-search-dropdown.is-open .search-inline-mode {
    color: var(--color-primary-strong);
    border-color: rgba(var(--color-primary-rgb), 0.65);
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
}

.mobile-search-container--integrated .header-search-mode-option {
    color: var(--color-text);
}

.mobile-search-container--integrated .mobile-search-clear {
    right: 8px;
}

.mobile-search-icon {
    position: absolute;
    left: 12px;
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
    pointer-events: none;
    z-index: 1;
}

.mobile-search-input {
    width: 100%;
    padding: 12px 40px 12px 40px;
    border: 2px solid var(--color-border);
    border-radius: 25px;
    background: var(--color-surface-strong);
    color: var(--color-text);
    font-size: 14px;
    transition: all 0.3s ease;
    outline: none;
}

.mobile-search-input::placeholder {
    color: var(--color-text-muted);
}

.mobile-search-input:focus {
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.mobile-search-clear {
    position: absolute;
    right: 12px;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: var(--color-text-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    z-index: 1;
}

.mobile-search-clear:hover {
    background: rgba(var(--color-primary-rgb), 0.10);
    color: var(--color-text);
}

/* モバイルメニューのオーバーレイ */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 999;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ボトムナビ（スマホ限定） */
.bottom-nav {
    display: none;
}

/* スライダーセクション */
.slider-section {
    background: linear-gradient(180deg, #f5f5f5 0%, #e0e0e0 100%);
    padding: 12px 0 10px;
    width: 100%;
    overflow: hidden;
}

.slider-container {
    width: 100%;
    margin: 0;
    position: relative;
    padding: 0;
}

.slider-wrapper {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    scroll-behavior: auto;
    gap: 20px;
    padding: 12px 0 10px;
    position: relative;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.slider-wrapper::-webkit-scrollbar {
    display: none;
}

.slide-item {
    flex: 0 0 auto;
    width: 150px;
}

/* インライン a ＋ img の行ボックスによる上下のすき間を防ぐ */
.slide-item > a {
    display: block;
    line-height: 0;
}

.slide-item img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    height: auto;
    max-height: 220px;
    object-fit: cover;
    object-position: center center;
    background: #e8eaef;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
    transition: transform 0.3s;
    cursor: pointer;
}

.slide-item img:hover {
    transform: scale(1.05);
}

@media (hover: none) {
    .slide-item img:hover {
        transform: none;
    }
}


/* シーズン別アニメセクション */
.season-section {
    padding: 40px 0;
    background: linear-gradient(180deg, var(--color-surface-strong) 0%, var(--color-surface) 100%);
}

.season-section-title {
    text-align: center;
    font-size: 28px;
    margin-bottom: 24px;
    color: var(--color-primary);
    position: relative;
    padding-bottom: 12px;
}

.season-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-strong) 100%);
    border-radius: 2px;
}

.season-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.season-tab {
    display: inline-block;
    padding: 10px 18px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    color: #555;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
}

.season-tab:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.season-tab.active {
    background: var(--gradient-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.season-current-label {
    text-align: center;
    font-size: 18px;
    color: #666;
    margin-bottom: 24px;
}

.season-anime-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
    justify-items: center;
}

.season-empty {
    text-align: center;
    padding: 40px 20px;
    color: #888;
    grid-column: 1 / -1;
}

/* ランキングセクション（シーズンページと同じカード幅・グリッド） */
.ranking-section {
    padding: 40px 0;
    background-color: #fff;
}

/* 最大5列・カード幅を抑えて画像が大きくなりすぎないように */
.ranking-section .anime-cards,
.recommendation-section .anime-cards {
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
    max-width: 1100px;  /* 5×約200px + 余白で画像を適度なサイズに */
    margin-left: auto;
    margin-right: auto;
}

/* TOPページのカード画像は縦長比率を保つ（シーズンと同じ） */
.ranking-section .anime-card-image,
.recommendation-section .anime-card-image {
    height: auto;
    min-height: 0;
    flex: none;
    aspect-ratio: 2 / 3;
}

.ranking-section .anime-card-image img,
.recommendation-section .anime-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    vertical-align: bottom;
}

.ranking-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
}

.ranking-title {
    width: 100%;
    text-align: center;
    font-size: 32px;
    margin: 0;
    color: var(--color-primary);
    position: relative;
    padding-bottom: 15px;
}

.ranking-actions {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 4px;
}

.ranking-actions .ranking-all-link {
    margin-top: 10px;
}

.ranking-cards-row {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.ranking-cards-row .anime-cards {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

.ranking-load-more-wrap {
    padding: 20px 16px 8px;
    text-align: center;
}

.ranking-load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: var(--gradient-primary);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(var(--color-primary-rgb), 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.ranking-load-more-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.45);
}

.ranking-load-more-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.ranking-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-strong) 100%);
    border-radius: 2px;
}

.ranking-all-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--gradient-primary);
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s, transform 0.2s;
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.35);
}

.ranking-all-link:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    color: #fff;
}

.ranking-all-link:active {
    transform: translateY(0);
}

/* オススメセクション */
.recommendation-section {
    padding: 40px 0;
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-strong) 100%);
}

.recommendation-title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 30px;
    color: var(--color-primary);
    position: relative;
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.recommendation-icon {
    width: 32px;
    height: 32px;
    color: #ffd700;
    filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));
}

.recommendation-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #ffd700 0%, #ffa500 100%);
    border-radius: 2px;
}

.anime-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
    padding: 20px 0;
    overflow: visible;
}

.anime-card {
    background: white;
    border-radius: 12px;
    overflow: visible;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.anime-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.anime-card-image {
    position: relative;
    width: 100%;
    height: 300px;
    min-height: 300px;
    flex: 0 0 300px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.anime-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.rank-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    z-index: 5;
}

.rank-badge.rank-1 {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    width: 50px;
    height: 50px;
    font-size: 24px;
}

.rank-badge.rank-2 {
    background: linear-gradient(135deg, #C0C0C0 0%, #808080 100%);
    box-shadow: 0 0 15px rgba(192, 192, 192, 0.5);
    width: 50px;
    height: 50px;
    font-size: 24px;
}

.rank-badge.rank-3 {
    background: linear-gradient(135deg, #CD7F32 0%, #8B4513 100%);
    box-shadow: 0 0 15px rgba(205, 127, 50, 0.5);
    width: 50px;
    height: 50px;
    font-size: 24px;
}

.favorite-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #e0e0e0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    transition: all 0.3s;
    z-index: 5;
    color: #666;
    line-height: 1;
}

.favorite-btn:hover {
    background: white;
    border-color: var(--color-primary);
    transform: scale(1.1);
    color: var(--color-primary);
}

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

.anime-card-content {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
    position: relative;
}

.anime-title {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    padding: 8px 12px;
    color: #333;
    line-height: 1.4;
    /* 1行・2行いずれでもスコア・ステータスボタンの縦位置を2行時で揃える（2行分の高さを確保） */
    min-height: 61px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    border-radius: 8px;
    background: transparent;
}

.anime-score-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.anime-score-section {
    flex: 1;
    min-width: 0;
}

/* スコア表示（TOP・詳細・カード共通：角丸ボックス＋評価数ピル＋★＋数値） */
.anime-score {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 14px;
    padding-top: 18px;
    overflow: visible;
    border-radius: 10px;
    background: linear-gradient(135deg, #fffbf0 0%, #fff0d0 50%, #ffe8b8 100%);
    border: 1px solid rgba(255, 193, 7, 0.35);
    box-shadow: 0 2px 10px rgba(255, 179, 71, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    color: #4a3600;
    font-weight: 600;
}

.anime-score-count-badge {
    position: absolute;
    top: -8px;
    left: 12px;
    background: linear-gradient(135deg, #e69500 0%, #ff9800 50%, #ffb347 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(230, 149, 0, 0.45);
    white-space: nowrap;
}

.star-icon {
    font-size: 22px;
    color: #ff9800;
    filter: drop-shadow(0 1px 2px rgba(255, 152, 0, 0.4));
    line-height: 1;
}

.anime-score-value {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    min-width: 40px;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.rating-average.anime-score--unrated,
.anime-score-value .anime-score--unrated {
    color: #9ca3af;
    font-weight: 600;
    letter-spacing: 0.12em;
    white-space: nowrap;
    display: inline-block;
}

.anime-score-no-rating {
    font-size: 11px;
    color: #888;
    font-weight: 500;
    margin-left: 4px;
}

.status-selector {
    position: relative;
    flex-shrink: 0;
}

.status-main-btn {
    padding: 8px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background-color: white;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;
    color: #666;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-weight: 500;
    position: relative;
    min-width: 70px;
    box-sizing: border-box;
}

.status-main-btn:hover {
    border-color: var(--status-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.status-icon {
    font-size: 18px;
    line-height: 1;
}

.status-label {
    font-size: 11px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.status-label:empty {
    display: none;
}

.status-main-btn:has(.status-label:empty) {
    gap: 0;
}

/* ポップアップオーバーレイ */
.status-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(4px);
}

.status-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ポップアップ */
.status-popup {
    background: var(--color-surface);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.status-popup-overlay.active .status-popup {
    transform: scale(1) translateY(0);
}

.status-popup-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--gradient-primary);
    color: white;
}

.status-popup-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.status-popup-close {
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.status-popup-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.status-popup-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

.status-popup-option {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid var(--color-border);
    border-radius: 12px;
    background-color: var(--color-surface);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 500;
    text-align: left;
}

.status-popup-option:hover {
    border-color: var(--status-color);
    background-color: rgba(var(--color-primary-rgb), 0.08);
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.status-popup-option.selected {
    background-color: var(--status-color);
    border-color: var(--status-color);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.status-popup-option.selected .status-icon,
.status-popup-option.selected .status-label,
.status-popup-option.selected .status-check {
    color: white;
}

.status-popup-option .status-icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
}

.status-popup-option .status-label {
    flex: 1;
    font-size: 16px;
}

.status-popup-option .status-check {
    color: var(--status-color);
    font-weight: bold;
    font-size: 20px;
}

.status-popup-option.selected .status-check {
    color: white;
}

/* マイスコア編集ポップアップ */
.my-score-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(4px);
}

.my-score-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.my-score-popup {
    background: var(--color-surface);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 600px;
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.my-score-popup-overlay.active .my-score-popup {
    transform: scale(1) translateY(0);
}

.my-score-popup-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--gradient-primary);
    color: white;
}

.my-score-popup-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.my-score-popup-close {
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.my-score-popup-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.my-score-popup-content {
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-height: 80vh;
    overflow-y: auto;
}

.my-score-form-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.my-score-form-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 4px;
}

.my-score-form-label-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin-bottom: 8px;
}

.my-score-form-label-row .my-score-form-label {
    margin-bottom: 0;
    flex: 0 0 auto;
}

.my-score-season-best-toolbar {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.my-score-season-best-btn {
    width: auto;
    max-width: 100%;
    padding: 7px 14px;
    border-radius: 999px;
    border: 2px solid #f59e0b;
    background: #fff;
    color: #b45309;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.my-score-season-best-btn:hover:not(:disabled) {
    background: #fffbeb;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.18);
}

.my-score-season-best-btn.is-active {
    background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
    border-color: #d97706;
    color: #92400e;
    opacity: 1;
    cursor: pointer;
}

.my-score-season-best-btn:disabled:not(.is-active) {
    opacity: 0.55;
    cursor: not-allowed;
    border-color: #d6d3d1;
    color: #78716c;
    background: #f5f5f4;
}

.my-score-season-best-btn-icon {
    font-size: 14px;
    line-height: 1;
    flex: 0 0 auto;
}

.my-score-season-best-btn-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-score-season-best-detail-wrap {
    position: relative;
    flex: 0 0 auto;
}

.my-score-season-best-detail-btn {
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid #d6d3d1;
    background: #fff;
    color: #57534e;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.my-score-season-best-detail-btn:hover,
.my-score-season-best-detail-btn:focus-visible {
    background: #fafaf9;
    border-color: #f59e0b;
    color: #b45309;
    outline: none;
}

.my-score-season-best-detail-btn[aria-expanded="true"] {
    background: #fffbeb;
    border-color: #f59e0b;
    color: #b45309;
}

.my-score-season-best-detail-popover {
    position: fixed;
    z-index: 100001;
    width: min(320px, calc(100vw - 24px));
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: #fff;
    box-shadow: 0 12px 32px rgba(32, 36, 58, 0.16);
    color: #44403c;
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
    box-sizing: border-box;
    pointer-events: auto;
}

.my-score-season-best-detail-popover[hidden] {
    display: none !important;
}

.my-score-season-best-detail-popover.is-visible {
    animation: myScoreSeasonBestPopoverIn 0.16s ease;
}

@keyframes myScoreSeasonBestPopoverIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.my-score-season-best-detail-title {
    font-size: 14px;
    font-weight: 800;
    color: #b45309;
    margin-bottom: 8px;
}

.my-score-season-best-detail-popover p {
    margin: 0 0 8px;
}

.my-score-season-best-detail-list {
    margin: 0 0 8px;
    padding-left: 1.2em;
}

.my-score-season-best-detail-list li {
    margin-bottom: 4px;
}

.my-score-season-best-detail-current {
    margin-top: 8px !important;
    padding-top: 8px;
    border-top: 1px solid #f5f5f4;
    font-size: 12px;
}

.my-score-season-best-detail-warning {
    color: #b45309;
    font-size: 12px;
    font-weight: 700;
}

.my-score-season-best-note {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.5;
    color: #78716c;
}

.my-score-season-best-section {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.my-score-season-best-toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.my-score-season-best-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.my-score-season-best-toggle-box {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border-radius: 6px;
    border: 2px solid #f59e0b;
    background: #fff;
    position: relative;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.my-score-season-best-toggle input:checked + .my-score-season-best-toggle-box {
    background: #f59e0b;
    border-color: #d97706;
}

.my-score-season-best-toggle input:checked + .my-score-season-best-toggle-box::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.my-score-season-best-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.45;
}

.my-score-season-best-toggle-text strong {
    color: #b45309;
}

.my-score-season-best-toggle-text small {
    font-size: 12px;
    color: #78716c;
    font-weight: 500;
}

.my-score-season-best-note {
    margin: 10px 0 0;
    padding-left: 34px;
    font-size: 12px;
    line-height: 1.5;
    color: #78716c;
}

.detail-my-score-season-best-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #92400e;
    background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
    border: 1px solid rgba(245, 158, 11, 0.45);
    vertical-align: middle;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-my-score-value-display--season-best .detail-my-score-number {
    color: #b45309;
}

.my-score-slider:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.my-score-rating-value:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.my-score-status-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.my-score-status-option {
    padding: 14px 16px;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.my-score-status-option:hover {
    border-color: var(--status-color, var(--color-primary));
    background: var(--color-surface-strong);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.my-score-status-option.selected {
    background: var(--status-color, var(--color-primary));
    border-color: var(--status-color, var(--color-primary));
    color: white;
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
}

.my-score-status-option .status-icon {
    font-size: 18px;
    line-height: 1;
}

.my-score-status-option .status-label {
    font-size: 14px;
}

.my-score-episode-input-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--color-surface-strong);
    border: 2px solid var(--color-border);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.my-score-episode-input-container:focus-within {
    border-color: var(--color-primary);
    background: white;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.my-score-episode-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    outline: none;
    text-align: center;
    width: 80px;
}

.my-score-episode-input::-webkit-inner-spin-button,
.my-score-episode-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.my-score-episode-input[type=number] {
    -moz-appearance: textfield;
}

.my-score-episode-max {
    font-size: 14px;
    color: #999;
    font-weight: 500;
    white-space: nowrap;
}

.my-score-episode-open-btn {
    margin-top: 10px;
    border: none;
    border-radius: 8px;
    padding: 9px 12px;
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.my-score-episode-open-btn:hover {
    background: rgba(var(--color-primary-rgb), 0.18);
}

.my-score-episode-score-section {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 12px;
    background: var(--color-surface);
}

.my-score-episode-score-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #666;
}

.my-score-episode-apply-average-btn {
    border: none;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.my-score-episode-save-btn {
    background: #eef2ff;
    color: #3f3aac;
}

.my-score-episode-clear-btn {
    background: #f4f4f5;
    color: #52525b;
}

.my-score-episode-apply-average-btn {
    width: 100%;
    background: var(--color-primary);
    color: #fff;
}

.my-score-episode-score-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.my-score-episode-score-row-item {
    display: grid;
    grid-template-columns: 46px 1fr 40px 58px;
    align-items: center;
    gap: 8px;
}

.my-score-episode-row-label {
    font-size: 12px;
    color: #444;
    font-weight: 600;
}

.my-score-episode-row-slider {
    width: 100%;
}

.my-score-episode-row-value {
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary-strong);
}

.my-score-episode-row-clear {
    border: 1px solid #ddd;
    background: #fff;
    color: #666;
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 11px;
    cursor: pointer;
}

.my-score-episode-load-more-btn {
    width: 100%;
    border: 1px solid #d9d9ea;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
    background: #fff;
    color: #4b5563;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.my-score-date-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.my-score-date-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.my-score-date-label {
    font-size: 12px;
    color: #666;
    font-weight: 600;
}

.my-score-date-input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    background: white;
    transition: all 0.3s ease;
    appearance: none;
}

.my-score-date-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

/* 日付入力フィールドの日本語対応 */
/* 日本語カレンダー */
.japanese-date-picker-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.japanese-date-display {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    background: white;
    min-height: 20px;
    display: flex;
    align-items: center;
}

.japanese-date-calendar-btn {
    padding: 10px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.japanese-date-calendar-btn:hover {
    border-color: var(--color-primary);
    background: var(--color-surface-strong);
}

.japanese-calendar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 100000;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

.japanese-calendar-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.japanese-calendar {
    position: fixed;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    padding: 20px;
    width: 300px;
    z-index: 100001;
    pointer-events: auto;
    max-height: calc(100vh - 20px);
    overflow-y: auto;
}

.japanese-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.japanese-calendar-nav {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--color-primary);
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.japanese-calendar-nav:hover {
    background: var(--color-surface-strong);
    transform: scale(1.1);
}

.japanese-calendar-nav:active {
    transform: scale(0.95);
}

.japanese-calendar-month-year {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}

.japanese-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.japanese-calendar-weekday {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    padding: 8px 0;
}

.japanese-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.japanese-calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.japanese-calendar-day.empty {
    cursor: default;
}

.japanese-calendar-day:hover:not(.empty) {
    background: var(--color-surface-strong);
    color: var(--color-primary);
}

.japanese-calendar-day.selected {
    background: var(--color-primary);
    color: white;
    font-weight: 700;
}

.my-score-slider-container {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 0;
}

.my-score-slider {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: #e0e0e0;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.3s ease;
    position: relative;
}

.my-score-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-primary);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), 0.4);
    transition: all 0.3s ease;
    margin-top: -8px;
    position: relative;
}

.my-score-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 10px rgba(var(--color-primary-rgb), 0.5);
}

.my-score-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-primary);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), 0.4);
    transition: all 0.3s ease;
}

.my-score-slider::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 10px rgba(var(--color-primary-rgb), 0.5);
}

.my-score-slider::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, var(--color-primary) 0%, var(--color-primary) var(--slider-value, 0%), #e0e0e0 var(--slider-value, 0%), #e0e0e0 100%);
}

.my-score-slider::-moz-range-track {
    height: 8px;
    border-radius: 4px;
    background: #e0e0e0;
}

/* スライダーの動的背景色（Firefox用） */
.my-score-slider::-moz-range-progress {
    height: 8px;
    border-radius: 4px;
    background: var(--color-primary);
}

.my-score-rating-display {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-width: 80px;
    justify-content: flex-end;
}

.my-score-rating-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-primary);
    width: 3.2em;
    max-width: 100%;
    padding: 0 2px;
    margin: 0;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 4px;
    background: transparent;
    text-align: right;
    font-family: inherit;
    line-height: 1.2;
    box-sizing: border-box;
    -moz-appearance: textfield;
}
.my-score-rating-value::-webkit-outer-spin-button,
.my-score-rating-value::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.my-score-rating-value:hover {
    border-bottom-color: rgba(var(--color-primary-rgb), 0.35);
}
.my-score-rating-value:focus {
    outline: none;
    border-bottom-color: rgba(var(--color-primary-rgb), 0.75);
    background: rgba(var(--color-primary-rgb), 0.06);
}

.my-score-rating-max {
    font-size: 18px;
    font-weight: 500;
    color: #999;
}

.my-score-clear-hint {
    margin: 0 0 10px;
    font-size: 12px;
    color: #666;
    line-height: 1.45;
    min-height: 1.2em;
}

.my-score-popup-actions {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.my-score-popup-actions-right {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-left: auto;
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
}

/* ネイティブの立体的ボタンを打ち消し、3ボタン共通のベース */
.my-score-clear-btn,
.my-score-close-btn,
.my-score-save-btn {
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.3;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease, color 0.2s ease;
}

.my-score-clear-btn {
    background: #f4f5f8;
    color: #4a4f5c;
    border: 1px solid #d8dbe6;
}

.my-score-clear-btn:hover {
    background: #e8ebf3;
    border-color: #b8bfd4;
}

.my-score-save-btn {
    border: none;
    color: #fff;
    min-width: 168px;
    padding-left: 36px;
    padding-right: 36px;
    background: var(--gradient-primary);
    box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.38);
}

.my-score-save-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(var(--color-primary-rgb), 0.45);
    background: linear-gradient(135deg, var(--color-primary-strong) 0%, var(--color-primary) 100%);
}

.my-score-save-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(var(--color-primary-rgb), 0.32);
}

.my-score-save-btn:focus-visible {
    outline: 2px solid rgba(var(--color-primary-rgb), 0.55);
    outline-offset: 2px;
}

.my-score-close-btn {
    background: #fff;
    color: #4a4f5c;
    border: 1px solid #d8dbe6;
}

.my-score-close-btn:hover {
    background: #f8f9fc;
    border-color: #b8bfd4;
}

.status-option-btn {
    width: 100%;
    padding: 12px 14px;
    border: none;
    background-color: white;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-weight: 500;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
}

.status-option-btn:last-child {
    border-bottom: none;
}

.status-option-btn:hover {
    background-color: #f8f8f8;
    color: var(--status-color);
}

.status-option-btn.selected {
    background-color: #f0f0f0;
    color: var(--status-color);
    font-weight: 600;
    border-left: 3px solid var(--status-color);
}

.status-option-btn .status-icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.status-option-btn .status-label {
    flex: 1;
    font-size: 13px;
}

.status-check {
    color: var(--status-color);
    font-weight: bold;
    font-size: 16px;
}

/* マイリストポップアップ */
.mylist-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(4px);
}

.mylist-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mylist-popup {
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.mylist-popup-overlay.active .mylist-popup {
    transform: scale(1) translateY(0);
}

.mylist-popup-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--gradient-primary);
    color: white;
}

.mylist-popup-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.mylist-popup-close {
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.mylist-popup-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.mylist-popup-content {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    flex: 1;
}

.mylist-create-section {
    display: flex;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e0e0e0;
}

.mylist-create-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s;
}

.mylist-create-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.mylist-create-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    background: var(--gradient-primary);
    color: white;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    line-height: 1.1;
    min-width: 72px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.mylist-create-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(var(--color-primary-rgb), 0.3);
}

.mylist-create-btn:active {
    transform: translateY(0);
}

.mylist-list-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.mylist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

.mylist-item:hover {
    border-color: var(--color-primary);
    background: #f8f8f8;
}

.mylist-item.selected {
    border-color: var(--color-primary);
    background: #f0f4ff;
}

.mylist-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.mylist-name {
    flex: 1;
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.mylist-empty {
    padding: 40px 20px;
    text-align: center;
    color: #999;
    font-size: 14px;
    line-height: 1.7;
}

.mylist-empty-line2 {
    display: block;
}

.mylist-popup-footer {
    padding: 16px 24px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.mylist-popup-save {
    padding: 12px 32px;
    border: none;
    border-radius: 8px;
    background: var(--gradient-primary);
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.mylist-popup-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
}

.mylist-popup-save:active {
    transform: translateY(0);
}

.mylist-popup-cancel {
    padding: 12px 32px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: white;
    color: #666;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.mylist-popup-cancel:hover {
    border-color: #999;
    background: #f5f5f5;
}

.mylist-popup-remove {
    padding: 12px 32px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #ff6348 0%, #ff4757 100%);
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.mylist-popup-remove:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 99, 72, 0.3);
}

.mylist-popup-remove:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .mylist-popup {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        max-height: min(82vh, 680px);
        box-sizing: border-box;
    }

    .mylist-popup-header,
    .mylist-popup-content,
    .mylist-popup-footer {
        box-sizing: border-box;
    }

    .mylist-popup-header {
        padding: 18px 16px;
    }

    .mylist-popup-content {
        padding: 16px;
        gap: 16px;
        overflow-x: hidden;
    }

    .mylist-create-section {
        width: 100%;
        min-width: 0;
        gap: 8px;
    }

    .mylist-create-input {
        flex: 1 1 auto;
        min-width: 0;
        padding: 11px 12px;
    }

    .mylist-create-btn {
        flex: 0 0 68px;
        min-width: 68px;
        width: 68px;
        padding: 11px 0;
        font-size: 13px;
    }

    .mylist-empty {
        padding: 32px 10px;
        font-size: 13px;
        line-height: 1.65;
    }

    .mylist-popup-footer {
        padding: 14px 16px;
    }
}

/* 解除確認メッセージ */
.remove-confirm-message {
    padding: 20px;
    text-align: center;
}

.remove-confirm-message p {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
    font-weight: 500;
}

.remove-lists {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.remove-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: #f8f8f8;
    color: #333;
}

.remove-list-item svg {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.remove-list-item span {
    font-size: 14px;
    font-weight: 500;
}

/* レスポンシブデザイン */
@media (max-width: 1200px) {
    /* iPad・タブレット含む：ナビはハンバーガーへ。認証ボタンはタブレット幅(769px〜)でヘッダーに残す */
    .header-menu {
        display: none;
    }

    .header-search {
        display: none;
    }

    .header-submenu .submenu-item {
        display: none;
    }

    .header-submenu {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
        flex-shrink: 0;
        min-width: 0;
    }

    .header-mobile-search-link {
        display: inline-flex;
    }

    .burger-menu {
        display: flex;
    }

    .header-top {
        max-width: 100%;
    }

    .anime-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .anime-cards {
        grid-template-columns: repeat(3, 1fr);
    }
    .ranking-section .anime-cards,
    .recommendation-section .anime-cards {
        grid-template-columns: repeat(3, 1fr);
        max-width: none;
    }
}

/* ===== iPad / tablet orientation overrides =====
   目的: iPad 横はPC相当、縦はスマホ相当に寄せる。
   注: iPad Pro 等は横幅が 1024 を超えるため、上の 768-1024 だけでは当たらない。 */
@media (min-width: 900px) and (max-width: 1366px) and (orientation: landscape) and (pointer: coarse) {
    /* ヘッダーをPC相当に戻す（max-width:1200 のモバイル化を上書き） */
    .header-menu { display: flex !important; }
    .header-search { display: block !important; }
    .header-submenu .submenu-item { display: inline-flex !important; }
    .header-mobile-search-link { display: none !important; }
    .burger-menu { display: none !important; }

    /* TOP/ランキングのカード列もPC寄せ */
    .anime-cards,
    .ranking-section .anime-cards,
    .recommendation-section .anime-cards {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 768px) and (max-width: 1366px) and (orientation: portrait) and (pointer: coarse) {
    /* 縦はスマホ寄せ */
    .anime-cards,
    .ranking-section .anime-cards,
    .recommendation-section .anime-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* iPad（768〜1024）: 横はPC相当、縦はスマホ相当に寄せる */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    /* ヘッダー: PC表示に戻す（横幅は十分ある想定） */
    .header-menu { display: flex; }
    .header-search { display: block; }
    .header-submenu .submenu-item { display: inline-flex; }
    .header-mobile-search-link { display: none; }
    .burger-menu { display: none; }

    /* グリッド: PCと同じ列数へ */
    .anime-cards { grid-template-columns: repeat(5, 1fr); }
    .ranking-section .anime-cards,
    .recommendation-section .anime-cards { grid-template-columns: repeat(5, 1fr); }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    /* 縦はスマホ寄り（既存の max-width ルールが多いが、足りない時の保険） */
    .anime-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ranking-section .anime-cards,
    .recommendation-section .anime-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== iPad / タブレット（769〜1366px）ヘッダー調整 =====
   - 縦幅・ボタン・ロゴを抑えて1行に収める
   - 1200px以下のハンバーガー表示でもマイページ／ログイン・ログアウトをヘッダーに表示
   - overflow で右端が切れないようロゴ幅を制限 */
@media (min-width: 769px) and (max-width: 1366px) {
    :root {
        --header-logo-slot-height: 48px;
    }

    body.has-fixed-header {
        padding-top: var(--body-header-offset, 82px);
    }

    .header {
        padding: 8px 0;
        overflow-x: clip;
    }

    .header-top {
        padding: 0 12px;
        gap: 8px;
        min-height: 52px;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        max-width: 100%;
    }

    .header-logo-section {
        flex: 0 1 auto;
        min-width: 0;
        max-width: min(32%, 240px);
    }

    .logo.logo--image-link {
        max-width: 100%;
    }

    .site-logo-img {
        max-width: 100%;
        height: var(--header-logo-slot-height);
        max-height: var(--header-logo-slot-height);
    }

    .header-menu {
        gap: 5px;
        flex: 0 1 auto;
        flex-shrink: 1;
        min-width: 0;
    }

    .menu-item {
        padding: 6px 9px;
        font-size: 12px;
        gap: 4px;
        border-radius: 8px;
    }

    .menu-icon {
        width: 14px;
        height: 14px;
    }

    /* 検索と認証ボタンを右側にまとめる（space-between による不自然な隙間を防ぐ） */
    .header-search {
        flex: 0 1 220px;
        min-width: 120px;
        max-width: 240px;
        width: min(240px, 28vw);
        margin: 0;
        margin-left: auto;
    }

    .search-input--integrated,
    .search-input {
        font-size: 12px;
        padding: 7px 10px;
    }

    .header-submenu {
        gap: 6px;
        flex: 0 0 auto;
        flex-shrink: 0;
        margin-left: 0;
    }

    .submenu-item {
        padding: 6px 10px;
        font-size: 12px;
        gap: 4px;
        border-radius: 8px;
        min-height: 36px;
        min-width: 0;
    }

    .submenu-icon {
        width: 13px;
        height: 13px;
    }

    /* 運営リンクはタブレット幅では非表示（認証ボタンのスペース確保） */
    .header-submenu a.submenu-item[href*="admin_login"] {
        display: none !important;
    }

    /* 1200px以下ハンバーガー時もマイページ・ログイン／ログアウトをヘッダーに表示 */
    .header-submenu .submenu-item.header-profile-nav-link,
    .header-submenu .submenu-item.header-login-nav-link {
        display: inline-flex !important;
    }

    .header-mobile-search-link,
    .burger-menu {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
        padding: 0;
        border-radius: 10px;
    }

    .header-mobile-search-link__icon {
        width: 18px;
        height: 18px;
    }

    .burger-menu span {
        width: 18px;
        height: 2px;
        margin: 2px 0;
    }
}

/* iPad 縦・ハンバーガー時（検索バー非表示）: 認証ボタン群だけ右寄せ */
@media (min-width: 769px) and (max-width: 1200px) {
    .header-submenu {
        margin-left: auto;
    }
}

/* iPad 横・フルヘッダー時: 検索とマイページ／ログアウトを隣接して右側に配置 */
@media (min-width: 769px) and (max-width: 1366px) and (orientation: landscape) {
    .header-search {
        display: block !important;
        margin-left: auto !important;
    }

    .header-submenu {
        margin-left: 0 !important;
    }
}

/* タブレットで横幅がさらに狭いとき：認証ボタンはアイコンのみ */
@media (min-width: 769px) and (max-width: 960px) {
    .header-submenu .submenu-item.header-profile-nav-link .header-profile-link-label,
    .header-submenu .submenu-item.header-login-nav-link > span:not(.header-dm-unread-badge) {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .header-submenu .submenu-item.header-profile-nav-link,
    .header-submenu .submenu-item.header-login-nav-link {
        padding: 8px;
        min-width: 38px;
        justify-content: center;
    }
}

/* iPad: TOP（ランキング・オススメ）アニメカード — スコアとステータスの重なり防止 */
@media (min-width: 769px) and (max-width: 1366px) {
    .ranking-section .anime-card:not(.anime-card--list) .anime-score-row,
    .recommendation-section .anime-card:not(.anime-card--list) .anime-score-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .ranking-section .anime-card:not(.anime-card--list) .anime-score-section,
    .recommendation-section .anime-card:not(.anime-card--list) .anime-score-section {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
    }

    .ranking-section .anime-card:not(.anime-card--list) .anime-score,
    .recommendation-section .anime-card:not(.anime-card--list) .anime-score {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 8px 10px 10px;
        padding-top: 16px;
        gap: 6px;
    }

    .ranking-section .anime-card:not(.anime-card--list) .anime-score-count-badge,
    .recommendation-section .anime-card:not(.anime-card--list) .anime-score-count-badge {
        font-size: 10px;
        padding: 3px 8px;
        left: 8px;
    }

    .ranking-section .anime-card:not(.anime-card--list) .star-icon,
    .recommendation-section .anime-card:not(.anime-card--list) .star-icon {
        font-size: 18px;
    }

    .ranking-section .anime-card:not(.anime-card--list) .anime-score-value,
    .recommendation-section .anime-card:not(.anime-card--list) .anime-score-value {
        font-size: 17px;
        min-width: 32px;
    }

    .ranking-section .anime-card:not(.anime-card--list) .status-selector,
    .recommendation-section .anime-card:not(.anime-card--list) .status-selector {
        flex-shrink: 0;
    }

    .ranking-section .anime-card:not(.anime-card--list) .status-main-btn,
    .recommendation-section .anime-card:not(.anime-card--list) .status-main-btn {
        min-width: 62px;
        max-width: 72px;
        padding: 6px 8px;
        box-sizing: border-box;
    }

    .ranking-section .anime-card:not(.anime-card--list) .status-icon,
    .recommendation-section .anime-card:not(.anime-card--list) .status-icon {
        font-size: 16px;
    }

    .ranking-section .anime-card:not(.anime-card--list) .status-label,
    .recommendation-section .anime-card:not(.anime-card--list) .status-label {
        font-size: 10px;
    }
}

/* 詳細ページ: マイスコア表示の左右余白を完全対称化（スマホ最優先） */
@media (max-width: 768px) {
    .detail-page .detail-my-score-section {
        padding: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
    }
    .detail-page .detail-my-score-main {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .detail-page .detail-my-score-main > * {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    .detail-page .detail-my-score-edit-btn,
    .detail-page .detail-my-score-status,
    .detail-page .detail-my-score-episode,
    .detail-page .detail-my-score-period {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* マイスコア設定ポップアップ: 視聴状況を2列表示に戻す */
    .my-score-popup .my-score-status-options {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .my-score-popup .my-score-status-option {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

@media (max-width: 768px) {

    .logo {
        font-size: 20px;
    }

    .site-logo-img {
        --header-logo-slot-height: 60px;
    }

    .logo-icon {
        width: 24px;
        height: 24px;
    }

    .menu-icon {
        width: 16px;
        height: 16px;
    }

    .submenu-icon {
        width: 14px;
        height: 14px;
    }

    .recommendation-title {
        font-size: 24px;
    }

    .recommendation-icon {
        width: 28px;
        height: 28px;
    }

    .slider-container {
        padding: 0;
    }

    .slide-item {
        width: 112px;
    }

    .slide-item img {
        max-height: 168px;
    }

    .anime-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }
    .ranking-section .anime-cards,
    .recommendation-section .anime-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        max-width: none;
    }

    .ranking-title {
        font-size: 24px;
    }

    .ranking-actions {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    /* 縦2段にすると固定ヘッダーが高くなり本文の padding-top を突き抜けて隠れるため、1行のままにする */
    .header-top {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }

    .slider-container {
        padding: 0;
    }

    .slide-item {
        width: 100px;
    }

    .slide-item img {
        max-height: 150px;
    }

    .anime-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    .ranking-section .anime-cards,
    .recommendation-section .anime-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        max-width: none;
    }

    .ranking-title {
        font-size: 20px;
    }

    .ranking-actions {
        justify-content: center;
    }

    .recommendation-title {
        font-size: 20px;
    }

    .recommendation-icon {
        width: 24px;
        height: 24px;
    }
}

/* フッター */
.footer {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
    padding: 60px 0 20px 0;
    margin-top: 60px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.footer-logo-link {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    text-decoration: none;
}

.footer-logo-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.75);
    outline-offset: 4px;
    border-radius: 8px;
}

.footer-site-logo-img {
    display: block;
    height: 48px;
    width: auto;
    max-width: min(240px, 75vw);
    object-fit: contain;
    opacity: 0.95;
    background: transparent;
    image-rendering: auto;
}

.footer-logo-icon {
    width: 32px;
    height: 32px;
    color: white;
}

.footer-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    line-height: 1.6;
    margin-top: -10px;
}

.footer-social {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.social-link svg {
    width: 20px;
    height: 20px;
}

/* X 公式ロゴマーク（塗りつぶし） */
.social-link--x svg,
.social-link__x-svg {
    stroke: none;
}

.social-link__x-svg path {
    fill: currentColor;
}

.social-link__werewolf-img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.footer-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
    color: white;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: white;
    padding-left: 5px;
}

.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

/* レスポンシブ: フッター */
@media (max-width: 1024px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .footer {
        padding: 26px 0 14px 0;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 16px 16px;
        margin-bottom: 18px;
    }

    .footer-section {
        text-align: left;
        gap: 10px;
    }

    .footer-social {
        justify-content: flex-start;
    }

    .footer-title {
        font-size: 15px;
        margin-bottom: 0;
    }

    .footer-links {
        gap: 8px;
    }

    .footer-links a {
        font-size: 13px;
    }

    /* ロゴ＆説明は2カラムを貫通 */
    .footer-section:first-child {
        grid-column: 1 / -1;
        text-align: center;
        gap: 8px;
    }

    .footer-description {
        margin-top: 0;
        font-size: 13px;
        line-height: 1.55;
    }

    .footer-social {
        margin-top: 6px;
        justify-content: center;
    }

    /* 下部コピーは詰める */
    .footer-bottom {
        padding: 14px 16px;
        font-size: 12px;
        line-height: 1.5;
    }
}

/* ページトップボタン */
.page-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--gradient-primary);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(var(--color-primary-rgb), 0.4);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
}

/* スマホ下部ナビと被らないように持ち上げる */
body.has-bottom-nav .page-top-btn {
    bottom: calc(30px + 66px + env(safe-area-inset-bottom, 0px));
}

.page-top-btn.visible {
    opacity: 1;
    visibility: visible;
}

.page-top-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.6);
}

.page-top-btn:active {
    transform: translateY(-1px);
}

.page-top-btn svg {
    width: 24px;
    height: 24px;
    stroke: white;
}

/* =========================
   詳細ページ（新デザイン）
   ========================= */

.detail-page {
    min-height: 100vh;
    background: var(--color-bg);
    padding: 40px 0 80px;
}

.detail-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 一覧ページから遷移したときの戻るリンク（?ret=）— ルート絶対パス /animeAI/... で解決 */
.detail-page-back-nav {
    margin: 0 0 20px 0;
}
.detail-page-back-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 14px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    background: var(--gradient-primary);
    border: none;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(var(--color-primary-rgb), 0.35), 0 1px 0 rgba(255, 255, 255, 0.2) inset;
    transition: transform 0.18s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.detail-page-back-link:hover {
    color: #fff;
    filter: brightness(1.06);
    box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.45);
    transform: translateY(-1px);
}
.detail-page-back-link:active {
    transform: translateY(0);
    filter: brightness(0.98);
}
.detail-page-back-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}
.detail-page-back-icon svg {
    display: block;
}
.detail-page-back-text {
    line-height: 1.35;
}

/* 404エラー */
.detail-not-found {
    text-align: center;
    padding: 100px 20px;
}

.detail-not-found h1 {
    font-size: 32px;
    color: var(--color-text);
    margin-bottom: 20px;
}

.detail-not-found p {
    font-size: 16px;
    color: var(--color-text-muted);
    margin-bottom: 30px;
}

.detail-back-link {
    display: inline-block;
    padding: 12px 24px;
    background: var(--gradient-primary);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.detail-back-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.4);
}

/* メイン情報セクション */
.detail-main-info {
    display: grid;
    grid-template-columns: 280px 1fr;
    column-gap: 40px;
    row-gap: 24px;
    align-items: start;
    background: var(--color-surface);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
}

.detail-hero-two-col {
    display: contents;
}

.detail-sidebar-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.detail-hero-right-block {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    min-width: 0;
}

.detail-meta-row-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 24px;
    padding: 16px 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding-right: 340px;
}

.detail-meta-group--facts {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 24px;
    flex: 1 1 auto;
    min-width: 0;
}

.detail-image-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.detail-streaming-block {
    min-width: 0;
}

.detail-poster {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: block;
}

.detail-image-container .favorite-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #e0e0e0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    transition: all 0.3s;
    z-index: 10;
    color: #666;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.detail-image-container .favorite-btn:hover {
    background: white;
    border-color: var(--color-primary);
    transform: scale(1.1);
    color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
}

.detail-image-container .favorite-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.4);
}

.detail-pv-container {
    position: relative;
    width: 100%;
    margin-top: 0;
    z-index: 1;
    background: var(--color-surface);
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
    border: 1px solid var(--color-border);
}

.detail-pv-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    border-color: var(--color-primary);
}

.detail-pv-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 アスペクト比 */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

.detail-pv-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(var(--color-primary-rgb), 0.10) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: 12px;
}

.detail-pv-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
    z-index: 0;
}

/* デスクトップ: PV を右上固定 */
@media (min-width: 769px) {
    .detail-hero-right-block > .detail-pv-container {
        position: absolute;
        top: 0;
        right: 0;
        width: 320px;
        margin: 0;
    }
}

/* iPad（769〜1366px）: PVと監督・制作メタが重ならないよう2列グリッド（PC・スマホは変更なし） */
@media (min-width: 769px) and (max-width: 1366px) {
    .detail-hero-right-block {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(200px, 272px);
        grid-template-areas:
            "title pv"
            "meta pv"
            "tags tags"
            "myscore myscore";
        column-gap: 16px;
        row-gap: 14px;
        align-items: start;
    }

    .detail-hero-right-block > .detail-title-main {
        grid-area: title;
        padding-right: 0;
        font-size: clamp(1.2rem, 2.6vw, 1.65rem);
        line-height: 1.35;
    }

    .detail-hero-right-block > .detail-meta-row-wrap {
        grid-area: meta;
        padding-right: 0;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px 14px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .detail-meta-group--facts {
        flex-wrap: wrap;
        gap: 10px 16px;
        row-gap: 8px;
    }

    .detail-meta-group--facts .detail-meta-item {
        flex: 0 1 auto;
        max-width: 100%;
    }

    .detail-meta-group--facts .detail-meta-value {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .detail-hero-right-block > .detail-tags {
        grid-area: tags;
    }

    .detail-hero-right-block > .detail-my-score-section {
        grid-area: myscore;
        padding-right: 20px;
    }

    .detail-hero-right-block > .detail-pv-container {
        grid-area: pv;
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        max-width: 100%;
        margin: 0;
        align-self: start;
        padding: 10px;
        box-sizing: border-box;
    }
}

.detail-title-main {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
    margin: 0;
    padding-right: 340px; /* PVの幅 + 余白 */
}

/* .detail-meta-row は .detail-meta-row-wrap に統合 */

.detail-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    min-width: 0;
}

.detail-meta-label {
    font-size: 13px;
    color: #666;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-meta-value {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
}

/* 詳細ページのスコア表示（TOP・カードと同じ .anime-score を使用） */
.detail-score-item .detail-meta-label {
    display: block;
    margin-bottom: 6px;
}

.detail-score-inline-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.detail-score-item .anime-score.detail-page-score {
    display: inline-flex;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.detail-tag {
    padding: 6px 14px;
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.detail-tag:hover {
    background: rgba(var(--color-primary-rgb), 0.18);
    transform: translateY(-1px);
}

a.detail-tag {
    text-decoration: none;
    cursor: pointer;
}

a.detail-tag:hover {
    background: rgba(var(--color-primary-rgb), 0.22);
}

.detail-meta-value .master-tag-link,
.detail-music-value .master-tag-link,
.detail-cast-simple-item .master-tag-link,
.original-meta-value .master-tag-link,
.work-info-table .master-tag-link {
    color: var(--color-primary-strong);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.35);
}

.detail-meta-value .master-tag-link:hover,
.detail-music-value .master-tag-link:hover,
.detail-cast-simple-item .master-tag-link:hover,
.original-meta-value .master-tag-link:hover,
.work-info-table .master-tag-link:hover {
    color: var(--color-primary);
    border-bottom-color: rgba(var(--color-primary-rgb), 0.55);
}

.detail-cast-simple-item .master-tag-link,
.detail-music-value .master-tag-link {
    cursor: pointer;
    text-underline-offset: 2px;
}

.master-tag-sep {
    color: #888;
    font-weight: 400;
    margin: 0 0.15em;
}

/* マイスコア機能 */
.detail-my-score-section {
    background: var(--color-surface);
    border-radius: 12px;
    padding: 18px 20px;
    border: 1px solid var(--color-border);
    margin-bottom: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    padding-right: 340px; /* PVの幅 + 余白 */
    position: relative;
    z-index: 0;
}

.detail-my-score-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    min-height: 40px;
}

.detail-my-score-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 0 0 auto;
    min-width: 0;
}

.detail-my-score-period {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    background: var(--color-surface-strong);
    border-radius: 5px;
    font-size: 11px;
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.period-date {
    font-weight: 500;
}

.period-separator {
    color: #999;
    font-weight: 600;
}

.detail-my-score-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 16px;
    background: var(--status-color, var(--color-primary));
    color: white;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
    white-space: nowrap;
    height: 40px;
    line-height: 1;
    box-sizing: border-box;
}

.detail-my-score-status .status-icon {
    font-size: 13px;
    line-height: 1;
}

.detail-my-score-status .status-label {
    font-size: 12px;
}

.detail-my-score-value-display {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    margin-left: 0;
    height: 40px;
    line-height: 1;
    box-sizing: border-box;
}

.detail-my-score-number {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary-strong);
}

.detail-my-score-max {
    font-size: 12px;
    color: var(--color-text-muted);
    font-weight: 500;
}

.detail-my-score-episode {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 10px 16px;
    background: var(--color-surface-strong);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    flex-shrink: 0;
    white-space: nowrap;
    height: 40px;
    line-height: 1;
    box-sizing: border-box;
}

.detail-my-score-episode .episode-number {
    color: var(--color-primary);
    font-size: 14px;
}

.detail-my-score-episode .episode-max {
    color: var(--color-text-muted);
    font-size: 11px;
}

.detail-my-score-edit-btn {
    padding: 10px 20px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), 0.25);
    flex-shrink: 0;
}

.detail-my-score-edit-btn:hover {
    background: var(--color-primary-strong);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(var(--color-primary-rgb), 0.35);
}

.detail-my-score-edit-btn:active {
    transform: translateY(0);
}

.detail-status-btn {
    padding: 12px 20px;
    background: white;
    border: 2px solid var(--status-color, var(--color-primary));
    border-radius: 8px;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    width: 100%;
    justify-content: center;
}

.detail-status-btn:hover {
    background: var(--status-color, var(--color-primary));
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
}

.detail-status-btn .status-icon {
    font-size: 18px;
}

.detail-status-btn .status-text {
    font-size: 14px;
}

.detail-rating-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-stars {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

.detail-star-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #ddd;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.detail-star-btn:hover {
    color: #ffa500;
    transform: scale(1.15);
}

.detail-star-btn.active {
    color: #ffa500;
}

.detail-star-btn svg {
    width: 24px;
    height: 24px;
}

.detail-rating-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.detail-rating-value-text {
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

.detail-rating-clear {
    padding: 6px 12px;
    background: #e8e8e8;
    border: none;
    border-radius: 6px;
    color: #666;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.detail-rating-clear:hover {
    background: #d0d0d0;
    color: #333;
}

.detail-favorite-btn {
    padding: 12px 20px;
    background: white;
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    color: var(--color-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    width: 100%;
}

.detail-favorite-btn:hover {
    background: var(--color-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
}

.detail-favorite-btn.active {
    background: var(--color-primary);
    color: white;
}

.detail-favorite-btn svg {
    width: 20px;
    height: 20px;
}

/* あらすじ */
.detail-synopsis-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
}

.detail-streaming-block .detail-streaming-section {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.detail-header-extras {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 24px;
    margin-top: 20px;
    align-items: flex-start;
    min-width: 0;
}

.detail-header-extras .detail-cast-simple-area,
.detail-header-extras .detail-music-area {
    flex: 1 1 220px;
    min-width: 0;
}

.detail-header-extras .detail-subsection-heading {
    margin: 0 0 8px 0;
}

.detail-music-area .detail-music-value {
    color: #1a1a1a;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.6;
    padding: 4px 0;
}

.detail-side-extras {
    display: none;
}

.detail-sidebar-score {
    display: none;
}

/* PC: あらすじは右カラム内に配置（モバイルで上書き） */
.detail-main-info > .detail-synopsis-section {
    grid-column: 2;
    margin-top: 0;
}

/* PC: 左=画像列、右=情報列の2段構成を明示して崩れを防止 */
@media (min-width: 769px) {
    .detail-main-info > .detail-hero-two-col {
        grid-column: 1 / -1;
        display: contents;
    }

    .detail-main-info > .detail-hero-two-col .detail-sidebar-col {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .detail-main-info > .detail-hero-two-col .detail-hero-right-block {
        grid-column: 2;
        grid-row: 1;
    }

    .detail-main-info > .detail-synopsis-section {
        grid-column: 2;
        grid-row: 2;
    }
}

/* サブメニュー（作品情報 / レビュー） */
.detail-submenu {
    grid-column: 1 / -1;
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    padding: 0;
    background: rgba(var(--color-primary-rgb), 0.10);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    /* タブをクリックしたとき、タブの下から見えるようにスクロール位置を調整 */
    scroll-margin-top: 80px;
}
/* 作品情報・レビューセクションへスクロール時、タブの直下から表示されるようにする */
#detail-section-info,
#detail-section-reviews {
    scroll-margin-top: 120px;
}
.detail-submenu-item {
    flex: 1;
    text-align: center;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
    color: #555;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    display: block;
}
/* オフ時: ホバー（セレクタを強めて他スタイルに負けないように） */
.detail-submenu a.detail-submenu-item:hover,
.detail-submenu-item:not(.is-active):hover {
    background: rgba(var(--color-primary-rgb), 0.18);
    color: var(--color-text);
}
/* オフ時: マウス押下 */
.detail-submenu a.detail-submenu-item:active,
.detail-submenu-item:not(.is-active):active {
    background: rgba(var(--color-primary-rgb), 0.24);
    color: var(--color-text);
    transform: scale(0.99);
}
/* 選択中タブのホバー・押下（少しだけ反応） */
.detail-submenu-item.is-active:hover {
    background: var(--color-surface-strong);
    color: var(--color-primary-strong);
}
.detail-submenu-item.is-active:active {
    transform: scale(0.995);
}
/* フォーカス（キーボード操作用） */
.detail-submenu-item:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.detail-submenu-item.is-active {
    background: white;
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

.detail-section-heading {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}

.detail-subsection-heading {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    margin: 20px 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-subsection-heading::before {
    content: '';
    display: block;
    width: 4px;
    height: 16px;
    background: var(--color-primary);
    border-radius: 2px;
}

.detail-synopsis-text {
    font-size: 14px;
    line-height: 1.8;
    color: var(--color-text-muted);
    margin-top: 8px;
    padding: 0;
    background: transparent;
    border: none;
}

/* 簡易キャスト表示 */
.detail-cast-simple-area {
    margin-top: 10px;
}

.detail-cast-simple-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px 20px;
}

.detail-cast-simple-item {
    display: flex;
    align-items: baseline;
    font-size: 14px;
    padding: 4px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}

.simple-cast-char {
    color: var(--color-text-muted);
    font-weight: 500;
    margin-right: 8px;
}

.simple-cast-char::after {
    content: ':';
    margin-left: 2px;
}

.simple-cast-actor {
    color: var(--color-text);
    font-weight: 600;
}

.detail-streaming-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 0;
    padding: 0;
    width: 100%;
}

.detail-streaming-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    color: #333;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.detail-streaming-link:hover {
    background: var(--gradient-primary);
    border-color: var(--color-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.35);
}

.detail-streaming-link:hover .streaming-icon {
    transform: scale(1.15);
}

.streaming-icon {
    font-size: 16px;
    transition: transform 0.3s ease;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

/* サムネイル下の配信サービスアイコン（大きめ） */
.streaming-icon-large {
    font-size: 28px;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

/* テーブル内の配信サービスアイコン（小さめ） */
.streaming-icon-small {
    font-size: 16px;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}

/* 配信サービスリンクアイコン（サムネイル下） */
.detail-streaming-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    border-radius: 0;
    transition: all 0.3s ease;
    text-decoration: none;
    background: transparent;
    border: none;
    aspect-ratio: 1;
    box-sizing: border-box;
}

.detail-streaming-link-icon:hover {
    background: transparent;
    border: none;
    transform: translateY(-2px);
    opacity: 0.8;
}

/* 配信サービスアイコン画像（サムネイル下） */
.streaming-icon-img-large {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* 配信サービスアイコン画像（テーブル内） */
.streaming-icon-img-small {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* 絵文字アイコン（サムネイル下） */
.streaming-icon-emoji {
    font-size: 32px;
    line-height: 1;
    display: block;
}

/* 絵文字アイコン（テーブル内） */
.streaming-icon-emoji-small {
    font-size: 24px;
    line-height: 1;
    display: block;
}

/* テーブル内の配信サービスアイコンリンク */
.streaming-service-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-right: 8px;
    margin-bottom: 8px;
    background: transparent;
    border: none;
    border-radius: 0;
    text-decoration: none;
    transition: all 0.2s ease;
    width: 48px;
    height: 48px;
}

.streaming-service-icon-link:hover {
    border: none;
    transform: translateY(-2px);
    opacity: 0.8;
    box-shadow: none;
}

/* 配信サービスリンクのスタイル */
.streaming-service-link {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.streaming-service-link:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
}

/* その他の情報 */
.detail-additional-info {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.detail-music-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.detail-info-box {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--color-border);
}

/* シリーズ／関連作品 */
.detail-related-series {
    width: 100%;
    grid-column: 1 / -1;
}
.detail-related-box {
    margin: 0 0 16px;
    padding: 22px;
}
.detail-related-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.detail-related-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}
.detail-related-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
}
.detail-related-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: linear-gradient(135deg, var(--color-surface-strong) 0%, var(--color-surface) 100%);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(var(--color-primary-rgb), 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.detail-related-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--color-primary-rgb), 0.35);
    box-shadow: 0 8px 20px rgba(var(--color-primary-rgb), 0.16);
}
.detail-related-thumb {
    position: relative;
    width: 100%;
    padding-top: 125%;
    background: #f5f7fb;
    overflow: hidden;
}
.detail-related-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.detail-related-thumb-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #999;
    background: linear-gradient(135deg, #f1f3f9 0%, #f7f9ff 100%);
}
.detail-related-meta {
    padding: 10px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.detail-related-title {
    font-size: 15px;
    font-weight: 700;
    color: #1b1b1f;
    line-height: 1.35;
}
.detail-related-season {
    font-size: 12px;
    color: #586a8f;
    font-weight: 600;
}
.detail-related-season::before {
    content: '🗓 ';
    font-size: 12px;
}

/* DM */
.dm-page {
    padding: 96px 20px 40px;
    max-width: 1280px;
    margin: 0 auto;
}

/* dm.php 単体ページ：横幅・高さを広く（埋め込みは styles_profile.css） */
body.has-fixed-header main.dm-page:not(.dm-embed) {
    padding: 88px 16px 24px;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}
body.has-fixed-header main.dm-page:not(.dm-embed) .dm-layout {
    width: 100%;
    max-width: min(1680px, calc(100vw - 32px));
    margin: 0 auto;
    grid-template-columns: minmax(280px, 34%) minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    height: calc(100dvh - 168px);
    min-height: 480px;
    max-height: calc(100dvh - 120px);
}
@supports not (height: 100dvh) {
    body.has-fixed-header main.dm-page:not(.dm-embed) .dm-layout {
        height: calc(100vh - 168px);
        max-height: calc(100vh - 120px);
    }
}
body.has-fixed-header main.dm-page:not(.dm-embed) .dm-thread-list,
body.has-fixed-header main.dm-page:not(.dm-embed) .dm-conversation {
    min-height: 0;
    height: 100%;
    max-height: 100%;
}
body.has-fixed-header main.dm-page:not(.dm-embed) .dm-thread-list {
    border-radius: 14px 0 0 14px;
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
}
body.has-fixed-header main.dm-page:not(.dm-embed) .dm-conversation {
    border-radius: 0 14px 14px 0;
    display: flex;
    flex-direction: column;
}
body.has-fixed-header main.dm-page:not(.dm-embed) .dm-thread-items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
body.has-fixed-header main.dm-page:not(.dm-embed) .dm-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
@media (max-width: 960px) {
    /* dm.php 単体（dm-standalone）は 768px 以下で別レイアウト。ここでは埋め込み等のみ */
    body:not(.dm-standalone).has-fixed-header main.dm-page:not(.dm-embed) .dm-layout {
        height: auto;
        min-height: 65dvh;
        max-height: none;
        grid-template-columns: 1fr;
        gap: 12px;
    }
    body:not(.dm-standalone).has-fixed-header main.dm-page:not(.dm-embed) .dm-thread-list {
        border-radius: 14px;
        border-right: none;
        max-height: 42dvh;
    }
    body:not(.dm-standalone).has-fixed-header main.dm-page:not(.dm-embed) .dm-conversation {
        border-radius: 14px;
        min-height: 48dvh;
    }
}

@media (max-width: 768px) {
    /* プロフィール埋め込み等（dm-standalone 以外） */
    body:not(.dm-standalone).has-fixed-header main.dm-page:not(.dm-embed) {
        padding: 0 0 calc(8px + env(safe-area-inset-bottom, 0px));
    }

    body:not(.dm-standalone).has-fixed-header main.dm-page:not(.dm-embed) .dm-layout {
        max-width: 100%;
        min-height: calc(100dvh - 164px);
        border-radius: 0;
        gap: 0;
    }

    body:not(.dm-standalone).has-fixed-header main.dm-page:not(.dm-embed) .dm-thread-list,
    body:not(.dm-standalone).has-fixed-header main.dm-page:not(.dm-embed) .dm-conversation {
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
        min-height: calc(100dvh - 164px);
    }

    body:not(.dm-standalone).has-fixed-header main.dm-page:not(.dm-embed) .dm-thread-list {
        max-height: none;
    }

    /* dm.php 単体：ビューポート固定・本文は枠内スクロール（960px の height:auto を上書き） */
    body.dm-standalone.has-fixed-header {
        overflow: hidden;
        height: 100dvh;
        max-height: 100dvh;
        box-sizing: border-box;
        /* 768px 時はロゴ60px＋.header 上下15px×2 ≈ 90px。max(104px,…) だとヘッダーより本文が下がり空きができる */
        padding-top: calc(env(safe-area-inset-top, 0px) + 90px);
        --dm-standalone-top-offset: calc(env(safe-area-inset-top, 0px) + 90px);
    }

    body.dm-standalone.has-fixed-header footer.footer {
        display: none !important;
    }

    body.dm-standalone.has-fixed-header main.dm-page:not(.dm-embed) {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        padding: 0 !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        /* 固定ヘッダー + ボトムナビ（body の --dm-standalone-top-offset と一致） */
        height: calc(
            100dvh - var(--dm-standalone-top-offset, calc(env(safe-area-inset-top, 0px) + 90px)) - calc(66px + env(safe-area-inset-bottom, 0px))
        );
        max-height: calc(
            100dvh - var(--dm-standalone-top-offset, calc(env(safe-area-inset-top, 0px) + 90px)) - calc(66px + env(safe-area-inset-bottom, 0px))
        );
        min-height: 0 !important;
        overflow: hidden;
    }

    @supports not (height: 100dvh) {
        body.dm-standalone.has-fixed-header main.dm-page:not(.dm-embed) {
            height: calc(
                100vh - var(--dm-standalone-top-offset, calc(env(safe-area-inset-top, 0px) + 90px)) - calc(66px + env(safe-area-inset-bottom, 0px))
            );
            max-height: calc(
                100vh - var(--dm-standalone-top-offset, calc(env(safe-area-inset-top, 0px) + 90px)) - calc(66px + env(safe-area-inset-bottom, 0px))
            );
        }
    }

    body.dm-standalone.has-fixed-header main.dm-page:not(.dm-embed) .dm-layout {
        flex: 1 1 auto;
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        gap: 0;
        overflow: hidden;
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    body.dm-standalone.has-fixed-header main.dm-page:not(.dm-embed) .dm-thread-list,
    body.dm-standalone.has-fixed-header main.dm-page:not(.dm-embed) .dm-conversation {
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
        min-height: 0 !important;
        max-height: 100% !important;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    body.dm-standalone.has-fixed-header main.dm-page:not(.dm-embed) .dm-thread-list-head,
    body.dm-standalone.has-fixed-header main.dm-page:not(.dm-embed) .dm-search {
        flex-shrink: 0;
    }

    body.dm-standalone.has-fixed-header main.dm-page:not(.dm-embed) .dm-thread-items {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.dm-standalone.has-fixed-header main.dm-page:not(.dm-embed) .dm-conversation-head {
        flex-shrink: 0;
        padding-bottom: 8px;
    }

    body.dm-standalone.has-fixed-header main.dm-page:not(.dm-embed) .dm-conversation {
        padding: 8px 10px 10px;
        box-sizing: border-box;
    }

    body.dm-standalone.has-fixed-header main.dm-page:not(.dm-embed) .dm-empty {
        flex: 1 1 auto;
        min-height: 0;
        margin: 0;
        padding: 24px 16px;
        overflow: auto;
    }

    body.dm-standalone.has-fixed-header main.dm-page:not(.dm-embed) .dm-messages {
        flex: 1 1 auto;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 8px 8px 10px;
        box-sizing: border-box;
    }

    body.dm-standalone.has-fixed-header main.dm-page:not(.dm-embed) .dm-input {
        flex-shrink: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 8px;
        padding: 8px 8px 10px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
    }

    body.dm-standalone.has-fixed-header main.dm-page:not(.dm-embed) .dm-input .dm-attach-preview {
        flex: 1 1 100%;
        width: 100%;
        margin-bottom: 0;
    }

    body.dm-standalone.has-fixed-header main.dm-page:not(.dm-embed) .dm-input textarea {
        resize: none;
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        min-height: 44px;
        max-height: 100px;
        padding: 10px 12px;
        line-height: 1.45;
    }

    body.dm-standalone.has-fixed-header main.dm-page:not(.dm-embed) .dm-input-actions {
        display: flex;
        flex-direction: row;
        flex-shrink: 0;
        gap: 6px;
        justify-content: flex-end;
        align-items: flex-end;
    }

    body.dm-standalone.has-fixed-header main.dm-page:not(.dm-embed) .dm-input-actions .dm-attach-btn,
    body.dm-standalone.has-fixed-header main.dm-page:not(.dm-embed) .dm-input-actions .dm-send-btn {
        padding: 8px 10px;
        min-width: 48px;
        white-space: nowrap;
    }

    body.has-fixed-header main.dm-page:not(.dm-embed) .dm-mobile-back-btn {
        display: inline-flex;
        border: none;
        background: transparent;
        color: #374151;
        font-size: 18px;
        line-height: 1;
        padding: 4px 8px 4px 0;
        margin-right: 4px;
        cursor: pointer;
        align-items: center;
    }

    body.has-fixed-header main.dm-page:not(.dm-embed):not(.dm-mobile-chat-open) .dm-conversation {
        display: none;
    }

    body.has-fixed-header main.dm-page:not(.dm-embed).dm-mobile-chat-open .dm-thread-list {
        display: none;
    }

    body.has-fixed-header main.dm-page:not(.dm-embed).dm-mobile-chat-open .dm-conversation {
        display: flex;
    }
}
/* dm.php 単体用の 96px 上余白は、プロフィール埋め込みでは固定ヘッダー＋ページ余白と二重になり右列だけ下にずれて見える */
.profile-main .dm-page {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100%;
    box-sizing: border-box;
}
.dm-layout {
    display: grid;
    grid-template-columns: minmax(280px, 340px) 1fr;
    gap: 20px;
    align-items: stretch;
}
@media (max-width: 960px) {
    .dm-layout {
        grid-template-columns: 1fr;
    }
}
.dm-thread-list, .dm-conversation {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
    min-height: 560px;
}
.dm-thread-list {
    display: flex;
    flex-direction: column;
    min-width: 280px;
    width: 100%;
}
/* 見出しの横にフィルターを置くと列幅で詰まり文字が切れるため、フィルターは下段で全幅 */
.dm-thread-list-head {
    padding: 16px 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    box-sizing: border-box;
}
.dm-thread-list-head h1 {
    font-size: 18px;
    margin: 0;
    line-height: 1.3;
    flex-shrink: 0;
}
/* すべて / ブロック中 / ミュート中（排他・セグメント風で常に「すべて」から通常一覧へ戻れる） */
.dm-thread-list-filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    align-items: stretch;
    justify-content: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-radius: 10px;
    border: 1px solid var(--color-border-strong, #c8cddd);
    /* 内側のパディングで角に文字が食い込まないようにする（子は min-width で確保） */
    overflow: hidden;
    background: #eceef5;
    box-sizing: border-box;
}
.dm-thread-list-filters .dm-filter-btn {
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    background: transparent;
    color: #374151;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
    line-height: 1.35;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}
.dm-thread-list-filters .dm-filter-btn + .dm-filter-btn {
    border-left: 1px solid rgba(55, 65, 81, 0.12);
}
.dm-thread-list-filters .dm-filter-btn:hover {
    background: rgba(255, 255, 255, 0.65);
}
.dm-thread-list-filters .dm-filter-btn.active {
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: none;
}
@media (max-width: 360px) {
    .dm-thread-list-filters .dm-filter-btn {
        font-size: 11px;
        padding: 9px 6px;
    }
}
.dm-filter-btn {
    border: 1px solid var(--color-border-strong, #c8cddd);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    background: #f3f4f8;
    color: #374151;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.dm-filter-btn:hover {
    background: #e8eaf0;
}
.dm-filter-btn.active {
    background: var(--gradient-primary);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.4);
}
.dm-head-btn,
.dm-attach-btn,
.dm-send-btn {
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-weight: 700;
    cursor: pointer;
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(92, 111, 240, 0.35);
}
.dm-search {
    padding: 0 16px 10px;
}
.dm-search-wrap {
    position: relative;
}
.dm-search input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: #f8f9ff;
    box-sizing: border-box;
}
/* DM ユーザー検索サジェスト（api_search_users.php と同系統） */
.dm-user-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 6px;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--color-border-strong, #e0e0e0);
    z-index: 10050;
    display: none;
}
.dm-user-suggestions.show {
    display: block;
}
.dm-user-suggestion-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    margin: 0;
    border: none;
    border-bottom: 1px solid #eee;
    background: #fff;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: #333;
    box-sizing: border-box;
}
.dm-user-suggestion-item:last-child {
    border-bottom: none;
}
.dm-user-suggestion-item:hover,
.dm-user-suggestion-item:focus {
    background: #f5f7ff;
    outline: none;
}
.dm-user-suggestion-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #e8ebf7;
}
.dm-user-suggestion-info {
    flex: 1;
    min-width: 0;
}
.dm-user-suggestion-name {
    font-size: 14px;
    font-weight: 600;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.dm-user-suggestion-name-inner {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dm-user-suggestion-empty {
    padding: 16px;
    text-align: center;
    color: #999;
    font-size: 13px;
}
.dm-thread-items {
    flex: 1;
    overflow-y: auto;
    padding: 8px 10px 12px;
    min-height: 300px;
}
.dm-thread-empty {
    padding: 16px;
    color: var(--color-text-muted);
    font-size: 14px;
}
.dm-virtual-thread-empty {
    padding: 20px 16px;
    margin: 8px 0;
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.6;
    border-radius: var(--radius-sm);
    background: #f8f9fc;
    border: 1px dashed var(--color-border, #e0e0e0);
}
.dm-thread {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
.dm-thread:hover {
    background: #f5f7ff;
    transform: translateY(-1px);
}
.dm-thread.active {
    background: var(--color-primary-soft);
    border: 1px solid var(--color-border-strong);
}
.dm-thread-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}
.dm-thread-context-menu {
    position: fixed;
    min-width: 200px;
    padding: 6px 0;
    margin: 0;
    background: #fff;
    border: 1px solid var(--color-border, #e0e0e8);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.08);
    z-index: 100050;
}
.dm-thread-context-menu-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 14px;
    color: var(--color-text, #222);
    cursor: pointer;
    transition: background 0.12s;
}
.dm-thread-context-menu-item:hover,
.dm-thread-context-menu-item:focus-visible {
    background: #f5f7ff;
    outline: none;
}
.dm-thread-context-menu-item--danger {
    color: #b91c1c;
}
.dm-thread-context-menu-item--danger:hover,
.dm-thread-context-menu-item--danger:focus-visible {
    background: #fef2f2;
}
.dm-thread-context-menu-item[data-action="delete"] {
    border-top: 1px solid var(--color-border, #e8e8ef);
    margin-top: 4px;
    padding-top: 12px;
}
.dm-thread .dm-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e8ebf7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.dm-thread-main {
    min-width: 0;
}
.dm-thread-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}
.dm-thread .dm-title {
    font-weight: 700;
    color: var(--color-text);
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.dm-thread-block-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    padding: 3px 7px;
    border-radius: 6px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.dm-thread-block-badge--by-me {
    background: #eef0ff;
    color: #4f56b8;
    border: 1px solid #c7cbf5;
}
.dm-thread-block-badge--by-them {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}
.dm-thread-mute-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    padding: 3px 7px;
    border-radius: 6px;
    white-space: nowrap;
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}
.dm-thread .dm-preview {
    color: var(--color-text-muted);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dm-thread .dm-preview-typing {
    font-style: italic;
    color: var(--color-primary, #667eea);
    animation: dm-thread-typing-pulse 1.2s ease-in-out infinite;
}
@keyframes dm-thread-typing-pulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}
.dm-thread .dm-unread {
    background: var(--color-primary);
    color: #fff;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}
.dm-conversation {
    display: flex;
    flex-direction: column;
    padding: 16px;
    width: 100%;
    min-height: 0;
}
.dm-conversation-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}

.dm-mobile-back-btn {
    display: none;
}
.dm-partner-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.dm-partner-profile-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border-radius: 10px;
    padding: 2px 4px 2px 2px;
    margin: -2px -4px -2px -2px;
    transition: background 0.2s ease, opacity 0.2s ease;
}
.dm-partner-profile-link:hover {
    background: rgba(var(--color-primary-rgb), 0.08);
}
.dm-partner-profile-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.dm-partner-profile-link[href="#"] {
    cursor: default;
    pointer-events: none;
}
.dm-partner-profile-link[href="#"]:hover {
    background: transparent;
}
.dm-partner-avatar-wrap {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.dm-partner-avatar-wrap .dm-partner-avatar {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-border-strong, #e0e0e8);
    background: #eef0fb;
}
.dm-partner-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--color-border-strong, #e0e0e8);
    background: #eef0fb;
}
.dm-partner-name {
    font-size: 16px;
    font-weight: 700;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.dm-thread .dm-avatar img.dm-thread-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    background: #eef0fb;
}
.dm-thread .dm-avatar .dm-thread-avatar-fallback {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-muted, #666);
}
.dm-messages {
    flex: 1 1 auto;
    min-height: 0;
    padding: 14px 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 960px) {
    .dm-messages {
        padding: 18px 12px 14px;
        box-sizing: border-box;
    }

    .dm-input {
        padding: 12px 12px 16px;
        box-sizing: border-box;
    }

    .dm-conversation {
        box-sizing: border-box;
    }
}
.dm-date-separator {
    align-self: center;
    margin: 12px 0 6px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted, #888);
    text-align: center;
    user-select: none;
}
.dm-date-separator:first-child {
    margin-top: 4px;
}
.dm-message {
    max-width: 78%;
    padding: 8px 12px 7px;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.dm-message-inner {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.dm-message-img-wrap img {
    display: block;
    max-width: 100%;
    max-height: 240px;
    width: auto;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}
.dm-message-row {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 8px;
    min-width: 0;
}
.dm-message-body {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.45;
    word-break: break-word;
    white-space: pre-wrap;
}
.dm-message-body:empty {
    display: none;
}
.dm-message-meta {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 3px;
    line-height: 1;
    padding-bottom: 1px;
}
.dm-message-time {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.88;
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.dm-message.mine .dm-message-time {
    color: rgba(255, 255, 255, 0.92);
}
.dm-message.other .dm-message-time {
    color: var(--color-text-muted, #666);
}
.dm-read-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    opacity: 0.9;
    white-space: nowrap;
}
.dm-message.mine .dm-read-label {
    color: rgba(255, 255, 255, 0.9);
}
.dm-message.other .dm-read-label {
    display: none;
}
.dm-message.mine {
    margin-left: auto;
    background: var(--gradient-primary);
    color: #fff;
}
.dm-message.other {
    background: var(--color-surface-strong);
    border: 1px solid var(--color-border);
    color: var(--color-text, #222);
}
/* 1行＝アイコン＋吹き出し（相手のみアイコン） */
.dm-msg-wrap {
    display: flex;
    width: 100%;
    align-items: flex-end;
    gap: 10px;
}
.dm-msg-wrap-mine {
    justify-content: flex-end;
}
.dm-msg-wrap-other {
    justify-content: flex-start;
}
.dm-msg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #eef0fb;
    align-self: flex-end;
}
.dm-msg-wrap-mine .dm-message.mine {
    margin-left: 0;
    max-width: 78%;
}
.dm-msg-wrap-other .dm-message.other {
    max-width: min(78%, calc(100% - 48px));
    flex: 0 1 auto;
}
/* 入力中：相手アイコンの右隣に … バブル（メッセージ一覧内の最下行） */
.dm-typing-row {
    display: none;
    width: 100%;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
    margin-top: 4px;
}
.dm-typing-bubble {
    padding: 12px 18px;
    border-radius: 16px;
    background: #e8e8ed;
    border: 1px solid var(--color-border, #ddd);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 22px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.dm-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #444;
    opacity: 0.45;
    animation: dmTypingDot 1.15s ease-in-out infinite;
}
.dm-typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}
.dm-typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes dmTypingDot {
    0%, 80%, 100% {
        opacity: 0.35;
        transform: translateY(0);
    }
    40% {
        opacity: 1;
        transform: translateY(-3px);
    }
}
.dm-input {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--color-border);
    padding-top: 10px;
}
.dm-input textarea {
    width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-strong);
    padding: 12px;
    resize: vertical;
    min-height: 80px;
}
.dm-input-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.dm-attach-preview {
    margin-bottom: 2px;
}
.dm-attach-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 8px;
}
.dm-attach-preview-card {
    position: relative;
    display: block;
    padding: 0;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-elevated, #ffffff);
    overflow: hidden;
}
.dm-attach-preview-img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #f2f3f7;
}
.dm-attach-preview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.dm-attach-preview-remove:hover {
    color: #ef4444;
    border-color: #ef4444;
}
.dm-empty {
    margin: auto;
    text-align: center;
    color: var(--color-text-muted);
}

.detail-op-list,
.detail-ed-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-op-item,
.detail-ed-item {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.detail-op-item:hover,
.detail-ed-item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.10);
    transform: translateY(-2px);
}

.op-number,
.ed-number {
    font-size: 11px;
    font-weight: 700;
    color: white;
    background: var(--gradient-primary);
    padding: 8px 12px;
    border-radius: 8px;
    min-width: 50px;
    text-align: center;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.3);
}

.op-title,
.ed-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
}

.op-artist,
.ed-artist {
    font-size: 14px;
    color: #666;
    font-weight: 500;
    text-align: right;
    padding-left: 12px;
    border-left: 1px solid #e8e8e8;
}

.work-info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.work-info-table th,
.work-info-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    text-align: left;
    vertical-align: middle; /* topから変更 */
}

.work-info-table tr:last-child th,
.work-info-table tr:last-child td {
    border-bottom: none;
}

.work-info-table th {
    width: 160px; /* 少し広げる */
    color: var(--color-text-muted);
    font-weight: 600;
    background-color: var(--color-surface-strong);
    white-space: nowrap;
}

.work-info-table td {
    color: var(--color-text);
}

/* カテゴリ見出し行 */
.work-info-category th {
    background: linear-gradient(90deg, var(--color-primary-soft) 0%, rgba(var(--color-primary-rgb), 0.14) 100%);
    color: var(--color-primary-strong);
    font-weight: 700;
    text-align: left;
    padding: 10px 16px;
    font-size: 13px;
    border-top: 2px solid var(--color-border);
}

.work-info-table tr:first-child.work-info-category th {
    border-top: none;
}

/* キャストリスト（詳細） */
.work-info-cast-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px 24px;
}

.work-info-cast-row {
    display: flex;
    align-items: baseline;
    font-size: 14px;
}

.work-info-char-name {
    color: #666;
    font-weight: 500;
}

.work-info-sep {
    color: #ccc;
    margin: 0 4px;
}

.work-info-actor-name {
    font-weight: 600;
    color: #333;
}

/* リンクボタン */
.work-info-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.work-info-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
    border: 1px solid #e0e0e0;
    background: white;
    color: #333;
}

.work-info-link-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.work-info-link-btn.site { color: var(--color-primary); border-color: var(--color-primary); }
.work-info-link-btn.site:hover { background: var(--color-primary-soft); }

.work-info-link-btn.twitter { color: #1da1f2; border-color: #1da1f2; }
.work-info-link-btn.twitter:hover { background: #e8f5fe; }

.work-info-link-btn.ebook { color: #ff9900; border-color: #ff9900; }
.work-info-link-btn.ebook:hover { background: #fff8e6; }

.detail-work-info-container {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.detail-work-info-container .work-info-table {
    table-layout: fixed;
    width: 100%;
}

.detail-work-info-container .work-info-table td {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Responsive Work Info */
@media (max-width: 600px) {
    .work-info-table th,
    .work-info-table td {
        display: block;
        width: 100%;
        padding: 8px 12px;
    }
    
    .work-info-table th {
        background: none;
        padding-bottom: 4px;
        color: #999;
        font-size: 12px;
        width: auto;
    }
    
    .work-info-category th {
        background: var(--color-primary-soft);
        color: var(--color-primary-strong);
        width: 100%;
        padding: 8px 12px;
    }
    
    .work-info-table td {
        padding-top: 0;
        padding-bottom: 16px;
        border-bottom: 1px dashed #f0f0f0;
    }
    
    .work-info-cast-list {
        grid-template-columns: 1fr;
    }

    
    .work-info-table tr:last-child td {
        padding-bottom: 0;
        border-bottom: none;
    }
}

.detail-related-list,
.detail-recommend-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px;
}

.detail-related-item,
.detail-recommend-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
}

.detail-related-item:hover,
.detail-recommend-item:hover {
    transform: translateY(-4px);
}

.detail-related-item img,
.recommend-image-wrapper img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.recommend-image-wrapper {
    overflow: hidden;
    border-radius: 12px;
}

.detail-recommend-item:hover img {
    transform: scale(1.05);
}

.related-title,
.recommend-title {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    line-height: 1.4;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* おすすめセクションのエラー/ロード表示 */
.loading-spinner,
.no-data-msg,
.error-msg {
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 14px;
}

/* 原作セクション（リニューアル） */
.detail-original-section {
    margin-top: 0;
    margin-bottom: 40px;
}

.detail-original-showcase {
    display: flex;
    gap: 40px;
    background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-strong) 100%);
    border-radius: 16px;
    padding: 30px;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.detail-original-showcase::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--color-primary-rgb), 0.04));
    z-index: 0;
    pointer-events: none;
}

.detail-original-showcase.no-image {
    justify-content: center;
}

/* Book Cover Effect */
.detail-original-book-cover {
    flex-shrink: 0;
    width: 180px;
    perspective: 1000px;
    z-index: 1;
}

.book-cover-effect {
    width: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(-5deg);
    transition: transform 0.4s ease;
    box-shadow: 10px 15px 25px rgba(0, 0, 0, 0.15);
    border-radius: 4px 8px 8px 4px;
}

.detail-original-showcase:hover .book-cover-effect {
    transform: rotateY(0deg) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.book-cover-effect img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px 8px 8px 4px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

/* Content Area */
.detail-original-content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    z-index: 1;
    min-width: 0;
}

.original-type-badge-row {
    display: flex;
    align-items: center;
}

.original-type-badge {
    background: var(--color-primary);
    color: white;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(var(--color-primary-rgb), 0.28);
    display: inline-block;
    white-space: nowrap;
    word-break: keep-all;
}

.original-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    background: var(--color-surface);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

.original-meta-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.original-meta-label {
    font-size: 11px;
    color: var(--color-text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.original-meta-label::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
}

.original-meta-value {
    font-size: 16px;
    color: var(--color-text);
    font-weight: 600;
    line-height: 1.4;
}

/* Kindle Button */
.original-action-area {
    margin-top: 10px;
}

.kindle-premium-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #232f3e; /* Amazon dark blue */
    color: white;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(35, 47, 62, 0.3);
    border: 1px solid #3a4b5f;
    position: relative;
    overflow: hidden;
    max-width: 320px;
}

.kindle-premium-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.kindle-premium-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(35, 47, 62, 0.4);
    background: #19222d;
}

.kindle-premium-btn:hover::after {
    transform: translateX(100%);
}

.kindle-btn-icon {
    width: 32px;
    height: 32px;
    color: #ff9900; /* Amazon orange */
    flex-shrink: 0;
}

.kindle-btn-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.kindle-btn-sub {
    font-size: 10px;
    color: #ccc;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.kindle-btn-main {
    font-size: 15px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.2px;
}

.kindle-btn-arrow {
    font-size: 18px;
    color: #ff9900;
    transition: transform 0.3s ease;
}

.kindle-premium-btn:hover .kindle-btn-arrow {
    transform: translateX(4px);
}

/* スマホでも原作は PC と同様「左カバー・右情報」の横並び（折り返し可） */
@media (max-width: 768px) {
    .detail-original-showcase {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 10px;
        padding: 14px 12px;
    }

    .detail-original-book-cover {
        width: 108px;
        flex-shrink: 0;
    }

    .detail-original-content-area {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        align-items: stretch;
        justify-content: flex-start;
        gap: 6px;
    }

    .original-header-row {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 4px;
        margin-bottom: 0;
    }

    .original-title {
        font-size: 14px;
        line-height: 1.2;
    }

    .original-subtitle {
        font-size: 11px;
        margin-top: 1px;
    }

    .original-type-badge {
        font-size: 10px;
        padding: 3px 8px;
        border-radius: 12px;
    }

    .original-meta-container {
        padding: 6px 8px;
        gap: 4px;
        border-radius: 10px;
    }

    .original-meta-row {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 1px;
        padding-bottom: 4px;
        border-bottom: none;
    }

    .original-meta-label {
        font-size: 9px;
        letter-spacing: 0;
    }

    .original-meta-value {
        font-size: 12px;
        line-height: 1.2;
    }

    .original-type-badge-row {
        justify-content: flex-start;
    }

    .original-meta-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .kindle-premium-btn {
        max-width: 100%;
    }

    .detail-header-extras {
        flex-direction: column;
    }

    .detail-cast-simple-grid {
        grid-template-columns: 1fr;
    }
}

/* コンテンツグリッド（原作とレビューの横並び） */
.detail-content-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr; /* レビューの幅を広げる (約 64%:36%) */
    gap: 24px;
    align-items: start;
    align-content: start; /* 行の高さを中身に合わせ、左の謎余白を防ぐ */
    margin-bottom: 30px;
}

@media (max-width: 1024px) {
    .detail-content-grid {
        grid-template-columns: 1fr; /* タブレット以下は縦並び */
        gap: 30px;
    }
}

.detail-original-section,
.detail-reviews-section {
    margin: 0;
    min-height: 0;
}

/* 作品情報ページのレビュー枠は中身の高さだけに（右に伸びて左が空かないように） */
.detail-reviews-section.detail-reviews-compact {
    align-self: start;
    height: auto;
    max-height: none;
}
.detail-reviews-compact .detail-info-box {
    flex: 0 1 auto; /* flex:1 だと親に引き伸ばされやすい */
    padding: 14px 16px;
}
.detail-reviews-compact .review-section-header {
    margin-bottom: 8px !important;
}
.detail-reviews-compact .review-post-btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
}
.detail-reviews-compact .reviews-list {
    flex: none;
    min-height: 0;
}

/* Review Section Styling Update */
.detail-reviews-section .detail-info-box {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    padding: 20px;
    min-height: auto;
    position: relative; /* モーダル配置の基準点にならないように注意 */
}

.review-post-btn {
    width: 100%;
    padding: 12px;
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    color: white;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* レビュー見出し横のボタンはテキスト幅で自然なサイズに */
.review-section-header .review-post-btn {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
}

.review-post-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
}

.review-sort-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    align-items: center;
}

.review-sort-btn {
    padding: 8px 14px;
    font-size: 13px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.review-sort-btn:hover {
    background: #f5f5f5;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.review-sort-btn.active {
    background: var(--gradient-primary);
    color: #fff;
    border-color: transparent;
}

.reviews-list {
    flex: 1;
    min-height: 0;
}

.review-load-more-wrap {
    text-align: center;
    margin-top: 24px;
    padding: 16px 0;
}

.review-load-more-btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    background: #fff;
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.review-load-more-btn:hover {
    background: var(--color-primary);
    color: #fff;
}

/* 作品情報ページ：レビューは人気1件のみ。全文・並び替えはレビュー専用ページへ */
.detail-reviews-compact .review-sort-bar {
    display: none;
}
.detail-reviews-compact .detail-reviews-compact-hint {
    margin-bottom: 8px !important;
    font-size: 12px !important;
    line-height: 1.4;
}
/* コメント欄は compact では非表示（DOMにあっても縦を取らない） */
.detail-reviews-compact .review-comments {
    display: none !important;
}
.detail-reviews-compact .review-item {
    padding: 12px 14px;
    margin-bottom: 0;
}
.detail-reviews-compact .review-header {
    margin-bottom: 8px;
    padding-bottom: 8px;
}
/* コンパクト：左ブロック（アイコン＋名前・時刻）を右のスコア＋チップの下辺に揃えて「左下」に見せる */
.detail-reviews-compact .review-user {
    align-items: flex-end;
    gap: 4px;
    min-width: 0;
}
.detail-reviews-compact .review-user-profile-link {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.detail-reviews-compact .review-user-info {
    flex: 1;
    min-width: 0;
}
/* 左列＝アイコン真横のユーザー名・時刻／右列＝マイスコア＋その下にステータス・話数（右寄せ・ステータス＋話数は常に横並び） */
.detail-reviews-compact .review-user-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 3px;
    align-items: start;
    min-width: 0;
}
.detail-reviews-compact .review-user-main > .review-user-left {
    grid-column: 1;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
    min-height: 36px;
    align-self: stretch;
    box-sizing: border-box;
}
.detail-reviews-compact .review-user-main > .detail-my-score-value-display {
    grid-column: 2;
    grid-row: 1;
    margin-left: 0;
    justify-self: end;
    align-self: center;
}
.detail-reviews-compact .review-user-main > .detail-my-score-info {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: start;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end !important;
    align-items: center;
    gap: 4px;
    width: max-content !important;
    max-width: 100% !important;
    min-width: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: inherit !important;
}
/* マイスコアが無いときは右列にステータスだけ → 行をまたいで右に寄せる */
.detail-reviews-compact .review-user-main:not(:has(> .detail-my-score-value-display)) > .detail-my-score-info {
    grid-row: 1 / span 2;
    align-self: center;
}
/* 視聴期間はコンパクトでは非表示（1行ヘッダーを優先・全文はレビューページ） */
.detail-reviews-compact .review-user-main > .detail-my-score-period {
    display: none;
}
.detail-reviews-compact .review-user-avatar-wrap,
.detail-reviews-compact .review-user-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
    flex-shrink: 0;
}
.detail-reviews-compact .review-user-name {
    font-size: 13px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex: 0 1 auto;
    max-width: 100%;
}
.detail-reviews-compact .review-user-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.detail-reviews-compact .review-user-name .operator-verified-badge {
    min-width: 18px;
    min-height: 18px;
    max-width: 22px;
    max-height: 22px;
    flex-shrink: 0;
}
.detail-reviews-compact .review-time {
    font-size: 10px;
    flex-shrink: 0;
    white-space: nowrap;
}
.detail-reviews-compact .review-item .detail-my-score-value-display {
    height: auto;
    min-height: 0;
    line-height: 1;
    margin-left: auto; /* 1行目でスコアを右端へ（左の名前エリアと重なさない） */
}
.detail-reviews-compact .review-item .detail-my-score-number {
    font-size: 14px;
}
.detail-reviews-compact .review-item .detail-my-score-max {
    font-size: 10px;
}
/* コンパクト：マイスコア直下の右列・チップ（横並び・1024px 以下の detail 上書きと競合するため compact は !important） */
.detail-reviews-compact .review-item .detail-my-score-status,
.detail-reviews-compact .review-item .detail-my-score-episode {
    padding: 2px 6px;
    height: auto;
    min-height: 20px;
    width: max-content !important;
    font-size: 9px;
    white-space: nowrap;
    flex: 0 0 auto !important;
    min-width: auto !important;
    max-width: none !important;
    border-radius: 5px;
    box-sizing: border-box;
    justify-content: center !important;
    gap: 2px;
    overflow: visible !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.detail-reviews-compact .review-item .detail-my-score-status .status-icon,
.detail-reviews-compact .review-item .detail-my-score-status .status-label {
    font-size: 9px;
    line-height: 1.15;
}
.detail-reviews-compact .review-item .detail-my-score-status .status-icon {
    font-size: 10px;
    flex-shrink: 0;
}
.detail-reviews-compact .review-item .detail-my-score-status .status-label {
    overflow: visible !important;
    text-overflow: clip !important;
    flex-shrink: 0 !important;
    min-width: auto !important;
}
.detail-reviews-compact .review-item .detail-my-score-episode .episode-number,
.detail-reviews-compact .review-item .detail-my-score-episode .episode-max {
    font-size: 9px;
}
.detail-reviews-compact .review-item .detail-my-score-episode .episode-number {
    font-size: 11px;
    flex-shrink: 0;
}
.detail-reviews-compact .review-item .detail-my-score-episode .episode-max {
    flex-shrink: 0 !important;
    min-width: auto !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* レビュー一覧ページ（#reviewListPage）：スマホのみ作品情報の compact レビューと同じヘッダーレイアウト */
@media (max-width: 768px) {
    #reviewListPage .review-item {
        padding: 12px 14px;
    }
    #reviewListPage .review-header {
        margin-bottom: 8px;
        padding-bottom: 8px;
    }
    #reviewListPage .review-user {
        align-items: flex-end;
        gap: 4px;
        min-width: 0;
    }
    #reviewListPage .review-user-profile-link {
        display: flex;
        align-items: flex-end;
        gap: 4px;
        flex: 1;
        min-width: 0;
    }
    #reviewListPage .review-user-info {
        flex: 1;
        min-width: 0;
    }
    #reviewListPage .review-user-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        column-gap: 8px;
        row-gap: 3px;
        align-items: start;
        min-width: 0;
    }
    #reviewListPage .review-user-main > .review-user-left {
        grid-column: 1;
        grid-row: 1 / -1;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 2px;
        min-width: 0;
        max-width: 100%;
        min-height: 36px;
        align-self: stretch;
        box-sizing: border-box;
    }
    #reviewListPage .review-user-main > .detail-my-score-value-display {
        grid-column: 2;
        grid-row: 1;
        margin-left: 0;
        justify-self: end;
        align-self: center;
    }
    #reviewListPage .review-user-main > .detail-my-score-info {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        align-self: start;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-end !important;
        align-items: center;
        gap: 4px;
        width: max-content !important;
        max-width: 100% !important;
        min-width: 0;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: inherit !important;
    }
    #reviewListPage .review-user-main:not(:has(> .detail-my-score-value-display)) > .detail-my-score-info {
        grid-row: 1 / span 2;
        align-self: center;
    }
    #reviewListPage .review-user-main > .detail-my-score-period {
        display: none;
    }
    #reviewListPage .review-user-avatar-wrap,
    #reviewListPage .review-user-icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
        flex-shrink: 0;
    }
    #reviewListPage .review-item .review-user-name {
        font-size: 13px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        min-width: 0;
        flex: 0 1 auto;
        max-width: 100%;
    }
    #reviewListPage .review-item .review-user-name-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #reviewListPage .review-item .review-user-name .operator-verified-badge {
        min-width: 18px;
        min-height: 18px;
        max-width: 22px;
        max-height: 22px;
        flex-shrink: 0;
    }
    #reviewListPage .review-time {
        font-size: 10px;
        flex-shrink: 0;
        white-space: nowrap;
    }
    #reviewListPage .review-item .detail-my-score-value-display {
        height: auto;
        min-height: 0;
        line-height: 1;
        margin-left: auto;
    }
    #reviewListPage .review-item .detail-my-score-number {
        font-size: 14px;
    }
    #reviewListPage .review-item .detail-my-score-max {
        font-size: 10px;
    }
    #reviewListPage .review-item .detail-my-score-status,
    #reviewListPage .review-item .detail-my-score-episode {
        padding: 2px 6px;
        height: auto;
        min-height: 20px;
        width: max-content !important;
        font-size: 9px;
        white-space: nowrap;
        flex: 0 0 auto !important;
        min-width: auto !important;
        max-width: none !important;
        border-radius: 5px;
        box-sizing: border-box;
        justify-content: center !important;
        gap: 2px;
        overflow: visible !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #reviewListPage .review-item .detail-my-score-status .status-icon,
    #reviewListPage .review-item .detail-my-score-status .status-label {
        font-size: 9px;
        line-height: 1.15;
    }
    #reviewListPage .review-item .detail-my-score-status .status-icon {
        font-size: 10px;
        flex-shrink: 0;
    }
    #reviewListPage .review-item .detail-my-score-status .status-label {
        overflow: visible !important;
        text-overflow: clip !important;
        flex-shrink: 0 !important;
        min-width: auto !important;
    }
    #reviewListPage .review-item .detail-my-score-episode .episode-number,
    #reviewListPage .review-item .detail-my-score-episode .episode-max {
        font-size: 9px;
    }
    #reviewListPage .review-item .detail-my-score-episode .episode-number {
        font-size: 11px;
        flex-shrink: 0;
    }
    #reviewListPage .review-item .detail-my-score-episode .episode-max {
        flex-shrink: 0 !important;
        min-width: auto !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* スマホ：左列を上揃え（flex-end だと右のスコア・バッジ行に合わせて名前が下へずれる） */
    #reviewListPage .review-user,
    .detail-reviews-compact .review-user {
        align-items: flex-start;
    }
    #reviewListPage .review-user-profile-link,
    .detail-reviews-compact .review-user-profile-link {
        align-items: flex-start;
    }
    #reviewListPage .review-user-main > .review-user-left,
    .detail-reviews-compact .review-user-main > .review-user-left {
        justify-content: flex-start;
        min-height: 0;
        align-self: start;
    }
    #reviewListPage .review-item .review-user-name,
    .detail-reviews-compact .review-item .review-user-name {
        flex-wrap: nowrap;
    }
    /* 季節1番バッジはスコアの下の行へ（狭い画面で名前行と横並びにならないよう） */
    #reviewListPage .review-item .detail-my-score-value-display--season-best,
    .detail-reviews-compact .review-item .detail-my-score-value-display--season-best {
        flex-wrap: wrap;
        justify-content: flex-end;
        align-content: flex-start;
        row-gap: 4px;
        max-width: 100%;
    }
    #reviewListPage .review-item .detail-my-score-value-display--season-best .detail-my-score-season-best-badge,
    .detail-reviews-compact .review-item .detail-my-score-value-display--season-best .detail-my-score-season-best-badge {
        flex: 0 0 100%;
        margin-left: 0;
        justify-content: flex-end;
        font-size: 9px;
        padding: 2px 8px;
        box-sizing: border-box;
    }
}

.detail-reviews-compact .review-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 6px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.detail-reviews-compact .review-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
    margin: 0 0 8px 0;
    font-size: 13px;
}
.detail-reviews-compact .review-actions {
    padding-top: 8px;
    margin-top: 0;
    border-top: 1px solid #f0f0f0;
}
.detail-reviews-compact .review-like-btn,
.detail-reviews-compact .review-comment-btn {
    padding: 6px 12px;
    font-size: 13px;
}

/* compact レビューカード：全面リンクで確実に遷移（ボタン・プロフィールは前面でクリック可能） */
.detail-reviews-compact #reviewsList .review-item {
    position: relative;
    cursor: pointer;
}
.detail-reviews-compact #reviewsList .review-item .review-item-open-link {
    position: absolute;
    inset: 0;
    z-index: 2; /* タイトル・本文クリックで遷移するよう全面に */
    border-radius: inherit;
    text-decoration: none;
    color: transparent;
    background: transparent;
}
/* いいね・コメント・プロフィールはリンクの上で操作できるように */
.detail-reviews-compact #reviewsList .review-item .review-actions,
.detail-reviews-compact #reviewsList .review-item .review-header {
    position: relative;
    z-index: 3;
}
.detail-reviews-compact #reviewsList .review-item button,
.detail-reviews-compact #reviewsList .review-item .review-user-profile-link,
.detail-reviews-compact #reviewsList .review-item .review-user-profile-link * {
    cursor: pointer;
    position: relative;
    z-index: 4;
}

/* レビュー一覧ページ：ハッシュでジャンプしたレビューを一時的に強調 */
.review-item.review-scroll-target {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
    border-radius: 12px;
    transition: outline 0.2s ease;
}
.review-see-all-wrap {
    text-align: center;
    margin-top: 12px;
    padding: 10px 0 4px;
}
.review-see-all-btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--gradient-primary);
    border: none;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.15s ease;
}
.review-see-all-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}

/* レビュー投稿モーダル */
.review-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(4px);
}

.review-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.review-modal {
    background: var(--color-surface);
    width: 90%;
    max-width: 500px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    transform: scale(0.9);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.review-modal-overlay.active .review-modal {
    transform: scale(1);
}

.review-modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-surface-strong);
    border-radius: 16px 16px 0 0;
}

.review-modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--color-text);
}

.review-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.review-modal-close:hover {
    color: var(--color-text);
}

.review-modal-content {
    padding: 24px;
    overflow-y: auto;
}

/* フォームスタイル（モーダル内） */
.review-form-wrapper {
    background: transparent;
    padding: 0;
    border: none;
    margin: 0;
}

.review-form-group {
    margin-bottom: 20px;
}

.review-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 8px;
}

.review-form-group input[type="text"],
.review-form-group textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s;
    background: var(--color-surface);
    color: var(--color-text);
}

.review-form-group input[type="text"]:focus,
.review-form-group textarea:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.10);
}

.review-form-group-checkbox {
    margin-bottom: 12px;
}

.review-spoiler-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
}

.review-spoiler-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.review-spoiler-wrap {
    margin-top: 4px;
    margin-bottom: 8px;
}

.review-spoiler-reveal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: flex-start;
    padding: 10px 12px;
    margin: 0;
    border: none;
    background: transparent;
    color: #d32f2f;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.review-spoiler-reveal:hover {
    background: rgba(211, 47, 47, 0.08);
}

.review-spoiler-wrap--expanded .review-spoiler-reveal {
    margin-bottom: 8px;
    border-radius: 8px 8px 0 0;
}

.review-spoiler-wrap--expanded .review-spoiler-reveal:hover {
    background: rgba(211, 47, 47, 0.12);
}

.review-spoiler-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 12px;
    line-height: 1;
    background: #d32f2f;
    color: #fff;
    border-radius: 3px;
    flex-shrink: 0;
}

.review-spoiler-label {
    flex: 1;
}

.review-spoiler-content[hidden] {
    display: none;
}

.review-spoiler-content:not([hidden]) {
    display: block;
}

.review-form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.review-cancel-btn {
    padding: 10px 20px;
    background: var(--color-surface-strong);
    color: var(--color-text-muted);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
}

.review-submit-btn {
    padding: 10px 24px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.3);
}

/* 評価スライダー（モーダル内） */
.review-rating-container {
    background: var(--color-surface-strong);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

.review-rating-container input[type="range"] {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(var(--color-primary-rgb), 0.18);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.review-rating-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 10px rgba(var(--color-primary-rgb), 0.35);
    cursor: pointer;
}

.review-rating-container input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 10px rgba(var(--color-primary-rgb), 0.35);
    cursor: pointer;
}

.review-rating-container input[type="range"]::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(var(--color-primary-rgb), 0.18);
}

.review-rating-display-large {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary-strong);
    text-align: center;
    margin-top: 8px;
}

.review-rating-max {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.review-rating-notice {
    font-size: 12px;
    color: var(--color-text-muted);
    background: var(--color-surface);
    padding: 8px 12px;
    border-radius: 6px;
    margin-top: 8px;
    border: 1px solid var(--color-border);
    display: flex;
    gap: 6px;
    align-items: start;
}

/* レビューリストアイテム */

/* New styles for header and title */
.original-header-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.original-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    line-height: 1.3;
}

.original-subtitle {
    font-size: 14px;
    font-weight: normal;
    color: var(--color-text-muted);
    display: block;
    margin-left: 0;
    margin-top: 4px;
}

.original-meta-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--color-surface);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

.original-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: 12px;
}

.original-meta-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.no-book-cover {
    width: 100%;
    height: 100%;
    aspect-ratio: 2 / 3;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px 8px 8px 4px;
    color: #999;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid #ccc;
}

/* Review Section Start */
.detail-reviews-section {
    margin-top: 0;
    margin-bottom: 30px;
}

.review-post-btn {
    padding: 12px 24px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.3);
    margin-top: 24px;
    margin-bottom: 20px;
}

.review-post-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.4);
}

.review-form-wrapper {
    background: var(--color-surface-strong);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    margin-bottom: 20px;
}

.review-form-group {
    margin-bottom: 20px;
}

.review-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 8px;
}

.review-rating {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.review-rating input[type="range"] {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: rgba(var(--color-primary-rgb), 0.18);
    outline: none;
    -webkit-appearance: none;
}

.review-rating input[type="range"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.review-rating input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-primary);
    cursor: pointer;
}

.review-rating input[type="range"]:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
    background: #999;
}

.review-rating input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-primary);
    cursor: pointer;
    border: none;
}

.review-rating input[type="range"]:disabled::-moz-range-thumb {
    cursor: not-allowed;
    background: #999;
}

.review-rating-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(var(--color-primary-rgb), 0.10);
    border-left: 3px solid var(--color-primary);
    border-radius: 6px;
    font-size: 12px;
    color: var(--color-primary-strong);
    margin-top: 8px;
}

.review-rating-notice-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.review-rating-notice-text {
    line-height: 1.5;
}

.review-rating-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary-strong);
}

.review-form-group input[type="text"],
.review-form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.3s ease;
    box-sizing: border-box;
    background: var(--color-surface);
    color: var(--color-text);
}

.review-form-group input[type="text"]:focus,
.review-form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.10);
}

.review-form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.review-char-count {
    text-align: right;
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 4px;
}

.review-form-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 20px;
}

.review-form-buttons button {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.review-form-buttons button[type="button"] {
    background: var(--color-surface-strong);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.review-form-buttons button[type="button"]:hover {
    background: rgba(var(--color-primary-rgb), 0.10);
    color: var(--color-primary-strong);
}

/* レビュー「…」メニュー（コメント・返信は absolute、レビューカードヘッダーは下記 grid で列確保） */
.review-more-menu {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    pointer-events: auto;
}
.review-more-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: background 0.2s, box-shadow 0.2s;
}
.review-more-btn:hover {
    background: #f5f5f5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.review-more-dot {
    font-size: 18px;
    line-height: 1;
    color: #555;
}
.review-more-dropdown {
    position: absolute;
    top: 36px;
    right: 0;
    min-width: 140px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    padding: 6px 0;
    display: none;
    z-index: 20;
}
.review-more-menu.open .review-more-dropdown {
    display: block;
}
.review-more-dropdown button {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 10px 14px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}
.review-more-dropdown button:hover {
    background: #f7f7ff;
}

/* レビュー通報モーダル */
.report-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    pointer-events: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
}
.report-modal-overlay.active {
    display: flex;
    pointer-events: auto;
}
/* 通報フォームより手前に表示（完了・エラー用メッセージ） */
.report-modal-message-overlay {
    z-index: 100000;
}
.report-modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    max-width: 440px;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}
.report-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.report-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #333;
}
.report-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #999;
}
.report-modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.report-modal-text {
    margin: 0;
    font-size: 14px;
    color: #333;
}
.report-reasons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
}
.report-reasons label {
    display: flex;
    align-items: center;
    gap: 8px;
}
.report-modal textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    resize: vertical;
}
.report-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 4px;
}
.report-cancel-btn {
    background: #f0f0f0;
    color: #555;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
}
.report-submit-btn {
    background: linear-gradient(135deg, #ff7043 0%, #ff4d4f 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
}
.report-submit-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.review-form-buttons button[type="submit"] {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.3);
}

.review-form-buttons button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.4);
}

.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.reviews-empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
}

/* 元のレビューからスレッド全体に縦線を通す（レビュー＋コメント・返信を一つのスレッドとして表示） */
.review-item {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e8e8e8;
    transition: all 0.3s ease;
    position: relative;
}

.review-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--color-primary);
}

.review-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}

/* 通報「…」あり：右列40pxを確保（absolute のままだとスコア・ステータスと重なる） */
.review-header:has(> .review-more-menu) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: start;
    column-gap: 4px;
    box-sizing: border-box;
}
.review-header:has(> .review-more-menu) > .review-user {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    flex: unset;
}
.review-header:has(> .review-more-menu) > .review-more-menu {
    position: relative;
    top: auto;
    right: auto;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    z-index: 10;
}

.review-user {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.review-user-avatar-wrap {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.review-user-avatar-wrap .review-user-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.review-user-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.review-user-info {
    flex: 1;
}

.review-user-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* レビューカード内：ステータス・話数は常に1行で表示し縦幅を抑える */
.review-item .detail-my-score-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}
.review-item .detail-my-score-status,
.review-item .detail-my-score-episode {
    flex-shrink: 0;
    white-space: nowrap;
}

.review-user-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.review-user-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    line-height: 1.3;
}

.review-time {
    font-size: 12px;
    color: #999;
}

/* レビュー・コメント・返信のユーザー→プロフィールリンク */
.review-user-profile-link,
.comment-user-profile-link,
.reply-user-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
}
.review-user-profile-link:hover,
.comment-user-profile-link:hover,
.reply-user-profile-link:hover {
    color: var(--color-primary);
    text-decoration: none;
}
.review-user-profile-link .review-user-name,
.comment-user-profile-link .comment-user-name,
.reply-user-profile-link .reply-user-name {
    color: inherit;
}

/* 運営者認証バッジ（名前横・チェックはSVGストロークで潰れにくく） */
.operator-verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    width: 1em;
    height: 1em;
    min-width: 22px;
    min-height: 22px;
    max-width: 28px;
    max-height: 28px;
    padding: 0;
    border-radius: 6px;
    line-height: 0;
    color: #fff;
    background: linear-gradient(145deg, #fff0b8 0%, #f0c030 42%, #c58512 100%);
    border: 1px solid rgba(100, 60, 8, 0.28);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    vertical-align: middle;
    white-space: nowrap;
    flex: 0 0 auto;
    position: relative;
    top: 0;
    box-sizing: border-box;
}
.operator-verified-badge svg {
    width: 100%;
    height: 100%;
    display: block;
    flex-shrink: 0;
}
.operator-verified-badge:focus-visible {
    outline: 2px solid rgba(var(--color-primary-rgb), 0.35);
    outline-offset: 2px;
}
.operator-verified-badge:hover { filter: brightness(1.04); }

.review-rating-badge {
    background: var(--gradient-primary);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.review-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 12px 0;
}

.review-text {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    margin: 0 0 16px 0;
    white-space: pre-wrap;
}

.review-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
}

.review-like-btn,
.review-comment-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #f8f9fa;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.review-like-btn:hover {
    background: #ffeef0;
    color: #e91e63;
}

.review-like-btn.liked {
    background: #ffeef0;
    color: #e91e63;
}

.review-action-disabled,
.comment-like-btn.review-action-disabled,
.reply-like-btn.review-action-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.review-comment-btn:hover {
    background: #e8f4f8;
    color: #2196f3;
}

.review-like-btn .like-icon,
.review-comment-btn .comment-icon {
    font-size: 18px;
}

.review-comment-btn .comment-icon svg {
    width: 18px;
    height: 18px;
}

.review-like-btn .like-count,
.review-comment-btn .comment-count {
    font-weight: 600;
}

.review-delete-btn {
    padding: 8px 16px;
    background: #ff6b6b;
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: auto;
}

.review-delete-btn:hover {
    background: #ff5252;
    transform: translateY(-1px);
}

/* 縦線はハート（いいね・コメントボタン）の下から。返信の返信の .comment-replies と同じ開始位置に合わせる */
.review-comments {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
    margin-left: 12px;
    border-left: 2px solid #a0a0a0;
    padding-left: 16px;
    overflow: visible;
}

.comment-form-wrapper {
    margin-bottom: 16px;
}

.comment-form {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.comment-input {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid #e8e8e8;
    border-radius: 20px;
    font-size: 14px;
    font-family: inherit;
    resize: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.comment-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.10);
}

.comment-submit-btn {
    padding: 10px 20px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.comment-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.3);
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
}

/* 元のレビューへの返信は .review-comments 側で縦線を表示するため、ここでは縦線を重ねない */

.comments-empty {
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 14px;
}

/* 縦線から各コメントへ曲線の枝線（どこに返信があるか分かりやすく） */
.comment-item {
    position: relative;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 12px;
}
.comment-item::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 18px;
    width: 16px;
    height: 14px;
    border-left: 2px solid #a0a0a0;
    border-bottom: 2px solid #a0a0a0;
    border-radius: 0 0 0 10px;
    pointer-events: none;
}

.comment-user {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.comment-user-avatar-wrap {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.comment-user-avatar-wrap .comment-user-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.comment-user-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.comment-user-name {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
}

.comment-time {
    font-size: 11px;
    color: #999;
    margin-left: auto;
}

.comment-text {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    margin: 0 0 12px 0;
    white-space: pre-wrap;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    position: relative;
    margin-bottom: 8px;
}
.comment-header .review-more-menu {
    position: absolute;
    top: 0;
    right: 0;
    flex-shrink: 0;
}
.comment-header .comment-user {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}
.comment-header:has(.review-more-menu) .comment-user {
    padding-right: 36px;
}

.comment-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.comment-like-btn,
.comment-reply-btn,
.comment-delete-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f8f9fa;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.comment-like-btn:hover {
    background: #ffeef0;
    color: #e91e63;
}

.comment-like-btn.liked {
    background: #ffeef0;
    color: #e91e63;
}

.comment-reply-btn:hover {
    background: #e8f4f8;
    color: #2196f3;
}

.comment-like-btn .like-icon,
.comment-reply-btn .reply-icon {
    font-size: 14px;
}

.comment-reply-btn .reply-icon,
.review-comment-btn .comment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.comment-reply-btn .reply-icon svg,
.review-comment-btn .comment-icon svg {
    display: block;
    flex-shrink: 0;
}

.comment-like-btn .like-count,
.comment-reply-btn .reply-count {
    font-weight: 600;
    font-size: 12px;
}

.comment-delete-btn {
    background: #ff6b6b;
    color: white;
    margin-left: auto;
}

.comment-delete-btn:hover {
    background: #ff5252;
}

/* 返信ブロックは常に左に縦線・インデント（親コメントへの返信も返信への返信も同じ） */
.comment-replies,
.reply-item .comment-replies {
    margin-top: 12px;
    padding-top: 12px;
    padding-left: 0;
    margin-left: 12px;
    border-left: 2px solid #a0a0a0;
    padding-left: 16px;
    overflow: visible;
}

.replies-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
    overflow: visible;
}

/* 縦線から各返信へ曲線の枝線（返信の返信も同じく分かりやすく） */
.reply-item {
    position: relative;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 2px solid transparent;
}
.reply-item::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 14px;
    width: 16px;
    height: 12px;
    border-left: 2px solid #a0a0a0;
    border-bottom: 2px solid #a0a0a0;
    border-radius: 0 0 0 8px;
    pointer-events: none;
}

.reply-to-label {
    display: inline-block;
    font-size: 11px;
    color: #667eea;
    margin-bottom: 4px;
}

.replies-load-more-wrap {
    margin-top: 8px;
    margin-bottom: 8px;
}

.replies-load-more-btn {
    background: none;
    border: none;
    color: #667eea;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.replies-load-more-btn:hover {
    text-decoration: underline;
}

.reply-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
    position: relative;
    margin-bottom: 6px;
}
.reply-header .review-more-menu {
    position: absolute;
    top: 0;
    right: 0;
    flex-shrink: 0;
}
.reply-header .reply-user {
    flex: 1;
    min-width: 0;
}
.reply-header:has(.review-more-menu) .reply-user {
    padding-right: 36px;
}

.reply-user {
    display: flex;
    align-items: center;
    gap: 6px;
}

.reply-user-avatar-wrap {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.reply-user-avatar-wrap .reply-user-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.reply-user-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.reply-user-name {
    font-size: 12px;
    font-weight: 600;
    color: #1a1a1a;
}

.reply-time {
    font-size: 10px;
    color: #999;
    margin-left: auto;
}

.reply-text {
    font-size: 13px;
    line-height: 1.5;
    color: #333;
    margin: 0 0 8px 0;
    white-space: pre-wrap;
}

.reply-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #e8e8e8;
}

.reply-like-btn,
.reply-delete-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #f0f0f0;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    font-size: 11px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.reply-like-btn:hover {
    background: #ffeef0;
    color: #e91e63;
}

.reply-like-btn.liked {
    background: #ffeef0;
    color: #e91e63;
}

.reply-like-btn .like-icon {
    font-size: 12px;
}

.reply-like-btn .like-count {
    font-weight: 600;
    font-size: 11px;
}

.reply-delete-btn {
    background: #ff6b6b;
    color: white;
    margin-left: auto;
}

.reply-delete-btn:hover {
    background: #ff5252;
}

.reply-form-wrapper {
    margin-top: 12px;
}

.reply-form {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.reply-input {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid #e8e8e8;
    border-radius: 16px;
    font-size: 13px;
    font-family: inherit;
    resize: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.reply-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.reply-submit-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.reply-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
    
    .community-container {
        grid-template-columns: 1fr;
        padding: 10px;
    }
    
    .community-sidebar-left {
        position: static;
        order: 2;
    }
    
    .sidebar-nav {
        flex-direction: row;
        overflow-x: auto;
        padding: 12px;
    }
    
    .sidebar-nav::-webkit-scrollbar {
        display: none;
    }
    
    .nav-item span {
        display: none;
    }
    
    .nav-item {
        padding: 8px;
        min-width: 40px;
        justify-content: center;
    }
    
    .community-main {
        order: 1;
    }

/* =========================
   コミュニティページ
   ========================= */

.community-page {
    min-height: 100vh;
    background: #f8f9fa;
    padding-top: 60px;
}

.community-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 250px 1fr 300px;
    gap: 20px;
    padding: 20px;
}

/* サイドバー（左） */
.community-sidebar-left {
    position: sticky;
    top: 80px;
    height: fit-content;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    color: #333;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.nav-item svg {
    width: 20px;
    height: 20px;
}

.nav-item:hover {
    background: #f8f9fa;
    color: #667eea;
}

.nav-item.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* メインコンテンツ */
.community-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 投稿フォーム */
.community-post-form {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.post-form-header h2 {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 16px;
}

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

.post-form-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.post-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
}

.post-user-name {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

.post-form-textarea {
    width: 100%;
    min-height: 120px;
    padding: 16px;
    border: 2px solid #e8e8e8;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    resize: vertical;
    transition: all 0.3s ease;
}

.post-form-textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.post-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.post-char-count {
    font-size: 13px;
    color: #999;
}

.post-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.post-upload-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #f8f9fa;
    border: 2px solid #e8e8e8;
    border-radius: 8px;
    color: #666;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.post-upload-btn:hover {
    background: #e9ecef;
    border-color: #667eea;
    color: #667eea;
}

.post-upload-btn svg {
    width: 18px;
    height: 18px;
}

.post-submit-btn {
    padding: 10px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.post-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.post-preview-image {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    max-height: 400px;
}

.post-preview-image img {
    width: 100%;
    height: auto;
    display: block;
}

.post-remove-image {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.post-remove-image:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

/* タイムライン */
.community-timeline {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.empty-timeline {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.empty-timeline svg {
    width: 64px;
    height: 64px;
    color: #ccc;
    margin-bottom: 16px;
}

.empty-timeline p {
    font-size: 16px;
    color: #999;
    margin: 8px 0;
}

.empty-subtitle {
    font-size: 14px;
    color: #bbb;
}

/* 投稿アイテム */
.post-item {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.post-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.retweet-post {
    border-left: 4px solid #4ECDC4;
}

.retweet-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 13px;
    margin-bottom: 12px;
    padding-left: 12px;
}

.retweet-header svg {
    width: 16px;
    height: 16px;
}

.post-content-wrapper {
    padding-left: 12px;
}

.post-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    position: relative;
}

.post-user-info {
    flex: 1;
}

.post-user-name {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}

.post-timestamp {
    font-size: 13px;
    color: #999;
}

.post-delete-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.post-delete-btn:hover {
    background: #f8f9fa;
    color: #ff6b6b;
}

.post-delete-btn svg {
    width: 18px;
    height: 18px;
}

.post-text {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 12px;
    word-wrap: break-word;
}

.post-image {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
    max-height: 500px;
}

.post-image img {
    width: 100%;
    height: auto;
    display: block;
}

.post-actions {
    display: flex;
    gap: 32px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.post-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.post-action-btn svg {
    width: 20px;
    height: 20px;
}

.post-action-btn:hover {
    background: #f8f9fa;
}

.comment-btn:hover {
    color: #667eea;
}

.retweet-btn:hover {
    color: #4ECDC4;
}

.retweet-btn.active {
    color: #4ECDC4;
}

.like-btn:hover {
    color: #ff6b6b;
}

.like-btn.active {
    color: #ff6b6b;
}

/* サイドバー（右） */
.community-sidebar-right {
    position: sticky;
    top: 80px;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 16px;
}

/* トレンドセクション */
.trends-section,
.suggestions-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.trends-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.trend-item {
    padding: 12px;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.trend-item:hover {
    background: #f8f9fa;
}

.trend-tag {
    font-size: 15px;
    font-weight: 700;
    color: #667eea;
    margin-bottom: 4px;
}

.trend-count {
    font-size: 13px;
    color: #999;
}

/* おすすめユーザーセクション */
.suggestions-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.suggestion-item:hover {
    background: #f8f9fa;
}

.suggestion-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

.suggestion-info {
    flex: 1;
    min-width: 0;
}

.suggestion-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 2px;
}

.suggestion-followers {
    font-size: 12px;
    color: #999;
}

.suggestion-follow-btn {
    padding: 6px 16px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.suggestion-follow-btn:hover {
    background: #5568d3;
    transform: translateY(-1px);
}

/* レスポンシブ */
@media (max-width: 1024px) {
    .community-container {
        grid-template-columns: 200px 1fr;
    }
    
    .community-sidebar-right {
        display: none;
    }
}

@media (max-width: 768px) {
    .detail-main-info {
        display: flex !important;
        grid-template-columns: none;
        column-gap: 0;
        row-gap: 18px;
        gap: 18px;
        flex-direction: column !important;
        padding: 18px 16px;
    }

    .detail-hero-two-col {
        display: grid !important;
        grid-template-columns: minmax(0, 42%) 1fr;
        column-gap: 12px;
        row-gap: 10px;
        align-items: start;
    }

    .detail-main-info > .detail-synopsis-section {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        width: 100%;
        margin-top: 0;
    }

    .detail-hero-right-block {
        display: contents;
    }

    .detail-meta-row-wrap {
        display: contents;
    }

    .detail-sidebar-col {
        grid-column: 1;
        /* タイトル行＋メタ行の2段にポスター列を揃える（長タイトルでも右列だけ伸びる） */
        grid-row: 1 / span 2;
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 0;
        align-self: start;
    }

    .detail-image-container {
        max-width: none;
        margin: 0;
        width: 100%;
    }

    .detail-title-main {
        grid-column: 2;
        grid-row: 1;
        font-size: clamp(0.9375rem, 3.9vw, 1.1875rem);
        font-weight: 700;
        padding-right: 0;
        margin: 0;
        min-width: 0;
        line-height: 1.45;
        letter-spacing: -0.01em;
    }

    /* タイトルと同じグリッド行に置いていたため長文で制作・監督と重なっていた */
    .detail-meta-group--facts {
        grid-column: 2;
        grid-row: 2;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
        border: none;
        border-top: 1px solid #e8e8e8;
        padding: 10px 0 0;
        margin: 0;
        min-width: 0;
        align-self: start;
    }

    .detail-meta-group--facts .detail-meta-item {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 8px;
        min-width: 0;
    }

    .detail-meta-group--facts .detail-meta-label {
        margin-bottom: 0 !important;
        flex-shrink: 0;
    }

    .detail-meta-group--facts .detail-meta-value {
        font-size: 14px;
        line-height: 1.35;
    }

    .detail-synopsis-extras {
        display: none;
    }

    .detail-side-extras {
        display: flex;
        grid-column: 1 / -1;
        flex-direction: column;
        margin-top: 8px;
        gap: 12px;
    }

    .detail-side-extras .detail-cast-simple-area,
    .detail-side-extras .detail-music-area {
        flex: 1 1 auto;
    }

    .detail-side-extras .detail-subsection-heading {
        font-size: 13px;
        margin: 0 0 6px 0;
    }

    .detail-side-extras .detail-cast-simple-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .detail-side-extras .detail-cast-simple-item {
        font-size: 12px;
        padding: 2px 0;
    }

    .detail-side-extras .detail-music-value {
        font-size: 12px;
        line-height: 1.45;
        padding: 0;
    }

    .detail-sidebar-score {
        display: block;
        margin-top: 6px;
    }

    .detail-sidebar-score .detail-meta-label {
        display: block;
        margin-bottom: 6px;
    }

    .detail-meta-group--score {
        display: none;
    }

    .detail-tags {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .detail-my-score-section {
        grid-column: 1 / -1;
        grid-row: 4;
        padding-right: 0;
    }

    .detail-pv-container {
        grid-column: 1 / -1;
        grid-row: 5;
        position: relative;
        width: 100%;
        max-width: 100%;
        margin-bottom: 0;
        max-height: none;
        padding: 8px;
    }

    .detail-pv-wrapper {
        border-radius: 10px;
        padding-bottom: 0;
        aspect-ratio: 16 / 9;
        max-height: 220px;
        width: 100%;
    }

    .detail-pv-overlay {
        border-radius: 10px;
    }

    .detail-pv-iframe {
        border-radius: 10px;
    }

    .detail-score-inline-row {
        align-items: center;
    }

    .detail-page .anime-score.detail-page-score {
        overflow: visible;
        box-sizing: border-box;
        padding: 11px 12px 18px;
        padding-top: 19px;
        align-items: center;
        min-height: 50px;
        max-width: 100%;
    }

    .detail-page .anime-score.detail-page-score .anime-score-value {
        line-height: 1.25;
        padding-bottom: 2px;
    }

    .detail-page .detail-page-status-btn.status-main-btn {
        align-self: center;
    }
    
    .detail-music-section {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .detail-op-item,
    .detail-ed-item {
        grid-template-columns: 50px 1fr;
        gap: 12px;
        padding: 14px 16px;
    }
    
    .op-artist,
    .ed-artist {
        grid-column: 2;
        text-align: left;
        padding-left: 0;
        border-left: none;
        padding-top: 4px;
        font-size: 13px;
    }
    
    .detail-cast-item,
    .detail-staff-item {
        grid-template-columns: 100px 1fr;
        padding: 14px 16px;
        gap: 12px;
    }
    
    .cast-character,
    .staff-role {
        font-size: 12px;
        padding-right: 12px;
    }
    
    .cast-actor,
    .staff-name {
        font-size: 14px;
    }
    
    .detail-related-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .detail-page {
        padding: 20px 0 60px;
    }
    
    .detail-wrapper {
        padding: 0 15px;
    }
    
    .detail-main-info,
    .detail-info-box {
        padding: 20px;
        border-radius: 12px;
    }
    
    .detail-synopsis-section,
    .detail-streaming-section {
        margin-top: 20px;
        padding-top: 20px;
    }
    
    .detail-actions-section {
        grid-template-columns: 1fr;
    }
    
    .detail-streaming-block .detail-streaming-links {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    
    .detail-my-score-main {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        width: 100%;
    }
    
    .detail-my-score-edit-btn {
        width: 100%;
        max-width: 100%;
        order: -1;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
    }

    .detail-my-score-info {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        box-sizing: border-box;
    }

    .detail-my-score-status,
    .detail-my-score-episode,
    .detail-my-score-period {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
    }
    
    
    .detail-title-main {
        font-size: clamp(0.875rem, 3.6vw, 1.0625rem);
        line-height: 1.48;
    }
    
    .detail-meta-group--facts {
        grid-template-columns: 1fr;
    }
    
    .my-score-popup {
        width: 95%;
        max-width: none;
    }
    
    .my-score-popup-content {
        padding: 24px 16px;
        gap: 20px;
    }
    
    .my-score-status-options {
        grid-template-columns: 1fr;
    }
    
    .my-score-date-container {
        grid-template-columns: 1fr;
    }
    
    .my-score-stars {
        gap: 6px;
    }
    
    .my-score-star-btn {
        width: 36px;
        height: 36px;
    }
    
    .my-score-popup-actions {
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
    }

    .my-score-popup-actions-right {
        width: 100%;
        margin-left: 0;
        flex-direction: column;
    }
    
    .my-score-clear-btn,
    .my-score-save-btn,
    .my-score-close-btn {
        width: 100%;
        min-width: 0;
        padding-left: 20px;
        padding-right: 20px;
    }
    .my-score-popup-header h3,
    .my-score-form-label-row,
    .my-score-rating-display {
        text-align: center;
        justify-content: center;
    }

    .my-score-form-label-row {
        flex-direction: column;
        align-items: stretch;
    }

    .my-score-season-best-toolbar {
        justify-content: center;
    }

    .my-score-status-option {
        justify-content: center;
        text-align: center;
    }
    .status-option-btn {
        justify-content: center;
        text-align: center;
        gap: 6px;
    }
    .status-option-btn .status-check {
        display: none;
    }
    
    .detail-related-list,
    .detail-recommend-list {
        grid-template-columns: 1fr;
    }
    
    .detail-review-form {
        padding: 20px;
    }
    
    .review-item-header {
        flex-direction: column;
        gap: 12px;
    }
    
    .review-item-rating {
        align-items: flex-start;
    }
    
    .review-item-actions {
        flex-direction: column;
    }
    
    .review-helpful-btn,
    .review-delete-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .page-top-btn {
        width: 45px;
        height: 45px;
        bottom: 20px;
        right: 20px;
    }

    .page-top-btn svg {
        width: 20px;
        height: 20px;
    }
}

/* 確認モーダル */
.confirm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(4px);
}

.confirm-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.confirm-modal {
    background: var(--color-surface);
    width: 90%;
    max-width: 400px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
    overflow: hidden;
}

.confirm-modal-overlay.active .confirm-modal {
    transform: scale(1) translateY(0);
}

.season-best-switch-confirm-overlay {
    z-index: 100010;
}

.season-best-switch-confirm-overlay .confirm-modal.confirm-modal--season-best {
    width: min(96vw, 480px);
    max-width: min(96vw, 480px);
}

.confirm-modal--season-best .confirm-modal-icon {
    background: linear-gradient(180deg, #fff6e8 0%, var(--color-surface) 100%);
}

.confirm-modal--season-best .confirm-modal-icon svg {
    background: linear-gradient(135deg, #ffd28a 0%, #f59e0b 100%);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);
}

.confirm-modal--season-best .confirm-modal-content {
    padding-top: 26px;
    padding-bottom: 18px;
}

.season-best-switch-confirm-message {
    margin: 0;
    line-height: 1.65;
}

.season-best-switch-confirm-line {
    display: block;
}

.season-best-switch-confirm-line--title {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.season-best-switch-confirm-line--single {
    white-space: nowrap;
    font-size: clamp(13px, 3.6vw, 16px);
}

.season-best-switch-confirm-line + .season-best-switch-confirm-line {
    margin-top: 0.55em;
}

.confirm-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px 24px 16px;
    background: linear-gradient(180deg, var(--color-primary-soft) 0%, var(--color-surface) 100%);
    color: #fff;
    border-bottom: 1px solid var(--color-border);
}

.confirm-modal-icon svg {
    width: 28px;
    height: 28px;
    padding: 14px;
    border-radius: 50%;
    background: var(--gradient-primary);
    box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.35);
    color: #fff;
    stroke: #fff;
    box-sizing: content-box;
}

.confirm-modal-content {
    padding: 22px 28px 8px;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}

.confirm-modal-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 15px 0;
}

/* DM ブロック／ミュート確認：見出しを1行表示（狭い幅は clamp で縮小） */
.dm-confirm-modal .confirm-modal.dm-confirm-modal-wide {
    max-width: min(96vw, 440px);
}
.dm-confirm-modal .confirm-modal-content {
    text-align: center;
}
.dm-confirm-modal .confirm-modal-title,
.dm-confirm-modal .confirm-modal-title.dm-confirm-title-single {
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}
.dm-confirm-modal .confirm-modal-title.dm-confirm-title-single {
    white-space: nowrap;
    font-size: clamp(11px, 3.7vw, 22px);
    line-height: 1.3;
}
/* 本文は左揃えのまま（タイトルは中央） */
.dm-confirm-modal .confirm-modal-message.dm-block-confirm-body,
.dm-confirm-modal .dm-info-modal-body {
    text-align: left;
}
/* 説明文なし（解除確認のみ）— 見出しを確実に中央（nowrap で長文が右へ寄って見えるのを防ぐ） */
.dm-confirm-modal .confirm-modal.dm-confirm-modal--minimal .confirm-modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 24px;
    padding-left: 24px;
    padding-right: 24px;
    text-align: center;
    box-sizing: border-box;
}
.dm-confirm-modal .confirm-modal.dm-confirm-modal--minimal .confirm-modal-title {
    margin-bottom: 0;
}
/* 解除確認のみ：1行・中央（幅に合わせて clamp で縮小） */
.dm-confirm-modal .confirm-modal.dm-confirm-modal-wide.dm-confirm-modal--minimal {
    max-width: min(98vw, 480px);
}
.dm-confirm-modal .confirm-modal.dm-confirm-modal--minimal .confirm-modal-title.dm-confirm-title-single {
    white-space: nowrap;
    text-align: center;
    width: 100%;
    max-width: 100%;
    line-height: 1.35;
    font-size: clamp(10px, 3.15vw, 22px);
    box-sizing: border-box;
}

.confirm-modal-message {
    font-size: 16px;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

.confirm-modal-message-line.is-head {
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
    font-size: clamp(13px, 3.9vw, 16px);
}

.confirm-modal-actions {
    display: flex;
    gap: 12px;
    padding: 20px 24px 26px;
    justify-content: center;
    background: var(--color-surface-strong);
}

.confirm-modal-btn {
    padding: 12px 32px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 100px;
}

.confirm-modal-btn-confirm {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(var(--color-primary-rgb), 0.3);
}

.confirm-modal-btn-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.4);
}

.confirm-modal-btn-confirm:active {
    transform: translateY(0);
}

.confirm-modal-btn-cancel {
    background: var(--color-surface-strong);
    color: var(--color-text-muted);
    border: 2px solid var(--color-border);
}

.confirm-modal-btn-cancel:hover {
    background: rgba(var(--color-primary-rgb), 0.10);
    border-color: rgba(var(--color-primary-rgb), 0.28);
}

@media (max-width: 768px) {
    .confirm-modal {
        max-width: 90%;
    }

    .confirm-modal-icon {
        padding: 22px 20px 14px;
    }

    .confirm-modal-content {
        padding: 18px 20px 10px;
    }
    
    .confirm-modal-actions {
        flex-direction: column;
        padding: 16px 18px 22px;
    }
    
    .confirm-modal-btn {
        width: 100%;
    }
}

/* 認証ページ（ログイン・サインアップ等）: ピンク本文とフッターの間の白帯をなくす */
body.auth-page {
    background: linear-gradient(135deg, var(--color-primary-strong) 0%, var(--color-primary) 55%, var(--color-header-3) 100%);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

body.auth-page.has-fixed-header {
    padding-top: 0 !important;
}

body.auth-page .signup-page,
body.auth-page .login-page,
body:has(> .success-page) .success-page {
    flex: 1 0 auto;
    width: 100%;
    box-sizing: border-box;
}

body.auth-page .footer,
body:has(> .success-page) .footer {
    margin-top: 0;
    flex-shrink: 0;
    width: 100%;
}

body:has(> .success-page) {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* ログイン／サインアップ等（.auth-page）のモーダル：本文の折り返し・スマホ可読性 */
.auth-page-modal-overlay .confirm-modal.auth-page-confirm-modal {
    max-width: min(420px, 92vw);
}
.auth-page-modal-overlay .confirm-modal-title {
    font-size: clamp(1rem, 4.2vw, 1.35rem);
    line-height: 1.35;
    margin: 0 0 12px;
    overflow-wrap: anywhere;
    word-break: normal;
}
.auth-page-modal-overlay .confirm-modal-message {
    font-size: clamp(0.875rem, 3.5vw, 1rem);
    line-height: 1.65;
    text-align: left;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}
.auth-page-modal-overlay.auth-page-modal-overlay--error .confirm-modal-icon {
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.12) 0%, var(--color-surface) 100%);
    border-bottom-color: rgba(220, 38, 38, 0.2);
}
.auth-page-modal-overlay.auth-page-modal-overlay--error .confirm-modal-icon svg {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.35);
}
.auth-page-modal-overlay .auth-page-modal-actions--single {
    padding-top: 8px;
}
@media (max-width: 768px) {
    .auth-page-modal-overlay .confirm-modal.auth-page-confirm-modal {
        max-width: min(400px, 94vw);
    }
    .auth-page-modal-overlay .confirm-modal-content {
        padding: 22px 18px 20px;
    }
    .auth-page-modal-overlay .confirm-modal-actions {
        padding: 16px 18px 22px;
    }
}

/* レビュー保存完了ポップアップ（サイトデザインに合わせた専用UI） */
.review-success-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10050;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    backdrop-filter: blur(4px);
}

.review-success-overlay.active {
    opacity: 1;
    visibility: visible;
}

.review-success-modal {
    background: #fff;
    width: 90%;
    max-width: 380px;
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(102, 126, 234, 0.25);
    transform: scale(0.92);
    transition: transform 0.25s ease;
    overflow: hidden;
}

.review-success-overlay.active .review-success-modal {
    transform: scale(1);
}

.review-success-modal .review-success-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 24px 20px;
    background: var(--gradient-primary);
    color: #fff;
}

.review-success-modal .review-success-icon-wrap svg {
    width: 52px;
    height: 52px;
}

.review-success-modal .review-success-message {
    padding: 24px 24px 20px;
    font-size: 16px;
    color: #333;
    text-align: center;
    line-height: 1.6;
    margin: 0;
}

.review-success-modal .review-success-actions {
    padding: 0 24px 24px;
    display: flex;
    justify-content: center;
}

.review-success-modal .review-success-ok {
    padding: 12px 40px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: 0 4px 14px rgba(var(--color-primary-rgb), 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.review-success-modal .review-success-ok:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(var(--color-primary-rgb), 0.4);
}

.review-success-modal .review-success-ok:active {
    transform: translateY(0);
}

/* レビュー削除確認ポップアップ（サイトデザインに合わせた専用UI） */
.review-delete-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10050;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    backdrop-filter: blur(4px);
}

.review-delete-confirm-overlay.active {
    opacity: 1;
    visibility: visible;
}

.review-delete-confirm-modal {
    background: #fff;
    width: 90%;
    max-width: 380px;
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
    transform: scale(0.92);
    transition: transform 0.25s ease;
    overflow: hidden;
}

.review-delete-confirm-overlay.active .review-delete-confirm-modal {
    transform: scale(1);
}

.review-delete-confirm-modal .review-delete-confirm-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 24px 16px;
    background: var(--gradient-primary);
    color: #fff;
}

.review-delete-confirm-modal .review-delete-confirm-icon-wrap svg {
    width: 48px;
    height: 48px;
}

.review-delete-confirm-modal .review-delete-confirm-message {
    padding: 22px 24px 24px;
    font-size: 16px;
    color: #333;
    text-align: center;
    line-height: 1.6;
    margin: 0;
}

.review-delete-confirm-modal .review-delete-confirm-actions {
    padding: 0 24px 24px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.review-delete-confirm-modal .review-delete-confirm-btn {
    padding: 12px 28px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.review-delete-confirm-modal .review-delete-confirm-cancel {
    background: #f5f5f5;
    color: #666;
    border: 2px solid #e0e0e0;
}

.review-delete-confirm-modal .review-delete-confirm-cancel:hover {
    background: #e8e8e8;
    border-color: #d0d0d0;
}

.review-delete-confirm-modal .review-delete-confirm-delete {
    background: linear-gradient(135deg, #e5534b 0%, #c53030 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(229, 83, 75, 0.35);
}

.review-delete-confirm-modal .review-delete-confirm-delete:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(229, 83, 75, 0.45);
}

.review-delete-confirm-modal .review-delete-confirm-delete:active {
    transform: translateY(0);
}

/* ========== iPad・スマホ最適化（共通） styles_responsive.css の内容 ========== */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body {
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.header {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* iPad: 後続の overflow-x:hidden / min-width:44px より優先 */
@media (min-width: 769px) and (max-width: 1366px) {
    .header {
        overflow-x: clip;
    }

    .header-top {
        overflow: visible;
    }

    .header-submenu .submenu-item,
    .header-submenu a.header-mobile-search-link,
    .header-submenu .burger-menu {
        min-width: 0;
    }

    .header-submenu .submenu-item.header-profile-nav-link,
    .header-submenu .submenu-item.header-login-nav-link {
        min-height: 36px;
    }
}

.header-top {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

.header-logo-section {
    min-width: 0;
}

.container {
    max-width: 100%;
    box-sizing: border-box;
}

a.menu-item,
button.ranking-tab,
.ranking-status-btn,
.burger-menu,
a.header-mobile-search-link,
.mobile-menu-item,
.submenu-item,
.search-input,
.btn,
button[type="submit"] {
    min-height: 44px;
}
button.ranking-tab,
.ranking-status-btn,
.burger-menu,
a.header-mobile-search-link,
.mobile-menu-item,
.submenu-item,
.btn,
button[type="submit"] {
    min-width: 44px;
}
.burger-menu {
    min-width: 48px;
    min-height: 48px;
    padding: 12px;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    .header-logo-section--has-mobile-tagline {
        flex: 1 1 0;
        min-width: 0;
        max-width: calc(100% - 104px);
        align-items: center;
        gap: 0;
        overflow: hidden;
    }

    .header-logo-section--has-mobile-tagline .logo.logo--image-link {
        flex: 0 0 auto;
        max-width: 80px;
        padding-right: 7px;
        margin-right: 7px;
        border-right: 1px solid rgba(255, 255, 255, 0.32);
        box-sizing: border-box;
    }

    .header-logo-section--has-mobile-tagline .site-logo-img {
        --header-logo-slot-height: 42px;
        height: 42px;
        max-height: 42px;
        width: auto;
        max-width: 100%;
    }

    .header-mobile-tagline {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 4px;
        flex: 1 1 0;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        padding: 2px 4px 2px 0;
        overflow: hidden;
        box-sizing: border-box;
    }

    .header-mobile-tagline__line {
        display: block;
        margin: 0;
        padding: 0;
        max-width: 100%;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.94);
        text-shadow: 0 1px 8px rgba(58, 12, 42, 0.18);
    }

    /* 1行目・2行目とも折り返さない（計2行）。はみ出しは親でクリップ */
    .header-mobile-tagline__line--lead,
    .header-mobile-tagline__line--sub {
        display: block;
        width: 100%;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: clip;
        word-break: keep-all;
        overflow-wrap: normal;
        box-sizing: border-box;
    }

    .header-mobile-tagline__line--lead {
        font-size: clamp(10px, 2.85vw, 12px);
        font-weight: 600;
        letter-spacing: 0.03em;
        line-height: 1.35;
    }

    .header-mobile-tagline__accent {
        font-weight: 800;
        letter-spacing: 0.035em;
        color: #fff;
        text-shadow: 0 0 12px rgba(255, 255, 255, 0.22);
    }

    .header-mobile-tagline__line--sub {
        font-size: clamp(9px, 2.5vw, 10.5px);
        font-weight: 500;
        color: rgba(255, 255, 255, 0.85);
        letter-spacing: 0.04em;
        line-height: 1.32;
    }

    .header-top {
        gap: 8px;
        align-items: center;
        min-height: 56px;
    }

    .header-submenu {
        flex-shrink: 0;
        position: relative;
        z-index: 2;
    }

    .header {
        transition: padding 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    }

    .header-top {
        transition: min-height 0.22s ease, padding-left 0.22s ease, padding-right 0.22s ease, gap 0.22s ease;
    }

    .header-logo-section--has-mobile-tagline .site-logo-img {
        transition: height 0.22s ease, max-height 0.22s ease;
    }

    .header-mobile-search-link,
    .burger-menu {
        transition: width 0.18s ease, height 0.18s ease, min-width 0.18s ease, min-height 0.18s ease, background 0.18s ease, transform 0.15s ease;
    }

    .header.header--compact {
        padding: 4px 0;
        box-shadow: 0 3px 12px rgba(24, 38, 92, 0.15);
    }

    .header.header--compact .header-top {
        min-height: 40px;
        gap: 5px;
    }

    .header.header--compact .header-logo-section--has-mobile-tagline {
        max-width: calc(100% - 80px);
        overflow: hidden;
    }

    .header.header--compact .header-logo-section--has-mobile-tagline .logo.logo--image-link {
        max-width: 68px;
        padding-right: 6px;
        margin-right: 6px;
        border-right: 1px solid rgba(255, 255, 255, 0.28);
    }

    .header.header--compact .site-logo-img {
        --header-logo-slot-height: 32px;
        height: 32px;
        max-height: 32px;
    }

    .header.header--compact .header-mobile-tagline {
        display: flex;
        gap: 2px;
        padding: 0 2px 0 0;
    }

    .header.header--compact .header-mobile-tagline__line--lead {
        font-size: clamp(8.5px, 2.4vw, 10px);
        line-height: 1.28;
        letter-spacing: 0.02em;
    }

    .header.header--compact .header-mobile-tagline__line--sub {
        font-size: clamp(7.5px, 2.1vw, 9px);
        line-height: 1.26;
        letter-spacing: 0.03em;
    }

    .header.header--compact .header-mobile-search-link,
    .header.header--compact .burger-menu {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
        border-radius: 10px;
    }

    .header.header--compact .header-mobile-search-link__icon {
        width: 16px;
        height: 16px;
    }

    .header.header--compact .burger-menu span {
        width: 14px;
        height: 2px;
        margin: 1.5px 0;
    }

    body.has-bottom-nav {
        padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    }

    .header-submenu {
        gap: 8px;
    }

    .header-mobile-search-link,
    .burger-menu {
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.34);
        background: rgba(255, 255, 255, 0.16);
        box-shadow: 0 4px 14px rgba(10, 18, 46, 0.22);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        align-items: center;
        justify-content: center;
    }

    .burger-menu {
        z-index: 10040;
    }

    .header-mobile-search-link__icon {
        width: 20px;
        height: 20px;
    }

    .burger-menu span {
        width: 18px;
        height: 2px;
        margin: 2px 0;
    }

    .burger-menu.active span:nth-child(1) {
        transform: rotate(45deg) translate(4px, 4px);
    }

    .burger-menu.active {
        background: var(--color-primary-soft);
        border-color: rgba(var(--color-primary-rgb), 0.45);
        box-shadow: 0 6px 18px rgba(var(--color-primary-rgb), 0.22);
    }

    .burger-menu.active span {
        background-color: var(--color-primary-strong);
    }

    .burger-menu.active span:nth-child(3) {
        transform: rotate(-45deg) translate(4px, -4px);
    }

    .mobile-menu {
        top: 0;
        right: 0;
        width: min(80vw, 320px);
        max-width: 320px;
        height: 100dvh;
        border-top-left-radius: 18px;
        border-bottom-left-radius: 18px;
        background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-strong) 100%);
        border-left: 1px solid rgba(var(--color-primary-rgb), 0.14);
        box-shadow: -10px 0 36px rgba(17, 28, 68, 0.22);
        transform: translateX(104%);
        transition: transform 0.28s ease;
        will-change: transform;
    }

    .mobile-menu.active {
        transform: translateX(0);
    }

    .mobile-menu-overlay {
        background: rgba(10, 17, 45, 0.38);
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
    }

    .bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10030;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        background: rgba(255, 255, 255, 0.96);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.08);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-top-left-radius: 14px;
        border-top-right-radius: 14px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .bottom-nav.bottom-nav--with-dm {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .bottom-nav:not(.bottom-nav--with-dm) .bottom-nav-item--dm {
        display: none !important;
    }
    .bottom-nav:not(.bottom-nav--with-dm) .bottom-nav-item--watch-status {
        display: none !important;
    }

    .bottom-nav-item {
        min-height: 58px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        text-decoration: none;
        color: var(--color-text-muted);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.01em;
        border-top: 3px solid transparent;
        transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
        padding: 4px 2px 4px;
    }

    .bottom-nav-item.is-active {
        color: var(--color-primary-strong);
        border-top-color: var(--color-primary);
        background: linear-gradient(180deg, rgba(var(--color-primary-rgb), 0.14) 0%, rgba(var(--color-primary-rgb), 0.04) 100%);
    }

    .bottom-nav-label {
        white-space: nowrap;
        font-size: 10px;
        line-height: 1.1;
    }

    .bottom-nav-icon-wrap {
        width: 24px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: inherit;
        position: relative;
    }

    .bottom-nav-icon {
        width: 21px;
        height: 21px;
        display: block;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .bottom-nav-dm-badge {
        position: absolute;
        top: -2px;
        right: -6px;
        min-width: 15px;
        height: 15px;
        border-radius: 999px;
        padding: 0 4px;
        background: var(--color-danger);
        color: #fff;
        font-size: 9px;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #fff;
        line-height: 1;
        box-sizing: border-box;
    }

    .header-mobile-search-link {
        display: inline-flex;
        color: #fff;
        text-decoration: none;
        transition: background 0.2s ease, transform 0.15s ease;
    }

    .header-mobile-search-link:active {
        background: rgba(255, 255, 255, 0.22);
        transform: scale(0.97);
    }

    .search-page-form {
        display: block;
        margin-top: 10px;
        margin-bottom: 16px;
        padding: 12px;
    }

    .search-page-form-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .search-page-type-toggle {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .search-page-type-btn {
        width: 100%;
        padding: 10px 0;
    }

    .search-page-input {
        width: 100%;
        flex-basis: 100%;
    }

    .search-page-submit {
        width: 100%;
        min-height: 44px;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding-left: 24px;
        padding-right: 24px;
    }
    .header-top {
        padding-left: 24px;
        padding-right: 24px;
    }
    .anime-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    .ranking-page-container {
        padding-left: 24px;
        padding-right: 24px;
    }
    .ranking-tabs {
        flex-wrap: wrap;
        gap: 10px;
    }
    .ranking-tab {
        padding: 14px 20px;
        font-size: 14px;
    }

    /* iPad: ドロワー（ハンバーガーメニュー）をタブレット向けに調整（PC/スマホには影響しない） */
    .mobile-menu {
        width: min(44vw, 380px);
        right: -120%;
        background: var(--color-surface);
        box-shadow: -10px 0 32px rgba(0, 0, 0, 0.16);
    }
    .mobile-menu-content {
        padding: 92px 18px 18px 18px;
        gap: 10px;
    }
    .mobile-menu-item {
        min-height: 54px;
        border-radius: 12px;
        color: var(--color-text);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    }
    .mobile-menu-item:hover {
        background: rgba(var(--color-primary-rgb), 0.06);
        transform: none;
    }
    .mobile-menu-icon {
        color: var(--color-primary);
    }
    .mobile-menu-divider {
        background-color: rgba(var(--color-primary-rgb), 0.16);
    }
}

@media (min-width: 900px) and (max-width: 1024px) {
    /* iPad（横向き寄り）: カード密度を少し上げる */
    .anime-cards,
    .ranking-section .anime-cards,
    .recommendation-section .anime-cards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (max-width: 768px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    .header-top {
        padding-left: 16px;
        padding-right: 16px;
        flex-wrap: nowrap;
        min-height: 64px;
    }
    .header-logo-section {
        min-width: 0;
    }
    .header-logo-section:not(.header-logo-section--has-mobile-tagline) .site-logo-img {
        --header-logo-slot-height: 60px;
    }
    .logo {
        font-size: 18px;
    }
    .footer-site-logo-img {
        height: 44px;
        max-width: 240px;
    }
    .mobile-menu-content {
        padding-top: max(74px, env(safe-area-inset-top, 20px) + 34px);
        padding-left: max(10px, env(safe-area-inset-left, 0) + 8px);
        padding-right: max(10px, env(safe-area-inset-right, 0) + 8px);
        padding-bottom: max(16px, env(safe-area-inset-bottom, 0) + 14px);
        gap: 8px;
    }
    .mobile-menu-item {
        min-height: 46px;
        padding: 11px 10px;
        font-size: 15px;
        font-weight: 650;
        color: var(--color-text);
        background: var(--color-surface);
        border: 1px solid rgba(91, 107, 180, 0.16);
        box-shadow: 0 2px 8px rgba(18, 31, 83, 0.06);
        border-radius: 12px;
        transform: none;
    }
    .mobile-menu-item span {
        line-height: 1.25;
    }
    .mobile-menu-item[href*="works/"] {
        background: linear-gradient(180deg, rgba(var(--color-primary-rgb), 0.08) 0%, rgba(var(--color-primary-rgb), 0.03) 100%);
        border-color: rgba(var(--color-primary-rgb), 0.20);
    }
    .mobile-menu-item:active {
        transform: scale(0.985);
    }
    .mobile-menu-item:hover {
        transform: none;
        background: rgba(var(--color-primary-rgb), 0.06);
    }
    .mobile-menu-icon {
        width: 18px;
        height: 18px;
        color: var(--color-primary);
    }
    .mobile-menu-divider {
        margin: 6px 2px 8px;
        background-color: rgba(var(--color-primary-rgb), 0.16);
    }
    .mobile-search-input {
        font-size: 16px;
        min-height: 44px;
    }
    .mobile-search-container--integrated .search-inline-mode {
        font-size: 16px;
    }
    .recommendation-title {
        font-size: 22px;
    }
    .slider-container {
        padding: 0 8px;
    }
    .slide-item {
        width: 104px;
    }
    .slide-item img {
        max-height: 156px;
    }
    .ranking-page-container {
        padding: 24px 16px 48px;
    }
    .ranking-page-title {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }
    .ranking-tabs {
        margin-bottom: 20px;
        gap: 8px;
    }
    .ranking-tab {
        padding: 12px 16px;
        font-size: 13px;
        flex: 1 1 auto;
        min-width: 0;
    }
    .ranking-row {
        padding: 14px 12px;
    }
    .ranking-anime-image {
        width: 56px;
        height: 78px;
        flex-shrink: 0;
    }
    .ranking-anime-title {
        font-size: 14px;
    }
    .ranking-status-btn {
        padding: 10px 14px;
        min-height: 44px;
    }
    .detail-wrapper {
        padding-left: 16px;
        padding-right: 16px;
    }
    /* スマホ：シリーズ／関連作品は横スクロール（グリッド子の min-width:auto ではみ出すのを防ぐ） */
    .detail-related-series {
        min-width: 0;
        max-width: 100%;
    }
    /* 見出し・タグだけ左右に余白。横スクロール列は白枠の左右いっぱい（左の白帯をなくす） */
    .detail-related-series .detail-related-head {
        flex-wrap: wrap;
        min-width: 0;
        gap: 8px 10px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .detail-related-series .detail-section-heading {
        min-width: 0;
    }
    .detail-related-series .detail-related-box {
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
        padding: 20px 0;
    }
    .detail-related-series .detail-related-list {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        min-width: 0;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        max-width: 100%;
        /* 初期表示で1枚目が左端に張り付かないよう、少し右にスクロールした見え方 */
        padding: 2px 12px 14px 12px;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scroll-padding: 0 12px;
        overscroll-behavior-x: contain;
    }
    .detail-related-series .detail-related-list::-webkit-scrollbar {
        height: 6px;
    }
    /* 約3枚＋4枚目が少し見える幅（3等分に固定しない。gap 10px×3 を想定して /3.2） */
    .detail-related-series .detail-related-card {
        flex: 0 0 calc((100% - 30px) / 3.2);
        min-width: 0;
        max-width: calc((100% - 30px) / 3.2);
        scroll-snap-align: start;
    }
    /* 画像を大きく見せる：サムネの縦比を上げ、下の文字は小さく・余白を詰める */
    .detail-related-series .detail-related-thumb {
        padding-top: 148%;
    }
    .detail-related-series .detail-related-meta {
        padding: 5px 6px 7px;
        gap: 2px;
    }
    .detail-related-series .detail-related-title {
        font-size: 11px;
        font-weight: 700;
        line-height: 1.25;
    }
    .detail-related-series .detail-related-season {
        font-size: 9px;
        font-weight: 600;
    }
    .detail-related-series .detail-related-season::before {
        font-size: 9px;
    }
    /* おすすめは従来通り2列 */
    .detail-recommend-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .detail-related-item img,
    .recommend-image-wrapper img {
        height: 160px;
    }
    .footer-content {
        flex-direction: column;
        gap: 24px;
        padding: 24px 16px;
        padding-bottom: max(24px, env(safe-area-inset-bottom, 0) + 24px);
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }
    .header-top {
        padding-left: 12px;
        padding-right: 12px;
        flex-direction: row;
        justify-content: space-between;
    }
    .logo {
        font-size: 16px;
    }
    .site-logo-img {
        --header-logo-slot-height: 52px;
    }
    .recommendation-title {
        font-size: 18px;
    }
    .slide-item {
        width: 92px;
    }
    .slide-item img {
        max-height: 138px;
    }
    .ranking-page-container {
        padding: 20px 12px 40px;
    }
    .ranking-page-title {
        font-size: 1.35rem;
    }
    .ranking-tab {
        font-size: 12px;
        padding: 10px 12px;
    }
    .ranking-anime-image {
        width: 48px;
        height: 67px;
    }
    .ranking-anime-info {
        min-width: 0;
    }
    .ranking-anime-title {
        font-size: 13px;
        -webkit-line-clamp: 2;
    }
    .detail-related-list,
    .detail-recommend-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .detail-related-item img,
    .recommend-image-wrapper img {
        height: 140px;
    }
    .related-title,
    .recommend-title {
        font-size: 12px;
    }
}

.profile-page-new {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* hidden だと縦が auto 扱いになり sticky の基準が変わる（プロフィール左バーがタブでずれる） */
    overflow-x: clip !important;
    overflow-y: visible !important;
}

.profile-layout {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.profile-main {
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
}

.profile-customizable-wrapper,
#customizableArea.profile-customizable-area,
#customSectionsContainer.profile-custom-sections-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.profile-header-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.profile-banner-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.profile-banner-inner {
    box-sizing: border-box;
}

.profile-banner-image {
    max-width: 100%;
    box-sizing: border-box;
}

.profile-header-info {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.profile-header-name-row {
    min-width: 0;
}
.profile-header-name {
    min-width: 0;
}
.profile-header-edit-btn {
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .profile-page-new {
        padding-left: env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
    }
    .profile-layout {
        padding-left: max(20px, env(safe-area-inset-left, 0) + 20px);
        padding-right: max(20px, env(safe-area-inset-right, 0) + 20px);
    }
    .profile-header-info {
        flex-wrap: wrap;
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .profile-page-new {
        padding: 16px 0;
    }
    .profile-layout {
        padding-left: max(16px, env(safe-area-inset-left, 0) + 16px);
        padding-right: max(16px, env(safe-area-inset-right, 0) + 16px);
    }
    .profile-edit-sidebar-btn,
    .sidebar-menu-item {
        min-height: 48px;
        padding: 12px 16px;
    }
    .stats-cards {
        flex-direction: column;
    }
    .stats-card {
        min-width: 100%;
    }
    .user-stats-section .stats-cards--user {
        flex-direction: column;
    }
    .user-stats-section .stats-card--reviews,
    .user-stats-section .stats-card--likes {
        min-width: 100%;
    }
}

@media (max-width: 480px) {
    .profile-layout {
        padding-left: max(12px, env(safe-area-inset-left, 0) + 12px);
        padding-right: max(12px, env(safe-area-inset-right, 0) + 12px);
    }
    .profile-sidebar {
        padding: 16px 12px;
    }
    .mylist-tab {
        padding: 10px 14px;
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .modal-content {
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        margin: 12px;
        overflow-y: auto;
    }
    .confirm-modal-overlay {
        padding: 16px;
    }
    .confirm-modal {
        max-width: 100%;
    }
    .status-popup-overlay {
        padding: 16px;
    }
    .status-popup {
        max-width: calc(100vw - 32px);
    }
}

.stats-season-chart-scroll,
.stats-follow-chart-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.mylist-tabs {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
}

@media (hover: none) {
    .stats-season-chart-scroll::-webkit-scrollbar,
    .stats-follow-chart-scroll::-webkit-scrollbar {
        height: 4px;
    }
}

/* ===== Mobile optimization overrides (public) ===== */
@media (max-width: 768px) {
    /* TOP ランキング見出し＋「一覧を見る」：横並びだとボタンが見出しと重なるため縦積み */
    .ranking-header {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 14px;
        margin-bottom: 18px;
        padding-left: 0;
        padding-right: 0;
    }

    .ranking-title {
        width: 100%;
        padding-left: 4px;
        padding-right: 4px;
        box-sizing: border-box;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        font-size: clamp(1.2rem, 5.2vw, 1.85rem);
        line-height: 1.35;
    }

    .ranking-actions {
        position: static;
        transform: none;
        top: auto;
        right: auto;
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 0;
    }

    .ranking-actions .ranking-all-link {
        margin-top: 0;
        white-space: normal;
        text-align: center;
        line-height: 1.4;
        max-width: 100%;
        padding: 10px 14px;
    }

    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .header-top {
        gap: 8px !important;
        min-height: 56px;
    }

    .header-menu {
        gap: 6px !important;
    }

    .header-submenu {
        gap: 6px !important;
    }

    .menu-item,
    .submenu-item {
        padding: 8px 10px;
        font-size: 12px;
    }

    .slider-section {
        padding: 6px 0 4px;
    }

    .slider-wrapper {
        gap: 10px;
        padding: 6px 0 6px;
    }

    .slide-item {
        width: 92px;
    }

    .slide-item img {
        max-height: 132px;
        border-radius: 8px;
    }

    .anime-cards,
    .ranking-section .anime-cards,
    .recommendation-section .anime-cards,
    .season-anime-cards,
    .season-anime-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    /* グリッドカード：縦幅を抑えつつ評価は縦積み（横詰めによるスコア切れ防止） */
    .anime-card:not(.anime-card--list) .anime-card-image {
        height: auto !important;
        min-height: 0 !important;
        flex: 0 0 auto !important;
        aspect-ratio: 2 / 3;
        max-height: 150px;
    }

    .anime-card:not(.anime-card--list) .anime-card-image img {
        object-fit: contain !important;
        object-position: center center;
        background: linear-gradient(180deg, #f0f2f6 0%, #e6e9f0 100%);
    }

    .ranking-section .anime-card-image img,
    .recommendation-section .anime-card-image img {
        object-fit: contain !important;
        object-position: center center;
        background: linear-gradient(180deg, #f0f2f6 0%, #e6e9f0 100%);
    }

    .anime-card:not(.anime-card--list) .favorite-btn {
        width: 30px;
        height: 30px;
        font-size: 17px;
        top: 6px;
        right: 5px;
    }

    .anime-card:not(.anime-card--list) .rank-badge:not(.rank-1):not(.rank-2):not(.rank-3) {
        width: 26px;
        height: 26px;
        font-size: 12px;
        top: 5px;
        left: 5px;
    }

    .anime-card:not(.anime-card--list) .rank-badge.rank-1,
    .anime-card:not(.anime-card--list) .rank-badge.rank-2,
    .anime-card:not(.anime-card--list) .rank-badge.rank-3 {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }

    .anime-card-content {
        padding: 8px 6px 10px;
    }

    .anime-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 2.4em;
        line-height: 1.3;
        font-size: 12px;
        padding: 4px 2px;
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    /* 3列カード：評価＋ステータスを横並び固定（重なり防止） */
    .anime-card:not(.anime-card--list) .anime-score-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        justify-content: stretch;
        gap: 4px;
        flex-wrap: nowrap;
    }

    .anime-card:not(.anime-card--list) .anime-score-section {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
    }

    .anime-card:not(.anime-card--list) .anime-score {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        display: inline-flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        padding: 5px 6px 8px;
        padding-top: 11px;
    }

    /* 評価0件（ーー）：枠いっぱいに広がらず右端ギリギリにならないよう調整 */
    .anime-card:not(.anime-card--list) .anime-score:has(.anime-score--unrated) {
        width: fit-content;
        max-width: 100%;
        padding-right: 10px;
        gap: 3px;
    }

    .anime-card:not(.anime-card--list) .anime-score-count-badge {
        font-size: 7px;
        padding: 2px 4px;
        top: -5px;
        left: 5px;
        letter-spacing: 0;
    }

    .anime-card:not(.anime-card--list) .star-icon {
        font-size: 14px;
    }

    .anime-card:not(.anime-card--list) .anime-score-value {
        font-size: 13px;
        min-width: 0;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .anime-card:not(.anime-card--list) .anime-score:has(.anime-score--unrated) .anime-score-value {
        text-align: left;
        padding-right: 2px;
    }

    .anime-card:not(.anime-card--list) .anime-score-value .anime-score--unrated {
        letter-spacing: 0;
        font-size: 12px;
        padding-right: 1px;
    }

    .anime-card:not(.anime-card--list) .status-selector {
        flex: 0 0 auto;
        flex-shrink: 0;
        align-self: flex-end;
    }

    .anime-card:not(.anime-card--list) .status-main-btn {
        flex-direction: column;
        min-width: 36px;
        max-width: 38px;
        width: 36px;
        height: 30px;
        padding: 2px;
        gap: 0;
        border-radius: 6px;
    }

    .anime-card:not(.anime-card--list) .status-icon {
        font-size: 15px;
    }

    .anime-card:not(.anime-card--list) .status-label {
        display: none;
    }

    .detail-wrapper {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .work-info-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 430px) {
    .anime-cards,
    .ranking-section .anime-cards,
    .recommendation-section .anime-cards,
    .season-anime-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .season-anime-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .ranking-title {
        font-size: clamp(1.15rem, 5vw, 1.75rem);
    }

    .detail-submenu {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .detail-submenu-item {
        min-height: 40px;
        padding: 8px 10px;
        font-size: 13px;
    }

    .detail-my-score-main {
        gap: 8px;
        flex-wrap: wrap;
    }

    .detail-my-score-edit-btn {
        width: 100%;
    }

    .work-info-table th,
    .work-info-table td {
        font-size: 12px;
        padding: 8px;
        white-space: normal;
        word-break: break-word;
    }
}

/* ===== Final mobile polish: overflow guards ===== */
@media (max-width: 768px) {
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .anime-card,
    .detail-wrapper,
    .review-item,
    .admin-card,
    .profile-header-section,
    .profile-main,
    .profile-sidebar {
        min-width: 0;
    }

    .anime-title,
    .detail-title-main,
    .review-title,
    .review-text,
    .search-suggestion-title,
    .profile-header-name,
    .profile-header-bio {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .header-menu,
    .header-submenu,
    .admin-header-actions {
        flex-wrap: wrap;
    }

    .detail-streaming-links {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* マイスコア表示の最終上書き（スマホで右寄りになる崩れを防止） */
@media (max-width: 1024px) {
    .detail-my-score-section {
        padding-right: 0 !important;
    }
    .detail-my-score-main {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    .detail-my-score-edit-btn,
    .detail-my-score-info,
    .detail-my-score-status,
    .detail-my-score-episode,
    .detail-my-score-period {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

.season-nav-btn--disabled,
.ranking-season-nav-btn--disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
}