/* Version: 2025-10-01 14:20 JST (最終版) */

/* 1. 基本レイアウトとリセット */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f7f6;
    color: #333;
    line-height: 1.6;
}

/* 共通見出し/区切り線 */
/* H1の見栄えをアップ (おしゃれ化) */
h1 { 
    text-align: center; 
    /* 💡 濃い青系の色に変更し、落ち着いた高級感を出す */
    color: #1f4e79; 
    font-size: 2.8em; /* サイズを少し大きく */
    margin-bottom: 5px;
    /* 💡 文字間隔を広げ、洗練された印象に */
    letter-spacing: 4px; 
    font-weight: 900; /* フォントをより太く */
    
    /* 💡 テキストに薄い影をつけ、立体感を強調 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    
    /* 💡 細いボーダーで、タイトルに区切り感を追加 */
    border-bottom: 2px solid #a8c4df;
    padding-bottom: 5px;
}
h2 {
    text-align: center; 
    font-size: 1.0em; 
    color: #555;
    margin: 10px 0 20px 0; /* H1とH2の間隔を調整 */
}
h3 {
    text-align: center;
    color: #007bff;
    font-size: 1.5em;
    margin-top: 30px;
    margin-bottom: 20px;
}
hr {
    border: 0;
    height: 1px;
    background-color: #ccc;
    margin: 30px 0;
}


/* 2. カード表示 (基本・スタンダード碁盤) */
.board-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
}
.board-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 300px; /* カードの標準幅 */
    text-align: center;
    text-decoration: none;
    color: #333;
    transition: transform 0.2s, box-shadow 0.2s;
    padding: 15px;
    border: 1px solid #ddd;
}
.board-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
.board-card img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid #eee;
}
.board-card h3 {
    font-size: 1.1em;
    margin: 0;
    color: #1f4e79;
}
.board-card p {
    font-size: 0.8em;
    color: #777;
    margin-top: 5px;
}


/* 3. アコーディオンメニュー（その他碁盤） */
.accordion-container {
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.accordion-header {
    background-color: #e9ecef;
    color: #333;
    padding: 15px 20px;
    cursor: pointer;
    font-size: 1.1em;
    margin: 0;
    border-bottom: 1px solid #ccc;
    display: block; /* H4をブロック要素化 */
    outline: none; /* フォーカス時のアウトラインをリセット */
    transition: background-color 0.2s;
}
.accordion-header:hover, .accordion-header:focus {
    background-color: #dee2e6;
}
.accordion-content {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: none;
}
.accordion-item:last-child .accordion-header {
    border-bottom: none;
}


/* 4. リストアイテムの共通スタイル (.text-list はアコーディオンとシンプルリストの両方に使用) */
.text-list {
    font-size: 0.9em;
}
.text-list .board-item {
    /* 💡 パディングを増やして行間を広くする */
    padding: 12px 0; 
    border-bottom: 1px dotted #eee; 
    list-style: none;
}
.text-list .sub-list .board-item:last-child {
    border-bottom: none; 
}
.text-list a { 
    text-decoration: none; 
    color: #333; 
    display: block; 
    /* 💡 行の高さを広げる */
    line-height: 1.6; 
    padding: 0 20px; /* 左右のパディングを維持 */
}
.text-list a:hover { 
    color: #007bff; 
    background-color: #f8f9fa;
}
.text-list strong {
    font-weight: bold;
    color: #1f4e79; /* 碁盤名を強調 */
    font-size: 1.05em;
}

/* シンプルビュー特有のカテゴリータイトルのスタイル */
.text-list .category-title {
    background-color: #f1f1f1;
    padding: 5px 20px;
    margin-top: 15px;
    border-radius: 4px;
    border: 1px solid #ddd;
}
.text-list .category-title h4 {
    font-size: 1.1em;
    margin: 0;
    color: #333;
}
.text-list .sub-list {
    margin: 0;
    padding: 0;
}


/* 5. ビュー切り替えボタンのスタイル */
.fixed-toggle-container {
    position: fixed;
    top: 15px;
    left: 20px;
    z-index: 1000;
}
.toggle-button {
    background-color: #28a745; /* 緑色 */
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.9em;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s, transform 0.1s;
    line-height: 1.2; /* ボタン内の行間を詰める */
    text-align: center;
}
.toggle-button:hover {
    background-color: #218838;
}
.toggle-button:active {
    transform: translateY(1px);
}


/* --- 6. メディアクエリ（スマートフォン対応） --- */

@media (max-width: 600px) {
    body {
        padding: 10px;
    }
    
    /* 💡 左上のボタンをさらにコンパクトにする */
    .fixed-toggle-container {
        top: 8px;
        left: 8px;
    }
    .toggle-button {
        padding: 8px 10px;
        font-size: 0.8em;
    }

    /* 💡 H1/H2の文字サイズを調整 */
    h1 {
        font-size: 2.2em;
        letter-spacing: 2px;
    }
    h2 {
        font-size: 1.1em;
        margin: 5px 0 15px 0;
    }
    h3 {
        font-size: 1.3em;
    }

    /* 💡 カード表示の調整 (スタンダード碁盤) */
    .board-grid {
        flex-direction: column; /* 縦に並べる */
        gap: 15px;
    }
    .board-card {
        width: 100%; /* 横幅いっぱいに広げる */
        box-sizing: border-box; /* パディングを幅に含める */
        margin-left: 0;
        margin-right: 0;
        padding: 10px;
    }
    
    /* 💡 リスト表示の文字サイズを調整 */
    .text-list {
        font-size: 0.85em; 
    }
    
    /* 💡 リストアイテムの行間を少し詰める（画面が狭いため） */
    .text-list .board-item {
        padding: 10px 0; /* パディングを少し減らす */
    }
    .text-list a {
        line-height: 1.4; /* 行の高さも詰める */
        padding: 0 15px; /* 左右のパディングを減らす */
    }

    /* ---------------------------------------------------- */
    /* 💡 重要な修正: スマートフォンでのリストの説明文を非表示にする */
    /* ---------------------------------------------------- */
    .text-list .board-item a > :not(strong) {
        /* 💡 <strong>タグで囲まれた碁盤名以外のテキストを非表示にする */
        display: none !important;
    }
    
    /* 💡 碁盤名（strongタグ）だけは表示を維持し、サイズを調整 */
    .text-list strong {
        font-size: 1.1em; /* 碁盤名を少し大きくして強調 */
        line-height: 1.3;
        margin-bottom: 2px;
    }
}