/* 뷰어 왼쪽 '아이콘 레일 + 펼침 패널'(viewer-sidebar.js). ASK 앱 왼쪽 문서 목록(TreeExplorer)과 한 제품처럼:
   바탕 elevated, 오른쪽 경계 edge, 머리줄 40px(위쪽 바와 같은 줄), 제목 12.5px fg-3, 굵기는 400/500만.
   공통 클래스(.vs-row·.vs-chip·.vs-empty·.vs-skeleton·.vs-section-label·.vs-icon-btn)는 모든 왼쪽 패널이 같이 쓴다.
   패널 전용 모양은 패널마다 viewer-sidebar-*.css에 둔다. 휴대폰(759px 이하)은 같은 aside가 왼쪽 서랍이 된다. */

.pdf-viewer {
    /* viewer-toolbar.css의 앱 색에 없는 것만 더한다(앱 globals.css 라이트 값) */
    --app-inset: #f1f0eb;
    --app-accent-tint: #f3e7df;
    --app-accent-ink: #94512f;
}

/* ── 레일 ─────────────────────────────────────────────── */

.vs-rail {
    position: relative;
    /* 이름표가 패널·가운데 칸·위쪽 바(z-index 75) 위로 뜨게 */
    z-index: 85;
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 40px;
    padding-top: calc(6px + env(safe-area-inset-top, 0px));
    border-right: 1px solid var(--app-edge);
    background: var(--app-elevated);
}

.vs-rail-btn {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--app-fg-3);
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s;
}

.vs-rail-btn > svg {
    width: 16px;
    height: 16px;
}

.vs-rail-btn:hover {
    background: var(--app-hover);
    color: var(--app-fg);
}

.vs-rail-btn[aria-pressed="true"] {
    background: var(--app-overlay);
    color: var(--app-fg);
}

.pdf-viewer .vs-rail-btn:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 1px;
}

/* 이름표: 앱 호버 카드 모양(ground·그림자). 마우스를 올리고 150ms 뒤, 키보드 포커스면 바로 */
.vs-tip {
    position: absolute;
    top: 50%;
    left: calc(100% + 10px);
    padding: 5px 9px;
    border-radius: 8px;
    background: var(--app-ground);
    box-shadow: var(--app-shadow-pop);
    color: var(--app-fg-2);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(-3px, -50%);
    transition: opacity 0.15s, transform 0.15s var(--app-ease-out), visibility 0.15s;
}

.vs-rail-btn:hover .vs-tip,
.vs-rail-btn:focus-visible .vs-tip {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
}

.vs-rail-btn:hover .vs-tip {
    transition-delay: 0.15s;
}

@media (hover: none) {
    .vs-tip {
        display: none;
    }
}

/* ── 패널 ─────────────────────────────────────────────── */

.vs-panel {
    /* 패널 바탕. 안에서 위에 붙는(sticky) 줄도 이 색을 쓴다(휴대폰 서랍은 ground) */
    --vs-surface: var(--app-elevated);
    position: relative;
    display: flex;
    flex: none;
    width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--vs-surface);
    /* 오른쪽 경계: 폭이 0이면 보이지 않는 안쪽 선 */
    box-shadow: inset -1px 0 0 var(--app-edge);
    color: var(--app-fg);
    font-family: var(--font-sans);
    visibility: hidden;
    transition: width 0.16s var(--app-ease-out), visibility 0s linear 0.16s;
}

.vs-panel.is-open {
    width: var(--vs-w, 260px);
    /* 레일 40px + 가운데 칸 최소 360px(JS가 먼저 맞추고, 이건 마지막 안전판) */
    max-width: calc(100% - 400px);
    visibility: visible;
    transition: width 0.16s var(--app-ease-out), visibility 0s;
}

/* 오른쪽 패널까지 다 열려 자리가 넘치면 화면 밖으로 밀어내지 않고 이 패널이 최소 폭까지 양보한다(펼치는 움직임이 끝난 뒤).
   사이드 번역·채팅도 같이 각자 최소 폭(300px, JS 한도와 같다)까지 양보한다. 휴대폰은 위아래로 쌓이니 넓은 화면에서만. */
.vs-panel.is-open:not(.is-animating) {
    flex-shrink: 1;
    min-width: 220px;
}

@media (min-width: 760px) {
    .viewer-body > .viewer-side,
    .viewer-body > .viewer-chat {
        flex-shrink: 1;
        min-width: 300px;
    }
}

.vs-panel.is-instant,
.viewer-body.vs-resizing .vs-panel {
    transition: none;
}

/* 펼치고 접는 동안은 내용 폭을 고정해 글자가 다시 흐르지 않고 가려졌다 드러난다. */
.vs-panel-inner {
    display: flex;
    flex-direction: column;
    width: calc(100% - 1px);
    min-width: 0;
    height: 100%;
}

.vs-panel.is-animating .vs-panel-inner {
    flex: none;
    width: calc(var(--vs-w, 260px) - 1px);
}

