/* 02-legacy-fav.css — 旧ページのお気に入り表示と、サイバー風の小窓
 *
 * style.css を分けたもの。元は1本の7,600行だった。
 * ⚠️ 読み込む順番を変えないこと。番号の順に重ねることで、
 *    分ける前とまったく同じ見た目になる。あとの番号が勝つ。
 * ⚠️ 新しい指定をここの先頭に足さないこと。
 *    打ち消し合っている指定があるので、置き場所で結果が変わる。
 */
/* ==========================================================
   お気に入りモード（fav-mode）の専用スタイル - コンパクト表示
========================================================== */
body.fav-mode .col-fav {
    width: 40px !important;
    min-width: 40px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    text-align: center !important;
}

body.fav-mode .fav-btn {
    padding: 4px;
    margin: 0 auto;
}

body.fav-mode .cyber-table th,
body.fav-mode .cyber-table td {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 0.95rem;
    /* スマホやPCでの一覧性を高めるため少し文字を縮小 */
}

body.fav-mode .cyber-table th {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

body.fav-mode .cyber-table th.col-fav {
    color: var(--main-accent);
    font-size: 1.2rem;
}

/* ==========================================================
   サイバー風モーダル（ポップアップ）
========================================================== */
.cyber-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 12, 16, 0.85);
    /* 半透明な暗い背景 */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cyber-modal-overlay.show {
    opacity: 1;
}

.modal-content {
    width: 100%;
    max-width: 500px;
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cyber-modal-overlay.show .modal-content {
    transform: scale(1);
}

/* --- THEME TOGGLE & HEADER ADJUSTMENTS --- */
.main-header {
    position: relative;
    padding-top: 40px;
}

.theme-toggle-container {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
}

.theme-toggle {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 4px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.2);
    user-select: none;
    transition: background 0.3s;
}

.theme-label {
    padding: 6px 16px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1px;
    border-radius: 16px;
    transition: all 0.3s;
    color: rgba(255, 255, 255, 0.5);
}

.theme-label.active {
    background: var(--main-accent);
    color: #000;
}

.header-site-type {
    text-align: center;
    color: #cbd5e1;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.attention-divider {
    border: 0;
    height: 1px;
    background: var(--border-color);
    margin: 15px 0;
}

[data-theme="light"] {
    --bg-color: #f0f4f8;
    --text-color: #1a1c23;
    --card-bg: rgba(255, 255, 255, 0.85);
    --border-color: rgba(0, 0, 0, 0.1);
    --glass-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
    --main-accent: #0076a3;
    /* 少し暗くしたシアン */
}

[data-theme="light"] body {
    background-image:
        radial-gradient(circle at 15% 50%, rgba(0, 118, 163, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 85% 30%, rgba(255, 92, 168, 0.05) 0%, transparent 50%);
}

[data-theme="light"] .cyber-button:hover {
    background: #0076a3;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 118, 163, 0.3);
}

[data-theme="light"] .secondary-btn {
    background: #e2e8f0;
    color: #334155;
    border-color: #cbd5e1;
}

[data-theme="light"] .secondary-btn:hover {
    background: #cbd5e1;
    color: #0f172a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .theme-toggle {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .theme-label {
    color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .theme-label.active {
    background: var(--main-accent);
    color: #fff;
}

[data-theme="light"] .header-site-type,
[data-theme="light"] .subtitle {
    color: #64748b;
}

[data-theme="light"] .stats-note {
    color: #0077b6;
    background: rgba(0, 119, 182, 0.08);
    border-color: rgba(0, 119, 182, 0.25);
}

[data-theme="light"] .title-glow {
    color: #0f172a;
    text-shadow: none;
}

[data-theme="light"] .cyber-table th {
    background: color-mix(in srgb, var(--main-accent) 15%, rgba(0, 0, 0, 0.05));
    color: color-mix(in srgb, var(--main-accent) 70%, #000) !important;
}

@supports not (color: color-mix(in srgb, red, blue)) {
    [data-theme="light"] .cyber-table th {
        background: rgba(0, 0, 0, 0.05);
        color: #1e293b !important;
    }
}

[data-theme="light"] .cyber-table tr:nth-child(even) td {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .cyber-table tr:hover td {
    background: rgba(0, 0, 0, 0.04);
}

/* member-btn legacy removed - see .member-card */

[data-theme="light"] .song-title {
    color: #0f172a;
}

[data-theme="light"] .title-link {
    color: #1a1c23;
}

[data-theme="light"] .title-link:hover {
    color: var(--main-accent);
}

[data-theme="light"] td.col-artist,
[data-theme="light"] td.col-singer,
[data-theme="light"] td.col-video-title,
[data-theme="light"] td.col-date {
    color: #475569;
}

[data-theme="light"] .song-details {
    color: #475569;
}

[data-theme="light"] section p,
[data-theme="light"] .cyber-card p {
    color: #334155;
}

/* かつてライトモードで読めなかったメンバー色を、その場で暗くしていた回避策があった。
   いまは --xxx-text がテーマごとに調整済みで --main-accent に入るため不要。
   残すと二重に暗くなり、色が原色から離れてしまう。 */

/* 楽曲数 テキスト自体の可読性向上 */
[data-theme="light"] .song-count {
    color: #475569;
}

/* PROFILEボタンをライトモード向けに調整。
   背景が10%の淡い色なので、文字は白のままだと読めない。
   --main-accent はテーマごとに調整済み（ライトでは必ず4.5:1以上）なのでそのまま使える。
   ⚠️ .cyber-button が -webkit-text-fill-color を持つため、color だけでは効かない。 */
[data-theme="light"] .sns-link-btn {
    background: color-mix(in srgb, var(--main-accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--main-accent) 40%, transparent);
    color: var(--main-accent);
    -webkit-text-fill-color: var(--main-accent);
}

[data-theme="light"] .sns-link-btn:hover {
    background: color-mix(in srgb, var(--main-accent) 20%, transparent);
    color: #fff !important;
}



[data-theme="light"] .unit-label {
    color: #1e293b;
}

[data-theme="light"] .dytica-label {
    color: #3b5bdb;
    /* ダークブルーで可読性UP */
    text-shadow: none;
}

[data-theme="light"] .unit-label.dytica-label::after {
    background: linear-gradient(to right, rgba(59, 91, 219, 0.4), transparent);
}

[data-theme="light"] .oriens-label {
    /* #e85d04 は明るい背景でコントラスト比 3.17 と足りなかったので落としてある（4.69） */
    color: #c2410c;
    text-shadow: none;
}

[data-theme="light"] .unit-label.oriens-label::after {
    background: linear-gradient(to right, rgba(232, 93, 4, 0.4), transparent);
}

[data-theme="light"] .search-box {
    color: #1e293b;
    background: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .search-box::placeholder {
    color: #94a3b8;
}

[data-theme="light"] .sort-btn {
    color: #1e293b;
}

[data-theme="light"] .fab-btn {
    background: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .loading-overlay {
    background: #f0f4f8;
}

[data-theme="light"] .cyber-button:hover {
    color: #fff;
}