/* 왼쪽 '목차' 패널(viewer-sidebar-outline.js): 접고 펴는 목차 나무.
   행은 공통 .vs-row(8px 10px, 모서리 8px)에 단계마다 12px씩 들여 쓰고, 1단계는 13px fg, 그 아래는 12.5px fg-2.
   지금 쪽이 속한 항목은 accent-ink 글자 + 왼쪽 2px accent 막대(바탕은 칠하지 않아 고른 행과 헷갈리지 않는다). */

.vso-tree {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0 6px;
}

.vso .vso-row {
    gap: 4px;
    padding-left: calc(6px + var(--vso-depth, 0) * 12px);
}

.vso .vso-row[hidden] {
    display: none;
}

.vso-chevron {
    display: grid;
    flex: none;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    color: var(--app-fg-4);
    transition: background-color 0.12s, color 0.12s;
}

.vso-chevron > svg {
    width: 12px;
    height: 12px;
    transition: transform 0.16s var(--app-ease-out);
}

.vso-row.is-open > .vso-chevron > svg {
    transform: rotate(90deg);
}

.vso-chevron:not(:empty):hover {
    background: var(--app-hover);
    color: var(--app-fg);
}

.vso-title {
    flex: 1;
}

.vso-row:not([aria-level="1"]) .vso-title {
    color: var(--app-fg-2);
    font-size: 12.5px;
}

.vso-row:not([aria-level="1"]):hover .vso-title {
    color: var(--app-fg);
}

.vso-page {
    flex: none;
    padding-left: 8px;
}

/* 갈 쪽을 모르는 항목(바깥 링크 등)은 이름만 보인다 */
.vso-row.is-unlinked .vso-title {
    color: var(--app-fg-3);
}

.vso-row.is-unlinked:not([aria-expanded]) {
    cursor: default;
}

/* 지금 쪽이 속한 항목(공통 행의 aria-current 바탕보다 앞선다) */
.vso .vso-row.is-current[aria-current] {
    background: transparent;
}

.vso .vso-row.is-current[aria-current]:hover {
    background: var(--app-hover);
}

.vso .vso-row.is-current .vso-title,
.vso .vso-row.is-current .vso-page {
    color: var(--app-accent-ink, #94512f);
}

.vso-row.is-current::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: calc(var(--vso-depth, 0) * 12px);
    width: 2px;
    border-radius: 2px;
    background: var(--app-accent);
}

/* 목차를 읽는 동안: 행 높이에 맞춘 막대 */
.vso-skeleton {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 14px 24px 0 22px;
}

.vso-skeleton-bar {
    height: 9px;
    margin-left: calc(var(--vso-depth, 0) * 14px);
}

@media (prefers-reduced-motion: reduce) {
    .vso-chevron,
    .vso-chevron > svg {
        transition: none;
    }
}