/* 머리줄: 위쪽 바와 같은 높이·줄. 제목은 앱 TreeExplorer '문서' 머리와 같은 톤 */
.vs-head {
    display: flex;
    flex: none;
    align-items: center;
    gap: 2px;
    height: calc(40px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 6px 0 14px;
}

.vs-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--app-fg-3);
    font-size: 12.5px;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vs-head-actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 2px;
}

.vs-content {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

/* 패널 본문 루트(등록한 element). 패널마다 따로 스크롤해 오가도 위치가 남는다. */
.vs-pane {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent;
}

@supports not (scrollbar-color: auto) {
    .vs-pane::-webkit-scrollbar {
        width: 8px;
        height: 8px;
        background: transparent;
    }

    .vs-pane::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background: color-mix(in srgb, var(--ink) 22%, transparent);
    }
}

/* 폭 조절 손잡이: 패널 오른쪽 경계에 걸친 6px(앱처럼 올리면 옅은 주황) */
/* 위쪽 바(z-index 75) 줄에서도 잡히게 그보다 위에 둔다 */
.vs-resizer {
    position: relative;
    z-index: 76;
    display: none;
    flex: none;
    width: 0;
    outline: none;
}

.viewer-body.vs-open > .vs-resizer {
    display: block;
}

.vs-resizer::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -3px;
    width: 6px;
    cursor: col-resize;
    touch-action: none;
    transition: background-color 0.15s;
}

.vs-resizer:hover::before,
.vs-resizer:focus-visible::before,
.viewer-body.vs-resizing .vs-resizer::before {
    background: rgba(204, 125, 94, 0.3);
}

.viewer-body.vs-resizing,
.viewer-body.vs-resizing * {
    cursor: col-resize !important;
    user-select: none;
    -webkit-user-select: none;
}

/* 휴대폰용 서랍 탭·바깥 막·위쪽 바 단추(넓은 화면에서는 숨김) */
.vs-tabs,
.vs-scrim,
.viewer-bar .vs-drawer-btn {
    display: none;
}

/* ── 공통 클래스 ─────────────────────────────────────── */

/* 머리줄·패널 안 작은 아이콘 단추(앱 headerButton 28px) */
.vs-icon-btn {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--app-fg-3);
    font: inherit;
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s;
}

.vs-icon-btn > svg {
    width: 16px;
    height: 16px;
}

.vs-icon-btn:hover:not(:disabled) {
    background: var(--app-hover);
    color: var(--app-fg);
}

.vs-icon-btn[aria-pressed="true"],
.vs-icon-btn[aria-expanded="true"] {
    background: var(--app-overlay);
    color: var(--app-fg);
}

.vs-icon-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* 포커스 링은 레일 단추와 같은 앱 accent(뷰어 공통 button 규칙보다 앞서게 .pdf-viewer를 붙인다) */
.pdf-viewer .vs-icon-btn:focus-visible,
.pdf-viewer .vs-empty-action:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 1px;
}

/* 동작 중(새로고침 등) 아이콘이 돈다 */
.vs-icon-btn.is-busy > svg {
    animation: vs-spin 0.9s linear infinite;
}

@keyframes vs-spin {
    to {
        transform: rotate(360deg);
    }
}

/* 패널 안 작은 구역 이름 */
.vs-section-label {
    padding: 12px 16px 6px;
    color: var(--app-fg-4);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* 목록 행: 좌우 6px 바깥 여백, 8px 10px 안 여백, 모서리 8px. 고른 행은 overlay(앱 트리 고른 줄과 같다) */
.vs-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.vs-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 12px);
    min-width: 0;
    margin: 0 6px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--app-fg-2);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s;
}

.vs-row:hover {
    background: var(--app-hover);
    color: var(--app-fg);
}

.vs-row.is-selected,
.vs-row[aria-current]:not([aria-current="false"]),
.vs-row[aria-selected="true"] {
    background: var(--app-overlay);
    color: var(--app-fg);
}

.pdf-viewer .vs-row:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: -2px;
}

.vs-row[aria-disabled="true"] {
    cursor: default;
}

.vs-row-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.vs-row-title {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--app-fg);
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vs-row-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    color: var(--app-fg-4);
    font-size: 11.5px;
    line-height: 18px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vs-row-meta > span:not(.vs-chip) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 상태 칩: 기본은 ground + edge, 진행 중은 accent-tint, 곧 만료는 accent 테두리 */
