/* =====================================================================
   2026-11-11 作り直し：記録のページ・トップの新しい部品・入口のメニュー
   style.css（Tailwind のビルド）は変えずに、ここで足す・上書きする（npm run build は不要）
   色の差は WCAG 2.2 AA（文字 4.5:1・大きい文字と部品 3:1）を満たすように選んだ
   ===================================================================== */
:root {
    --text-muted: #a99bd0;    /* 暗い表示：旧 #8070a8 はカードの上で 4.33（足りない）→ 7.47 */
    --nv-accent-solid: #c23a68; /* 白い文字を載せるピンク（白との差 5.12。#e0527f は 3.7） */
    --nv-link: #f07fa0;       /* 文字のリンク（暗いカードの上で 7.44） */
    --nv-up: #7fd99a;
    --nv-down: #ff9b9b;
}
/* 明るい表示（端末の設定が「ライト」のとき。style.css と同じ切り替え） */
@media (prefers-color-scheme: light) {
    :root {
        --text-muted: #6a5090;  /* style.css の明るい表示の値のまま（白の上で 6.64） */
        --nv-link: #a3305a;     /* 白の上で 6.71・#ede6f8 の上で 5.52 */
        --nv-up: #176a2c;
        --nv-down: #b3261e;
    }
}

/* 白い文字を載せるボタン（今までのページの分も） */
.search-form button, .btn-dmm, .free-cta-btn:not(.free-cta-sub), .nv-btn,
.pagination-page.current, .kana-all-btn.active, .kana-index a.active, .toggle-btn.active, .tab-btn.active {
    background: var(--nv-accent-solid) !important; color: #fff !important;
}
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--nv-link); outline-offset: 2px; }

/* 入口のメニュー（ヘッダーの下） */
.nv-subnav { border-bottom: 1px solid rgba(255, 255, 255, .08); background: rgba(8, 6, 18, .92); }
.nv-subnav-inner { display: flex; gap: 6px; overflow-x: auto; padding-top: 8px; padding-bottom: 8px; scrollbar-width: none; }
.nv-subnav-inner::-webkit-scrollbar { display: none; }
.nv-subnav a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22); color: #ede8f5; font-size: .85rem; text-decoration: none; white-space: nowrap; }
.nv-subnav a:hover { border-color: #f07fa0; }
.nv-subnav a[aria-current] { background: var(--nv-accent-solid); border-color: var(--nv-accent-solid); color: #fff; font-weight: 700; }

/* 見出しと説明 */
.nv-h1 { font-size: 1.35rem; font-weight: 800; margin: 12px 0 8px; line-height: 1.4; }
.nv-lead { font-size: .9rem; line-height: 1.8; color: var(--text); margin: 0 0 16px; }
.nv-note { font-size: .78rem; line-height: 1.7; color: var(--text-muted); margin: 8px 0 0; }
.nv-lead a, .nv-box p a, .nv-note a { text-decoration: underline; text-underline-offset: 2px; color: var(--nv-link); }

/* 箱 */
.nv-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg, 18px); padding: 16px; margin: 16px 0; }
.nv-box h2 { font-size: 1.05rem; font-weight: 800; margin: 0 0 12px; color: var(--text); }
.nv-box p { font-size: .9rem; line-height: 1.8; margin: 0 0 6px; }

