/************************************
** 目次（TOC）：プロ仕様ダークデザイン
************************************/

/************************************
** 目次（TOC）：プロ仕様ダークデザイン
************************************/

/* 1. 全体コンテナ */
.kimoota-toc {
    background: #2a2e33;
    border: 1px solid #444;
    border-radius: 8px;
    margin-bottom: 2.5em;
    padding: 20px;
    box-sizing: border-box;
}

/* 2. タイトル（INDEX） */
.toc-title {

    justify-content: space-between;

    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.1em;
    color: #E9967A; /* サーモンピンク */
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* 3. トグルスイッチ（JS用） */
#toc-trigger {
    cursor: pointer;
    font-size: 12px;
    color: #888;
    transition: all 0.2s;
}

#toc-trigger::before {
    content: "［開く］";
}

.kimoota-toc.is-open #toc-trigger::before {
    content: "［閉じる］";
}

#toc-trigger:hover {
    color: #E9967A;
}

/* 4. リスト構造基本 */
.toc-list {
    counter-reset: toc-counter;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* H2項目：ナンバリング */
.toc-level-2 {
    counter-increment: toc-counter;
    margin-top: 10px;
}

.toc-level-2 > a::before {
    content: counter(toc-counter) ". ";
    color: #E9967A;
    margin-right: 8px;
    font-family: "Georgia", serif; /* 10年選手のこだわり */
}

/* H3項目：インデントと「枝」 */
.toc-level-3 {
    margin-left: 1.5em !important;
    margin-top: 5px;
    font-size: 0.95em;
    position: relative;
}

.toc-level-3::before {
    content: "";
    position: absolute;
    left: -1em;
    top: 0.7em;
    width: 0.6em;
    height: 1px;
    background-color: #555; /* 控えめなライン */
}

/* 5. リンクとテキスト */
.toc-list li {
    line-height: 1.5;
}

.toc-list a {
    color: #d1d5db;
    text-decoration: none;
    transition: color 0.2s;
}

/* --- ホバー時の「浮き上がり」舗装 --- */
.toc-list a {
    display: inline-block; /* 動きをつけるために必要 */
    transition: all 0.25s ease-out; /* 粘り気のある動き */
    text-decoration: none !important; /* 下線は完全に排除 */
}

.toc-list a:hover {
    color: #E9967A; /* サーモンピンク */
    /* 1. わずかに右へスライド（道が開くような演出） */
    transform: translateX(5px); 
    
    /* 2. ダークモードに映える「微かな光」の演出 */
    /* 文字の周りに、同じ色の淡い光を纏わせて浮き上がらせる */
    text-shadow: 0 0 8px rgba(233, 150, 122, 0.4);
    
    /* 3. 背景が寂しいなら、透明度を上げて「実体感」を出す */
    opacity: 1;
}

/* 非ホバー時は少しだけ透明度を下げておくと、ホバー時の「浮き」が強調される */
.toc-list a {
    opacity: 0.85;
}

/************************************
** 表示・非表示のコンテキスト制御
************************************/

/* 記事内：デフォルトは「閉じ」 */
.entry-content .kimoota-toc .toc-list {
    display: none;
}

/* JSでクラスが付与されたら表示 */
.kimoota-toc.is-open .toc-list {
    display: block;
}

/* サイドバー：常に「全開」かつ背景透過 */
#right-sidebar .kimoota-toc,
#left-sidebar .kimoota-toc {
    background: transparent;
    border: none;
    padding: 0;
}

#right-sidebar .toc-list,
#left-sidebar .toc-list {
    display: block !important;
}

#right-sidebar #toc-trigger,
#left-sidebar #toc-trigger {
    display: none; /* サイドバーにトグルは不要 */
}

/************************************
** カレント
************************************/
/* --- リンク全体の塊設定 --- */
.toc-link {
    display: flex !important; /* Flexboxで文字とSVGを横並びに固定 */
    align-items: center;
    text-decoration: none !important;
    white-space: nowrap; /* リンク内での意図しない改行を防止 */
}

/* 文字が長すぎる場合は、文字側で適切に改行させるが、矢印は切り離さない */
.toc-text {
    white-space: normal; /* 文字は折り返しOK */
    flex-shrink: 1;
}

/* --- 二重矢印SVGの舗装 --- */
.toc-arrow {
    display: none; /* 通常は非表示 */
    flex-shrink: 0; /* 矢印が潰れないように固定 */
    width: 1.2em;
    height: 1.2em;
    fill: #E9967A;
    margin-left: 6px;
    /* 1pxの微調整：文字の高さに合わせる */
    position: relative;
    top: 1px;
}

/* カレント時に表示 */
.toc-link.is-current .toc-arrow {
    display: inline-block;
    animation: double-arrow-pulse 0.8s infinite alternate ease-in-out;
}

/* カレント時のアニメーション：左へグイグイ指し示す */
@keyframes double-arrow-pulse {
    from { 
        transform: translateX(0); 
        opacity: 0.5; 
    }
    to { 
        transform: translateX(-6px); /* 左へ6px分、深く指し示す */
        opacity: 1; 
    }
}

.toc-link.is-current .toc-arrow {
    display: inline-block;
    animation: double-arrow-pulse 0.6s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}


.toc-title {
    display: flex;
    align-items: baseline; /* ベースラインで揃えて文字の高さのズレを防ぐ */
    gap: 12px;
}

.toc-meta {
    font-size: 13px; /* 11pxから2段階アップ */
    font-weight: 300; /* 細身にすることで「INDEX」より目立つのを防ぐ */
    color: rgba(255, 255, 255, 0.5); /* 白の50%透過。ダーク背景に馴染ませる */
    letter-spacing: 0.03em;
    font-feature-settings: "palt"; /* 数字の詰めを最適化 */
}