/* 뷰어 인용·그림 카드와 참고문헌 쪽 '다음 읽을거리'(viewer-references.js, mockups/platform-viewer.html A안).
   카드는 시안의 .pop 값(8px 테두리 상자, 글자 링크)을 따르고, 목록은 서재 표처럼 줄과 글자로만 나눈다. */

/* ── 원문 위 자리: 글자 고르기 층(z 1) 위에 깔아 마우스를 받는다 ── */
.vr-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.vr-mark {
    position: absolute;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: transparent;
    font: inherit;
    cursor: pointer;
    pointer-events: auto;
    transition: background-color 0.12s;
}

.vr-mark.is-ref:hover,
.vr-mark.is-ref.is-hot {
    background: color-mix(in srgb, #2f5aa8 14%, transparent);
}

/* 그림 참조(Fig. 3)는 점선 밑줄로 눌러 볼 수 있다는 걸 알린다 */
.vr-mark.is-figure {
    border-bottom: 1px dotted color-mix(in srgb, var(--ink) 55%, transparent);
    border-radius: 0;
}

.vr-mark.is-figure:hover,
.vr-mark.is-figure.is-hot {
    background: color-mix(in srgb, var(--ink) 8%, transparent);
}

/* '참고문헌 위치로'·'그림 위치로'로 간 자리를 잠깐 칠한다 */
.vr-flash {
    position: absolute;
    z-index: 1;
    border-radius: 3px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    pointer-events: none;
    animation: vr-flash 2.4s ease forwards;
}

@keyframes vr-flash {
    0%, 60% { opacity: 1; }
    100% { opacity: 0; }
}

/* ── 카드 ── */
.vr-card {
    position: fixed;
    z-index: 65;
    box-sizing: border-box;
    width: 384px;
    max-height: calc(100vh - 16px);
    overflow: auto;
    padding: 12px 14px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 6px 18px rgba(30, 28, 18, 0.09);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.55;
    text-align: left;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.vr-card[hidden] {
    display: none;
}

.vr-card p {
    margin: 0;
}

.vr-raw {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ink-faint);
    font-size: 12px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: normal;
}

.vr-raw b {
    margin-right: 2px;
    color: var(--ink-soft);
    font-weight: 500;
}

.vr-title {
    margin: 6px 0 2px !important;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.45;
}

.vr-meta {
    color: var(--ink-soft);
    font-size: 12.5px;
}

.vr-lab {
    margin: 8px 0 1px !important;
    color: var(--ink-faint);
    font-size: 12px;
}

.vr-abs,
.vr-caption {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ink-soft);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.vr-caption {
    margin-top: 2px !important;
    -webkit-line-clamp: 3;
    word-break: normal;
}

.vr-abs.is-streaming {
    color: var(--ink-faint);
}

.vr-wait,
.vr-note {
    margin-top: 6px !important;
    color: var(--ink-faint);
    font-size: 12.5px;
}

.vr-figbox {
    margin: 8px 0 6px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #fff;
}

.vr-figbox.is-loading {
    min-height: 120px;
}

.vr-figure {
    display: block;
    width: 100%;
    height: auto;
    max-height: 260px;
    object-fit: contain;
}

.vr-acts {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 7px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    font-size: 13px;
}

.vr-others {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin-top: 6px !important;
    color: var(--ink-faint);
    font-size: 12px;
}

.vr-sep {
    color: var(--ink-faint);
}

.vr-faint {
    color: var(--ink-faint);
}

/* 글자 링크(시안 .tl): 채운 버튼 없이 밑줄만 */
.vr-link {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    white-space: nowrap;
    cursor: pointer;
}

.vr-link:hover {
    text-decoration-color: var(--ink);
}

.vr-link.soft {
    color: var(--ink-soft);
}

.vr-link.is-current {
    color: var(--ink);
    text-decoration-color: var(--ink);
}

.vr-link[aria-pressed="true"] {
    color: var(--ink-soft);
}

.vr-link:focus-visible,
.vr-sort-btn:focus-visible,
.vr-mark:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* 키보드로 연 카드는 초점만 받아 두고(안의 링크로 Tab), 카드 테두리 위에 초점 테두리를 겹쳐 그리지 않는다. */
.vr-card:focus {
    outline: none;
}

/* ── 다음 읽을거리(사이드 번역 참고문헌 쪽) ── */
.vr-list {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
}

.vr-list-top {
    padding: 0 0 10px;
    border-bottom: 1px solid var(--line);
}

.vr-list-top p {
    margin: 0;
    color: var(--ink-faint);
    font-size: 12.5px;
    line-height: 1.55;
}

.vr-list-top .vr-note {
    margin-top: 6px;
}

.vr-sort {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 8px;
    font-size: 13px;
}

.vr-sort-btn {
    margin: 0;
    padding: 0 0 2px;
    border: 0;
    border-bottom: 1px solid transparent;
    background: none;
    color: var(--ink-faint);
    font: inherit;
    cursor: pointer;
}

.vr-sort-btn:hover {
    color: var(--ink-soft);
}

.vr-sort-btn[aria-pressed="true"] {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

.vr-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 0 6px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
}

.vr-row-n {
    padding-top: 2px;
    color: var(--ink-faint);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.vr-row-title {
    overflow: hidden;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vr-row-title.is-raw {
    display: -webkit-box;
    color: var(--ink-soft);
    font-family: "Times New Roman", Times, Georgia, serif;
    font-size: 13px;
    font-style: italic;
    font-weight: 400;
    white-space: normal;
    word-break: normal;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.vr-row-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    margin-top: 3px;
    color: var(--ink-faint);
    font-size: 12.5px;
}

.vr-row-meta .vr-row-acts {
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    font-size: 12.5px;
}

.vr-more {
    margin-top: 12px;
    font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
    .vr-mark,
    .vr-flash {
        transition: none;
        animation: none;
    }
}