/* 뷰어 왼쪽 '내 논문' 패널(viewer-sidebar-docs.js) 전용 모양. 행·칩·빈 상태는 viewer-sidebar.css 공통 클래스를 쓴다. */

/* 스크롤 칸(.vs-pane). 키보드로 줄을 옮길 때 위에 붙은 검색칸(39px) 아래에 줄을 맞춘다 */
.vsd {
    scroll-padding-top: 40px;
}

/* 검색칸: 목록 위에 붙어 있고(스크롤해도 남는다) 입력하는 대로 거른다.
   위 3px은 포커스 링(3px)이 스크롤 칸 위 끝에서 잘리지 않을 자리 */
.vsd-search {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 3px 8px 8px;
    background: var(--vs-surface, var(--app-elevated));
}

.vsd-search-field {
    position: relative;
    display: block;
}

.vsd-search-icon {
    position: absolute;
    top: 50%;
    left: 9px;
    display: grid;
    color: var(--app-fg-4);
    transform: translateY(-50%);
    pointer-events: none;
}

.vsd-search-icon > svg {
    width: 14px;
    height: 14px;
}

.vsd-search-input {
    display: block;
    width: 100%;
    height: 28px;
    padding: 0 8px 0 29px;
    border: 1px solid var(--app-edge);
    border-radius: 8px;
    background: var(--app-ground);
    color: var(--app-fg);
    font: inherit;
    font-size: 12.5px;
    outline: none;
    transition: border-color 0.12s, box-shadow 0.12s;
    -webkit-appearance: none;
    appearance: none;
}

.vsd-search-input::placeholder {
    color: var(--app-fg-4);
}

.vsd-search-input:hover {
    border-color: var(--app-edge-strong);
}

.vsd-search-input:focus {
    border-color: var(--app-fg-4);
    box-shadow: 0 0 0 3px rgba(204, 125, 94, 0.14);
}

/* 브라우저 기본 지우기(×) 단추는 Esc로 대신한다 */
.vsd-search-input::-webkit-search-cancel-button {
    display: none;
}

/* 행: 작은 썸네일 + 제목·부가 줄 */
.vsd-row {
    align-items: center;
}

.vsd-thumb {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 36px;
    overflow: hidden;
    border: 1px solid var(--app-edge);
    border-radius: 4px;
    background: var(--app-ground);
}

.vsd-thumb > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* 썸네일이 없거나 못 받으면 연한 문서 아이콘 */
.vsd-thumb-icon {
    display: none;
    color: var(--app-fg-4);
}

.vsd-thumb.is-empty .vsd-thumb-icon {
    display: grid;
}

.vsd-thumb-icon > svg {
    width: 14px;
    height: 14px;
}

/* 읽은 만큼 썸네일 아래에 얇은 주황 줄 */
.vsd-thumb-read {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--app-accent);
}

.vsd-meta-text {
    flex: 0 1 auto;
}

/* 번역 중(아직 열 수 없음)·보관 기간 끝남은 한 단계 흐리게 */
.vsd-row.is-job .vs-row-title,
.vsd-row.is-expired .vs-row-title {
    color: var(--app-fg-3);
}

.vsd-row.is-expired .vsd-thumb {
    opacity: 0.6;
}

.vsd-row.is-job .vsd-thumb {
    border-style: dashed;
    border-color: var(--app-edge-strong);
    background: transparent;
}

.vsd-row[aria-busy="true"] {
    cursor: progress;
}

.vsd-skeleton-thumb {
    flex: none;
    width: 28px;
    height: 36px;
    border-radius: 4px;
}

/* 휴대폰 서랍: 16px보다 작은 입력칸은 iPhone Safari가 누를 때 화면을 확대하므로 16px로 */
@media (max-width: 759px) {
    .vsd {
        scroll-padding-top: 44px;
    }

    .vsd-search-input {
        height: 32px;
        font-size: 16px;
    }
}