/* 数字の並び */
.nv-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 0; }
.nv-stat { background: var(--bg-hover); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.nv-stat dt { font-size: .75rem; color: var(--text-muted); margin: 0 0 2px; }
.nv-stat dd { font-size: 1.05rem; font-weight: 800; margin: 0; color: var(--text); overflow-wrap: anywhere; }
.nv-stat dd small { font-size: .75rem; font-weight: 400; color: var(--text-muted); }

/* 年表（年ごとの本数の棒） */
.nv-bars { display: flex; flex-direction: column; gap: 4px; }
.nv-bar { display: grid; grid-template-columns: 3.4em 1fr auto; align-items: center; gap: 8px; font-size: .8rem; }
.nv-bar-y { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nv-bar-track { height: 12px; background: var(--bg-hover); border-radius: 6px; overflow: hidden; display: flex; }
.nv-bar-solo { background: #f07fa0; }
.nv-bar-co { background: #7a5aa8; }
.nv-bar-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 7.5em; }
.nv-legend { display: flex; gap: 14px; font-size: .75rem; color: var(--text-muted); margin-top: 8px; }
.nv-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

/* チップ（メーカー・共演者など） */
.nv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nv-chips a, .nv-chips span { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 999px;
    background: var(--bg-hover); color: var(--text); font-size: .82rem; text-decoration: none; border: 1px solid transparent; }
.nv-chips a:hover { border-color: var(--nv-link); }
.nv-chips small { color: var(--text-muted); font-size: .75rem; }
.nv-chips a.is-on, .nv-chips a[aria-current] { background: var(--nv-accent-solid); color: #fff; font-weight: 700; }
.nv-chips a.is-on::before { content: "✓"; }
.nv-chips a.is-on small, .nv-chips a[aria-current] small { color: #fff; }

/* 作品のカード */
.nv-works { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.nv-work { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.nv-work-img { position: relative; display: block; aspect-ratio: 147 / 200; background: var(--bg-hover); }
.nv-work-img img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; display: block; }  /* パッケージ（横長・右半分が表紙）の表紙側を見せる */
.nv-badge-vr { position: absolute; top: 6px; left: 6px; background: #3a2a6a; color: #fff; font-size: .75rem; font-weight: 800; padding: 2px 8px; border-radius: 6px; }
.nv-work-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nv-work-note { font-size: .75rem; color: var(--nv-link); font-weight: 700; margin: 0; }
.nv-work-title { font-size: .82rem; line-height: 1.5; color: var(--text); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nv-work-acts, .nv-work-meta { font-size: .78rem; margin: 0; color: var(--text-muted); overflow-wrap: anywhere; }
.nv-work-acts a { color: var(--nv-link); }
.nv-work-meta a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }

/* 女優のカード（デビュー・ランキングの女優） */
.nv-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.nv-act { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; text-decoration: none; color: var(--text); min-width: 0; }
.nv-act img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--bg-hover); display: block; }
.nv-act-body { padding: 8px 10px; }
.nv-act-name { font-weight: 700; font-size: .88rem; overflow-wrap: anywhere; }
.nv-act-sub { font-size: .75rem; color: var(--text-muted); margin-top: 2px; line-height: 1.5; }

/* 表 */
.nv-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nv-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.nv-table th, .nv-table td { padding: 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.nv-table th { color: var(--text-muted); font-weight: 400; font-size: .75rem; white-space: nowrap; }
.nv-table td.num, .nv-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nv-table .up { color: var(--nv-up); }
.nv-table .down { color: var(--nv-down); }
.nv-table td.title a { color: var(--text); }
.nv-table td.title small, .nv-table td.title small a { color: var(--text-muted); font-size: .78rem; }
.nv-table td.title small a { text-decoration: underline; }

/* カレンダー */
.nv-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.nv-cal-h { font-size: .75rem; color: var(--text-muted); text-align: center; padding: 2px 0; }
.nv-cal-d { background: var(--bg-hover); border-radius: 8px; padding: 6px 2px; text-align: center; min-height: 54px; font-size: .75rem; color: var(--text); text-decoration: none; display: block; }
.nv-cal-d b { display: block; font-size: .95rem; }
.nv-cal-d small { color: var(--text-muted); font-size: .75rem; }
a.nv-cal-d:hover { outline: 1px solid var(--nv-link); }
.nv-cal-empty { background: transparent; }

/* ページ送り */
.nv-pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 18px 0; font-size: .88rem; }
.nv-pager a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); text-decoration: none; }

/* 絞り込み（セール） */
.nv-filter summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 44px; cursor: pointer; list-style: none; font-weight: 700; }
.nv-filter summary::-webkit-details-marker { display: none; }
.nv-filter summary::before { content: "▶"; font-size: .75rem; color: var(--text-muted); transition: transform .15s; }
.nv-filter[open] summary::before { transform: rotate(90deg); }
.nv-filter-now { font-weight: 400; font-size: .82rem; color: var(--nv-link); }
.nv-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 0; }
.nv-filter-label { flex: 0 0 6.5em; font-size: .8rem; color: var(--text-muted); }
@media (max-width: 479px) { .nv-filter-label { flex-basis: 100%; } }

/* トップ：今日の新作のサンプル画像 */
.nv-samples { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
@media (min-width: 768px) { .nv-samples { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } }
.nv-sample { position: relative; display: block; border-radius: 12px; overflow: hidden; background: var(--bg-hover); text-decoration: none; color: #fff; }
.nv-sample img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.nv-sample-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px; background: linear-gradient(transparent, rgba(0,0,0,.85));
    font-size: .8rem; line-height: 1.4; }
.nv-sample-cap b { display: block; font-size: .88rem; }
.nv-sample-n { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.72); color: #fff; font-size: .75rem; padding: 2px 8px; border-radius: 999px; }
.nv-more { display: inline-flex; align-items: center; min-height: 40px; margin-top: 10px; color: var(--nv-link); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.nv-section { margin: 24px 0; }
.nv-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; }

.nv-sale-line { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: .85rem; margin: 6px 0; }
.nv-sale-badge { background: #2e7d32; color: #fff; font-weight: 800; padding: 2px 8px; border-radius: 6px; font-size: .8rem; }
.nv-empty { padding: 40px 0; text-align: center; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* 当サイトについて：強調とメールのリンク（明るい表示で #e07090 は白の上で 3.05 → 足りない） */
.about-section strong, .about-contact-email a { color: var(--nv-link); -webkit-text-fill-color: var(--nv-link); }

/* ランキングのカード（順位と前回からの動きを画像の上に） */
.nv-rank-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 768px) { .nv-rank-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
.nv-rank-no { position: absolute; top: 0; left: 0; padding: 4px 10px 4px 8px; background: rgba(8, 6, 18, .82); color: #fff;
    font-size: .8rem; font-weight: 700; border-bottom-right-radius: 12px; line-height: 1.2; }
.nv-rank-no b { font-size: 1.25rem; font-weight: 900; margin-right: 1px; font-variant-numeric: tabular-nums; }
.nv-rank-card.is-top1 .nv-rank-no { background: #8a6100; }   /* 白との差 5.0 以上 */
.nv-rank-card.is-top2 .nv-rank-no { background: #5f6670; }
.nv-rank-card.is-top3 .nv-rank-no { background: #8a4b22; }
.nv-rank-card.is-top .nv-rank-no b { font-size: 1.6rem; }
.nv-rank-card.is-top1 { border-color: #c99a2e; box-shadow: 0 0 0 1px #c99a2e; }
.nv-rank-move { position: absolute; top: 6px; right: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(8, 6, 18, .82);
    color: #fff; font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.nv-rank-move.is-up { color: #7fd99a; }
.nv-rank-move.is-down { color: #ff9b9b; }
.nv-rank-move.is-new { color: #ffd479; }
.nv-badge-vr-bottom { top: auto; bottom: 6px; }
.nv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nv-acts-row { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
/* 1〜3位は大きく（パッケージ全体を横長で） */
.nv-rank-card.is-top { grid-column: span 2; }
.nv-rank-card.is-top .nv-work-img { aspect-ratio: 800 / 538; }
.nv-rank-card.is-top .nv-work-img img { object-position: 50% 50%; }
.nv-rank-card.is-top .nv-work-title { font-size: .92rem; font-weight: 700; -webkit-line-clamp: 2; }
.nv-rank-rec { display: flex; gap: 6px; flex-wrap: wrap; }
.nv-rank-rec span { white-space: nowrap; }