:root {
    --nested-border-color: var(--text-middle);
    --nested-border-space: 10px;
    /* デバッグ用 */
    /* color-scheme: light; */
    /* color-scheme: dark; */
}

/* ネストが深い場合 */
ul:has(ul ul) {
    padding: 0;

    ul {
        padding-left: var(--nested-border-space);
    }

    li:first-child {
        margin-top: var(--nested-border-space);
    }

    li:not(:has(li)) {
        padding-bottom: var(--nested-border-space);
        padding-right: var(--nested-border-space);
    }

    li {
        padding-left: var(--nested-border-space);
        padding-top: var(--nested-border-space);

        list-style-type: none;
        border: 1px solid var(--nested-border-color);

        /* 入れ子になっているliは右と下のボーダーを消す（つまり、一番外側だけ残る） */
        li {
            border-right: none;
            border-bottom: none;
        }
    }
}