@charset "UTF-8";

/* --- 1. カラーパレット定義 (変数化) --- */
:root {
    /* === ライトモード (デフォルト) === */
    --color-bg-dark: #ffffff;
    --color-text-light: #111111;
    --color-text-dim: #242524;
    --color-glass: rgba(0, 0, 0, 0.04);
    --color-glass-hover: rgba(0, 0, 0, 0.08);
    --color-accent-vivid1: #000000;
    --color-accent-vivid2: #333333;
    
    --gradient-h1: linear-gradient(90deg, #000, #555);
    --color-border-light: #eee;
    --color-border-content: #ddd;

    /* ▼▼▼ 追加・修正した変数 ▼▼▼ */
    --color-header-bg: rgba(255, 255, 255, 0.9); /* ヘッダー背景 */
    --color-header-text: #111111;                /* ヘッダー文字 */
    --color-text-body: #0c161d;                  /* 記事本文の文字 */
}

/* === 2. ダークモード (クラス付与時) === */
body.dark-mode {
    --color-bg-dark: #121212;
    --color-text-light: #e0e0e0;
    --color-text-dim: #e2e7e0;
    
    --color-glass: rgba(255, 255, 255, 0.05);
    --color-glass-hover: rgba(255, 255, 255, 0.1);
    
    --color-accent-vivid1: #00ffc8;
    --color-accent-vivid2: #ff00ff;

    --gradient-h1: linear-gradient(90deg, #fff, #777);
    --color-border-light: #333;
    --color-border-content: #444;

    --color-header-bg: rgba(18, 18, 18, 0.8);    /* 暗く透過 */
    --color-header-text: #e0e0e0;                /* 白っぽい文字 */
    --color-text-body: #cccccc;                  /* 読みやすいグレー */
}

/* --- 基本設定 --- */
body {
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: var(--color-text-light);
    background-color: var(--color-bg-dark);
    min-height: 100vh;
    transition: background-color 0.3s, color 0.3s;
}

/* --- ヘッダー --- */
header {
    background-color: var(--color-header-bg); 
    
    backdrop-filter: blur(5px);
    border-bottom: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); 
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background-color 0.3s;
}

.site-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-header-text);
    
    text-decoration: none;
    text-shadow: none;
    letter-spacing: 2px;
    transition: color 0.3s;
}

/* --- 切り替えボタンのデザイン --- */
.theme-btn {
    background: transparent;
    border: 1px solid var(--color-text-dim);
    
    color: var(--color-header-text);
    
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 1.2rem;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.theme-btn:hover {
    background-color: var(--color-glass);
    border-color: var(--color-accent-vivid1);
}

/* アイコンの表示切り替え */
body .icon-sun { display: none; }
body .icon-moon { display: block; }
body.dark-mode .icon-sun { display: block; }
body.dark-mode .icon-moon { display: none; }


/* --- メインレイアウト --- */
.container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    gap: 40px; 
}

/* --- 左側：サイドバー --- */
.sidebar {
    width: 280px;
    flex-shrink: 0;
}

.sidebar-title {
    font-size: 0.9rem;
    margin-bottom: 20px;
    color: var(--color-text-dim);
    padding-left: 10px;
    border: none;
    letter-spacing: 3px;
    text-shadow: none;
    font-weight: bold;
}

/* --- アコーディオンメニュー --- */
details {
    margin-bottom: 15px;
    border-left: 2px solid var(--color-border-light);
    padding-left: 0; 
    transition: border-color 0.3s;
}

details[open] {
    border-left-color: var(--color-accent-vivid1);
}

summary {
    cursor: pointer;
    padding: 12px 15px;
    font-weight: normal;
    list-style: none;
    background-color: transparent;
    border: none; 
    color: var(--color-text-light);
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 0; 
}

summary:hover {
    background-color: var(--color-glass);
}

summary::-webkit-details-marker {
    display: none;
}

summary::after {
    content: "+";
    font-size: 0.8rem;
    color: var(--color-text-dim);
    transition: 0.3s;
}

details[open] summary {
    font-weight: bold;
}

details[open] summary::after {
    content: "-";
    color: var(--color-accent-vivid1);
}

.accordion-content {
    background-color: transparent;
    border-left: 2px solid var(--color-border-content);
    margin-left: 0;
    padding-left: 10px;
    margin-top: 0;
    overflow: hidden;
}

.accordion-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.accordion-content li a {
    display: block;
    padding: 8px 15px 8px 25px; 
    text-decoration: none;
    color: var(--color-text-dim);
    font-size: 0.9rem;
    transition: all 0.3s;
    position: relative;
}

.accordion-content li a:hover {
    color: var(--color-text-light);
    background-color: var(--color-glass);
    padding-left: 30px;
}

.accordion-content li {
    position: relative;
}
.accordion-content li::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 10px;
    height: 1px;
    background-color: var(--color-border-content);
}

/* --- レスポンシブ対応 --- */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        padding: 20px;
    }
    .sidebar {
        width: 100%;
        margin-bottom: 40px;
    }
    .main-content {
        padding: 0;
    }
    .float-right, .image-stack {
        float: none;
        display: block;
        margin: 20px auto;
        width: 100%;
        align-items: center;
    }
    .article-img.is-expanded {
        max-width: 100%;
    }
}