/* --- 基本設定 --- */
        :root {
            /* 2006年テーマカラー (デフォルト) */
            --bg-color: #f0f8ff;       /* 背景色 */
            --header-bg: #4a90e2;      /* ヘッダー背景 */
            --header-text: #fff;       /* ヘッダー文字色 */
            --item-bg: #ffffff;        /* リスト項目の背景 */
            --border-color: #ddeeff;   /* 境界線 */
            --accent-color: #0000ff;   /* リンク色など */
            --hover-color: #e6f2ff;    /* マウスホバー時 */
        }

        /* 2007年テーマ用クラス (bodyタグに class="theme-2007" をつけると切り替わる) */
        .theme-2007 {
            --bg-color: #f0fff0;
            --header-bg: #2e8b57;
            --border-color: #ccffcc;
            --accent-color: #006400;
            --hover-color: #e8f5e9;
        }
        
        /* 2008年テーマ用クラス (bodyタグに class="theme-2008" をつけると切り替わる) */
        .theme-2008 {
            --bg-color: #fffff0;
            --header-bg: #8b8b2e;
            --border-color: #ffffcc;
            --accent-color: #646400;
            --hover-color: #f5f5e9;
        }

        body {
            font-family: "Helvetica Neue", Arial, sans-serif;
            background-color: var(--bg-color);
            color: #333;
            margin: 0;
            padding: 20px;
            font-size: 16px;
        }

        h1 {
            text-align: center;
            color: #444;
            font-size: 1.5rem;
            margin-bottom: 20px;
        }

        /* --- グリッドレイアウト定義 (PC向け) --- */
        .list-container {
            max-width: 1200px;
            margin: 0 auto;
            border: 1px solid var(--border-color);
            background: #fff;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }

        /* カラム幅の定義: 
           番号(50px) | 曲名(可変) | 作曲者(可変) | 時間(60px) | BPM(60px) | Key(50px) | 難易度(60px) | 公開日(100px) 
        */
        .row {
            display: grid;
            grid-template-columns: 50px 2fr 1.5fr 70px 80px 60px 240px 120px;
            gap: 1px; /* グリッド間の隙間 */
            background-color: var(--border-color); /* 隙間の色＝罫線の色になる */
            align-items: stretch;
        }

        /* ヘッダー行のデザイン */
        .header {
            background-color: var(--header-bg);
            color: var(--header-text);
            font-weight: bold;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .header > div {
            padding: 12px 5px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* データ行のデザイン */
        .data-row {
            background-color: var(--item-bg);
            transition: background-color 0.2s;
        }

        .data-row:hover {
            background-color: var(--hover-color);
        }

        .data-row > div {
            background-color: var(--item-bg); /* グリッドギャップで線を見せるため、セル背景を白にする */
            padding: 10px 5px;
            text-align: center;
            display: flex;       /* 内容を中央揃えにするため */
            flex-direction: column;
            justify-content: center;
            align-items: center;
            word-break: break-all; /* 長い単語の折り返し */
        }

        /* 特定カラムの調整 */
        .col-title {
            align-items: flex-start !important; /* 曲名は左寄せ */
            text-align: left !important;
            padding-left: 15px !important;
            font-weight: bold;
        }
        
        .col-artist {
            align-items: flex-start !important; /* アーティスト名も左寄せ */
            text-align: left !important;
            padding-left: 10px !important;
            font-size: 0.95em;
        }

        /* リンクの装飾 */
        a {
            color: var(--accent-color);
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }

        /* 難易度・キーの複数行表示用 */
        .multi-value span {
            display: block;
            border-bottom: 1px dashed #eee;
            width: 100%;
            padding: 2px 0;
        }
        .multi-value span:last-child {
            border-bottom: none;
        }


        /* --- スマホ向けレスポンシブ (カード型表示) --- */
        @media (max-width: 768px) {
            .header {
                display: none; /* スマホではヘッダーを消す */
            }

            .list-container {
                background: transparent;
                border: none;
                box-shadow: none;
            }

            .row.data-row {
                display: flex;
                flex-direction: column;
                background-color: #fff;
                margin-bottom: 15px;
                border-radius: 8px;
                box-shadow: 0 2px 5px rgba(0,0,0,0.1);
                border: 1px solid #ddd;
                overflow: hidden;
                padding: 0;
            }

            .data-row > div {
                display: flex;
                flex-direction: row; /* 横並びに戻す */
                justify-content: space-between;
                align-items: center;
                text-align: right;
                width: 100%;
                padding: 10px 15px;
                border-bottom: 1px solid #eee;
                box-sizing: border-box;
            }

            /* 曲名をカードのタイトルっぽく強調 */
            .col-title {
                background-color: #f9f9f9;
                font-size: 1.1em;
                justify-content: center !important;
                text-align: center !important;
                padding: 15px !important;
            }
            .col-title::before {
                display: none; /* 曲名にはラベルをつけない */
            }

            /* ラベル (data-label属性) を表示 */
            .data-row > div::before {
                content: attr(data-label);
                font-weight: bold;
                color: #666;
                text-align: left;
                margin-right: auto; /* ラベルを左端、値を右端へ */
                min-width: 80px;
            }

            /* 複数行項目のスマホ表示調整 */
            .multi-value {
                text-align: right;
            }
            .multi-value span {
                display: inline-block;
                border: none;
                margin-left: 5px;
            }
            .multi-value span::after {
                content: "/";
                color: #ccc;
                margin-left: 5px;
            }
            .multi-value span:last-child::after {
                content: "";
            }
        }
    	/* キー（鍵数）のカラム設定 */
		.col-key {
		    /* Flexboxでタグを並べる */
		    display: flex !important; /* グリッドのalign設定を上書き */
		    flex-wrap: wrap;          /* 複数ある場合は折り返す */
		    gap: 4px;                 /* タグ同士の隙間 */
		    justify-content: center;  /* 中央寄せ */
		    align-content: center;
		}

		/* タグ（アイコン）の共通デザイン */
		.key-tag {
		    display: inline-flex;     /* フレックスボックス化 */
		    justify-content: center;  /* 文字を左右中央に */
		    align-items: center;      /* 文字を上下中央に */
		    
		    width: 32px;              /* 幅 */
		    height: 24px;             /* 高さ（幅と同じにして正方形に） */
		    border-radius: 4px;       /* 角を少し丸める */
		    
		    color: #fff;              /* 文字色（白） */
		    font-weight: bold;        /* 太字 */
		    font-size: 14px;          /* 文字サイズ */
		    line-height: 1;           /* 行間のズレ防止 */
		    box-shadow: 0 1px 2px rgba(0,0,0,0.2); /* 軽い影 */
		}

		/* --- キー数ごとの色設定 --- */

		/* 5キー：青系 */
		.key-5 { background-color: #2424F4; /* 5key：青色(コバルトブルー) */ }

		/* 7キー：緑系 */
		.key-7 { background-color: #4CAF50; /* Green */ }
		
		/* 7ikey：黄緑系 */
		.key-7i { background-color: #76AF50; }

		/* 11キーなど他：赤・オレンジなど（必要に応じて追加） */
		.key-11 {
		    background-color: #BCBC22; /* 黄色系 */
		}
		
		.key-11L {
		    background-color: #949422; /* 黄色系 */
		}
		
		/* 11Wkey：赤茶色（多鍵祭準拠） */
		.key-11W {
		    background-color: #961818; /* Dark Red */
		}
		
		/* 12key：水色 */
		.key-12 { background-color: #34BCF4; /* 12key：水色 */ }
		
		/* 23key：暗青紫色（多鍵祭準拠） */
		.key-23 {
		    background-color: #400080; /* パープル */
		}
		
		/* 9hkey：薄青紫色（多鍵祭準拠） */
		.key-9h {
		    background-color: #A4ACF4; /* パープル */
		}
		
		/* その他の汎用（クラスがない場合など） */
		.key-other {
		    background-color: #9E9E9E; /* Grey */
		}
		
		/* --- 1. 外枠：ここは「段」を縦に積む場所 --- */
		.col-key, .col-diff {
		    display: flex !important;
		    flex-direction: column !important; /* ★強制的に「縦」 */
		    justify-content: center !important;
		    gap: 6px !important;               /* 上下の段の隙間 */
		    padding: 5px 0;
		}

		/* --- 2. 内枠：ここは「タグ」を横に並べる場所 --- */
		.diff-group {
		    display: flex !important;
		    flex-direction: row !important;    /* ★強制的に「横」 */
		    justify-content: center !important;
		    align-items: center !important;
		    gap: 4px !important;               /* 横のタグ同士の隙間 */
		    width: 100%;                       /* 横幅いっぱいに使う */
		}

		/* --- (重要) スマホ表示の時だけ、このルールを解除する --- */
		@media (max-width: 768px) {
		    .col-key, .col-diff {
		        flex-direction: row !important; /* スマホは横並び */
		        flex-wrap: wrap;
		    }
		}

		/* 難易度タグの共通デザイン */
		.diff-tag {
		    display: inline-flex;
		    justify-content: center;
		    align-items: center;
		    
		    /* width: 24px; をやめて、中身に合わせて伸びるようにする */
		    min-width: 24px;      /* 最低でもこの幅は確保（1桁のとき正方形っぽくなる） */
		    height: 24px;         /* 高さは固定 */
		    padding: 0 6px;       /* 左右に少し余白を持たせる */
		    border-radius: 4px;
		    
		    color: #fff;
		    font-weight: bold;
		    font-size: 13px;      /* 文字数が多い場合に備えて少し小さめに */
		    line-height: 1;
		    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
		}

		.col-key, .col-diff {
		    display: flex !important;
		    flex-direction: row !important; /* ★横並びにする指定 */
		    flex-wrap: wrap;                /* 枠からはみ出たら折り返す */
		    justify-content: center;        /* 真ん中寄せ */
		    gap: 4px;                       /* タグ同士の隙間 */
		}

		/* --- 難易度ごとの色分け例 --- */

		.diff-Lv1 { background-color: #4444F4; /* Lv1～4 */ }
		.diff-Lv2 { background-color: #44B8F4; /* Lv5～12 */ }
		.diff-Lv3 { background-color: #34B848; /* Lv13～20 */ }
		.diff-Lv4 { background-color: #FFC107; /* Lv21～28 */ color: #333; /* 背景が明るいので文字は黒にする */ }
		.diff-Lv5 { background-color: #FF7807; /* Lv29～35 */ }	
		.diff-Lv6 { background-color: #F44336; /* Lv36～40 */ }	
		.diff-Lv7 { background-color: #F443D8; /* Lv41～44 */ }	
		.diff-Lv8 { background-color: #9C27B0; /* Lv45～50 */ }	
		.diff-Lv9 { background-color: #999999; /* Lv51～60 */ }	

		/* 超上級・特殊 (41~, 文字付きなど) : 紫・黒系 */
		.diff-ex {
		    background-color: #9C27B0; /* Purple */
		}