/*
 * game-guide-ui-system/assets/css/main.css
 *
 * 更新日: 2026-09-16
 *
 * 役割:
 * - game-guide-ui-system 全体で使用する基本CSSを担当する。
 * - 現在は基本レイアウトの確認を目的とする。
 *
 * メモ・注意点:
 * - Cocoon / Cocoon ChildのCSSと衝突しないよう、
 *   game-guide-ui-system専用のクラス名を使用する。
 * - 現在は色や装飾を作り込まず、
 *   Header / Navigation / Sidebar / Content / Footer
 *   の基本配置のみを確認する。
 * - UI完成後、必要に応じて各モジュール専用CSSへ分離する。
 */


/*
========================================
基本レイアウト
========================================
*/

.game-guide-ui-test {
    width: 100%;
}



/*
========================================
Navigation
========================================
*/

.game-guide-ui-test-navigation {
    display: flex;
    width: 100%;
    padding: 12px 20px;
    box-sizing: border-box;
    gap: 20px;
}

.game-guide-ui-test-navigation a {
    text-decoration: none;
}


/*
========================================
Main Layout
========================================
*/

.game-guide-ui-test-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 220px;
    width: 100%;
}


/*
========================================
Left / Right Sidebar
========================================
*/

.game-guide-ui-test-sidebar {
    padding: 20px;
    box-sizing: border-box;
}

/*
========================================
Left Sidebar Navigation
========================================
*/

.game-guide-ui-test-sidebar-title {
    margin-bottom: 12px;
    font-weight: 700;
}


.game-guide-ui-test-sidebar-navigation {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.game-guide-ui-test-sidebar-navigation a {
    text-decoration: none;
}




/*
========================================
Main Content
========================================
*/

.game-guide-ui-test-content {
    min-width: 0;
    padding: 20px;
    box-sizing: border-box;
}


/*
========================================
SVG
========================================
*/

.game-guide-ui-test-svg {
    display: block;
    width: 200px;
    height: auto;
}




/*
========================================
レイアウト確認用の仮境界線
========================================
*/

/*
 * 現在は各領域の位置関係を確認するための
 * 仮の境界線。
 *
 * UIデザイン確定後に削除する。
 */

.game-guide-ui-test-header {
    border: 1px solid #888;
}

.game-guide-ui-test-navigation {
    border: 1px solid #888;
}

.game-guide-ui-test-sidebar {
    border: 1px solid #888;
}

.game-guide-ui-test-content {
    border: 1px solid #888;
}

.game-guide-ui-test-footer {
    border: 1px solid #888;
}