@charset "utf-8";
/* CSS Document */

/* =========================================================
   1. 全体設定・ルート変数
   ========================================================= */

/* ボックスモデルの共通化 */
* {
    box-sizing: border-box;
}

/* ルートのフォントサイズ定義 */
html {
    font-size: 16px;
}

/* ページ全体の基本スタイル */
/* ページ全体の基本スタイル */
body {
    margin: 0;
    /* 下部に固定ナビ（50音ナビ等）が被らないよう余白を確保 */
    padding: 0 0 120px 0;

    /* 背景色（画像が読み込まれるまでのフォールバック） */
    background: #f8f8f8;
    
    /* 基本の文字色（タイトル・曲名等：--text-color） */
    color: var(--text-color, #222222);

    /* ★ 修正：JavaScriptから指定される動的フォント変数を受け取れるように変更 */
    font-family: var(--dynamic-font, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif);

    /* 行間を広げて読みやすく */
    line-height: 1.6;
    position: relative;
}

/* 疑似要素を使った画面固定背景 */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* 背景画像の設定 */
    background-image: var(--background-image, url("background.jpg"));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    z-index: -1;
}

/* メインコンテンツエリア：背景画像の上に透ける白レイヤー */
main {
    background: rgba(255, 255, 255, 0.2);
}


/* =========================================================
   2. ヘッダーエリア
   ========================================================= */

/* ページ上部のヘッダー外枠 */
#page-header {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 16px 10px;
}

/* メニュー開閉ボタン（右上アイコン） */
#menu-button {
    position: absolute;
    top: 16px;
    right: 16px;

    width: 44px;
    height: 44px;

    border: none;
    border-radius: 10px;
    background: transparent;
    color: #f8f8f8;

    font-size: 26px;
    cursor: pointer;
    z-index: 1001;

    -webkit-tap-highlight-color: transparent;
}

/* 検索や設定を格納するパネル */
.menu-panel {
    position: sticky;
    top: 0;
    z-index: 900;

    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 8px 16px;

    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* メニューオープン時の表示切り替え用クラス */
.menu-panel.open {
    display: block;
}

/* パネル内の見出しラベル */
.menu-panel label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
}

/* 検索窓とクリアボタンを横並びにするコンテナ */
.search-box {
    display: flex;
    gap: 8px;
}

/* 楽曲検索入力テキストボックス */
#song-search {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 14px;

    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.45);
    color: var(--text-color, #222222);

    font-family: inherit;
    font-size: 16px;
    outline: none;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 検索入力欄のプレースホルダー */
#song-search::placeholder {
    color: #666;
}

/* 検索入力欄にフォーカスが当たった時のスタイル */
#song-search:focus {
    border-color: #888;
    background: rgba(255, 255, 255, 0.6);
}

/* 検索文字のクリアボタン */
#search-clear {
    display: none;
    height: 44px;
    padding: 0 14px;

    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.45);
    color: var(--text-color, #222222);

    font-family: inherit;
    font-size: 14px;
    cursor: pointer;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 検索文字がある時に表示されるクラス */
#search-clear.visible {
    display: block;
}

/* 配信者名などのタイトルテキスト */
#streamer-name {
    margin: 0 0 5px;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color, #222222);
}

/* 件数表示 */
#song-count {
    margin-bottom: 14px;
    font-size: 14px;
    color: #555;
}


/* =========================================================
   3. お気に入り・フィルターボタンエリア
   ========================================================= */

/* フィルターボタン群の親コンテナ */
#favorite-section {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 5px 16px 15px;
}

/* お気に入りアーティストボタンのラッパー */
#favorite-artists {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    width: 100%;
}

/* 総合フィルターボタンエリア */
#complete-filter-buttons {
    display: flex;
    gap: 7px;
    width: 100%;
    margin-bottom: 7px;
}

#complete-filter-buttons .favorite-button {
    flex: 1;
}

/* フィルターボタンエリア全体の並び */
#filter-buttons {
    display: flex;
    gap: 7px;
    width: 100%;
}

#filter-buttons > #complete-filter {
    flex: 1;
    width: auto;
}

#filter-buttons > #favorite-artists {
    display: flex;
    flex: 2;
    gap: 7px;
}

#filter-buttons .favorite-button {
    flex: 1;
}

/* フィルター用カプセル型ボタンの共通デザイン */
.favorite-button {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;

    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.4);
    color: var(--text-color, #222222);

    font-family: inherit;
    font-size: 13px;
    text-align: center;
    white-space: nowrap;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* フィルターが選択・アクティブな状態 */
.favorite-button.active {
    background: var(--theme-color, #222222);
    color: #ffffff;
    border-color: var(--theme-color, #222222);
}


/* =========================================================
   4. 楽曲リストエリア
   ========================================================= */

/* 楽曲リストのメインカード枠 */
#song-list {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 10px 16px;

    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* アーティスト名の見出し（--artist-color を参照） */
.artist {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 24px;
    padding: 8px 4px 5px;

    font-size: 18px;
    font-weight: 700;
    color: var(--artist-color, var(--text-color, #222222));

    /* 下線は --theme-color を参照 */
    border-bottom: 2px solid var(--theme-color, #184F88);
    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

.artist:first-child {
    margin-top: 0;
}

.artist::after {
    content: "−";
    font-size: 18px;
    font-weight: 400;
}

.artist.collapsed::after {
    content: "+";
}

.artist-songs {
    overflow: hidden;
}

.artist-songs.collapsed {
    display: none;
}

/* 各楽曲1件ごとのスタイル（本文の文字色 --text-color に設定） */
.song {
    padding: 9px 5px;
    font-size: 16px;
    color: var(--text-color, #222222);
}


/* =========================================================
   5. 50音インデックスナビ（画面下部固定）
   ========================================================= */

#artist-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;

    width: 100%;
    padding: 8px;

    background: rgba(255, 255, 255, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.08);

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#artist-nav button {
    min-width: 38px;
    min-height: 38px;
    padding: 5px 8px;

    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 8px;

    background: rgba(255, 255, 255, 0.4);
    color: var(--text-color, #222222);

    font-family: inherit;
    font-size: 14px;
    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

#artist-nav button.active {
    background: var(--theme-color, rgba(34, 34, 34, 0.85));
    color: #ffffff;
    border-color: var(--theme-color, rgba(34, 34, 34, 0.85));
}

#artist-nav button:active {
    transform: scale(0.95);
}


/* =========================================================
   6. レスポンシブ対応：画面幅 400px 以下
   ========================================================= */

@media (max-width: 400px) {

    body {
        padding-bottom: 115px;
    }

    #page-header {
        padding: 16px 12px 8px;
    }

    #streamer-name {
        font-size: 22px;
    }

    #favorite-section,
    #song-list {
        padding-left: 12px;
        padding-right: 12px;
    }

    .artist {
        font-size: 17px;
    }

    .song {
        font-size: 15px;
    }

    #artist-nav {
        padding: 6px;
        gap: 4px;
    }

    #artist-nav button {
        min-width: 34px;
        min-height: 34px;
        padding: 4px 6px;
        font-size: 13px;
    }
}