.vs-chip {
    display: inline-flex;
    flex: none;
    align-items: center;
    height: 18px;
    padding: 0 7px;
    border: 1px solid var(--app-edge);
    border-radius: 999px;
    background: var(--app-ground);
    color: var(--app-fg-3);
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vs-chip.is-progress {
    border-color: transparent;
    background: var(--app-accent-tint);
    color: var(--app-accent-ink);
}

.vs-chip.is-warn {
    border-color: rgba(204, 125, 94, 0.42);
    background: transparent;
    color: var(--app-accent-ink);
}

.vs-chip.is-muted {
    background: transparent;
    color: var(--app-fg-4);
}

/* 빈 상태: 연한 아이콘 + 한 줄 설명 + 보조 문장 */
.vs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 44px 24px 24px;
    text-align: center;
    /* 한국어는 낱말 중간에서 줄이 바뀌지 않게, 띄어쓰기 없는 긴 영문(검색어 등)은 패널 안에서 끊는다 */
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.vs-empty > svg,
.vs-empty-icon > svg {
    width: 24px;
    height: 24px;
    color: var(--app-fg-4);
}

.vs-empty > svg,
.vs-empty-icon {
    margin-bottom: 6px;
}

.vs-empty-icon {
    display: grid;
    place-items: center;
}

.vs-empty-title {
    color: var(--app-fg-3);
    font-size: 12.5px;
    line-height: 18px;
}

.vs-empty-sub {
    color: var(--app-fg-4);
    font-size: 12px;
    line-height: 17px;
}

.vs-empty-action {
    display: inline-flex;
    align-items: center;
    height: 28px;
    margin-top: 10px;
    padding: 0 12px;
    border: 1px solid var(--app-edge);
    border-radius: 8px;
    background: var(--app-ground);
    color: var(--app-fg-2);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s;
}

.vs-empty-action:hover {
    background: var(--app-hover);
    color: var(--app-fg);
}

/* 불러오는 중: overlay 바탕의 둥근 막대가 은은하게 반짝인다 */
.vs-skeleton {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--app-overlay) 25%, #f2f1ec 50%, var(--app-overlay) 75%);
    background-size: 200% 100%;
    animation: vs-shimmer 1.2s ease-in-out infinite;
}

.vs-skeleton-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 6px;
    padding: 8px 10px;
}

.vs-skeleton-lines {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

@keyframes vs-shimmer {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: -100% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vs-skeleton,
    .vs-icon-btn.is-busy > svg {
        animation: none;
    }

    .vs-panel,
    .vs-panel.is-open,
    .vs-tip,
    .vs-row {
        transition: none;
    }
}

/* ── 휴대폰: 왼쪽 서랍 ───────────────────────────────── */

@media (max-width: 759px) {
    .vs-rail,
    .viewer-body.vs-open > .vs-resizer {
        display: none;
    }

    /* 위쪽 바 맨 왼쪽(파일 이름 앞) */
    .viewer-bar .vs-drawer-btn {
        display: inline-grid;
        order: 1;
        margin-left: -6px;
    }

    .vs-panel,
    .vs-panel.is-open {
        --vs-surface: var(--app-ground);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        /* 위쪽 바(75)·메뉴(80)보다 위 */
        z-index: 96;
        width: min(86vw, 340px);
        max-width: none;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 0 0 1px var(--app-edge), 16px 0 40px rgba(30, 28, 18, 0.18);
        visibility: hidden;
        transform: translateX(-104%);
        transition: transform 0.22s var(--app-ease-out), visibility 0s linear 0.22s;
    }

    .vs-panel.is-drawer-open {
        visibility: visible;
        transform: none;
        transition: transform 0.22s var(--app-ease-out), visibility 0s;
    }

    .vs-panel-inner,
    .vs-panel.is-animating .vs-panel-inner {
        width: 100%;
    }

    /* 서랍 머리: 네 패널을 아이콘 + 짧은 이름 탭으로 고른다 */
    .vs-tabs {
        display: flex;
        flex: none;
        gap: 2px;
        padding: calc(10px + env(safe-area-inset-top, 0px)) 8px 2px;
    }

    .vs-tab {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        min-width: 0;
        padding: 8px 4px 7px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--app-fg-3);
        font: inherit;
        font-size: 11px;
        line-height: 14px;
        cursor: pointer;
        transition: background-color 0.12s, color 0.12s;
    }

    .vs-tab > svg {
        width: 18px;
        height: 18px;
    }

    .vs-tab-label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .vs-tab[aria-selected="true"] {
        background: var(--app-overlay);
        color: var(--app-fg);
    }

    /* 탭 사이가 2px라 링은 안쪽에 그린다 */
    .pdf-viewer .vs-tab:focus-visible {
        outline: 2px solid var(--app-accent);
        outline-offset: -2px;
    }

    .vs-head {
        height: 40px;
        padding-top: 0;
    }

    .vs-scrim {
        position: fixed;
        inset: 0;
        z-index: 95;
        display: block;
        background: rgba(0, 0, 0, 0.25);
        animation: vs-scrim-in 0.2s ease-out;
    }

    .vs-scrim[hidden] {
        display: none;
    }

    /* 손가락으로 누르기 쉽게 행을 조금 높인다 */
    .vs-row {
        padding: 10px 10px;
    }
}

@keyframes vs-scrim-in {
    from {
        opacity: 0;
    }
}

@media (max-width: 759px) and (prefers-reduced-motion: reduce) {
    .vs-panel,
    .vs-panel.is-drawer-open {
        transition: none;
    }

    .vs-scrim {
        animation: none;
    }
}