/* 번역 결과 뷰어: 번역 화면 위에 전체 화면으로 뜬다. 색은 tokens.css를 그대로 쓴다. */
.pdf-viewer,
.pdf-viewer * {
    box-sizing: border-box;
}

body.viewer-open {
    overflow: hidden;
}

.pdf-viewer {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    /* 색은 ASK 앱 뷰어와 같게: 상단 바 ground #fbfbf8, 논문 뒤 바탕 inset #f1f0eb */
    --viewer-ground: #fbfbf8;
    --viewer-inset: #f1f0eb;
    background: var(--viewer-inset);
    color: var(--ink);
    font-family: var(--font-sans);
    /* AI 하이라이트 역할 색(ASK 앱과 같다): 노랑 문제·동기·한계, 파랑 핵심 아이디어·방법, 분홍 실험·결과·한계 */
    --hl-problem: #fde68a;
    --hl-core: #93c5fd;
    --hl-evidence: #f9a8d4;
}

.pdf-viewer[hidden],
.pdf-viewer [hidden] {
    display: none !important;
}

/* 상단 도구 막대: 높이·간격·글자·바탕은 ASK 앱 위쪽 바와 같다(파일 이름·쪽 이동·확대·⋯ 메뉴·좁은 폭은 viewer-toolbar.css). */
.viewer-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: calc(40px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 8px 0 14px;
    border-bottom: 1px solid var(--app-edge, var(--line));
    background: var(--viewer-ground);
    color: var(--app-fg-3, var(--ink-soft));
    font-size: 12.5px;
    white-space: nowrap;
}

.viewer-spacer {
    flex: 1;
}

/* 보기: 밑줄 탭. 고른 칸 아래 주황 줄(.viewer-modes-ink)이 미끄러지듯 옮겨 간다. 줄이 바의 아래 경계에 닿게 아래로 늘린다. */
.viewer-modes {
    position: relative;
    display: inline-flex;
    flex: none;
    align-self: stretch;
    gap: 2px;
    margin-bottom: -1px;
}

.viewer-modes button {
    display: inline-flex;
    align-items: center;
    border: 0;
    padding: 0 12px 1px;
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    cursor: pointer;
    transition: color 0.2s;
}

.viewer-modes button:hover {
    color: var(--ink);
}

.viewer-modes button[aria-pressed="true"] {
    color: var(--ink);
    font-weight: 600;
}

.viewer-modes-ink {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    border-radius: 2px;
    background: var(--accent);
    pointer-events: none;
    transition: transform 0.32s cubic-bezier(0.3, 0.7, 0.2, 1), width 0.32s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.viewer-modes-ink.instant {
    transition: none;
}

.viewer-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.viewer-btn:hover {
    background: var(--card);
}

.viewer-btn.primary {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--bg);
}

.viewer-btn.primary:hover {
    background: color-mix(in srgb, var(--ink), #fff 12%);
}

.viewer-hold {
    touch-action: none;
}

.viewer-hold.active {
    border-color: var(--accent);
    background: var(--accent-tint);
    color: var(--accent-text);
}

.viewer-hold kbd {
    padding: 0 5px;
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--surface);
    color: var(--ink-soft);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px;
}

/* AI 하이라이트 켜기·끄기(앱 위쪽 바 글자 단추와 같은 모양). 오른쪽 작은 스위치로 켜짐·꺼짐 모드임을 보이고, 쪽을 받는 중이면 스위치 손잡이가 깜빡인다. */
.viewer-ai-hl {
    position: relative;
    display: inline-flex;
    flex: none;
}

.viewer-ai-hl-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--app-fg-3);
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.viewer-ai-hl-btn:hover {
    background: var(--app-hover);
    color: var(--app-fg);
}

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

.viewer-ai-hl-btn svg {
    flex: none;
    width: 14px;
    height: 14px;
}

.viewer-ai-hl-switch {
    position: relative;
    flex: none;
    width: 22px;
    height: 12px;
    border-radius: 6px;
    background: var(--app-fg-4);
    transition: background-color 0.15s;
}

.viewer-ai-hl-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--app-ground);
    transition: transform 0.15s;
}

.viewer-ai-hl-btn[aria-pressed="true"] .viewer-ai-hl-switch {
    background: var(--accent);
}

.viewer-ai-hl-btn[aria-pressed="true"] .viewer-ai-hl-switch::after {
    transform: translateX(10px);
}

.viewer-ai-hl-btn[data-busy="true"] .viewer-ai-hl-switch::after {
    animation: viewer-ai-hl-pulse 0.9s ease-in-out infinite alternate;
}

@keyframes viewer-ai-hl-pulse {
    to {
        opacity: 0.25;
    }
}

/* 색 범례: 마우스를 올리거나 키보드로 고르면 잠깐 뒤에 보인다(ASK 앱 카드와 같은 모양·색). 안내 창이 떠 있으면 숨긴다. */
.viewer-ai-hl-legend {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    display: grid;
    gap: 6px;
    width: 210px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--app-ground);
    box-shadow: var(--app-shadow-pop);
    color: var(--app-fg-2);
    font-size: 12px;
    line-height: 16px;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s, visibility 0.15s;
}

.viewer-ai-hl:hover .viewer-ai-hl-legend,
.viewer-ai-hl:focus-within .viewer-ai-hl-legend {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.15s;
}

.viewer-ai-hl:has(.viewer-ai-hl-pop:not([hidden])) .viewer-ai-hl-legend {
    display: none;
}

.ai-hl-legend-desc {
    margin-bottom: 4px;
    color: var(--app-fg);
    word-break: keep-all;
}

.ai-hl-legend-title {
    margin-bottom: 2px;
    color: var(--app-fg-4);
    font-size: 11.5px;
}

.ai-hl-legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-hl-legend-row i {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--hl-problem);
}

.ai-hl-legend-row i[data-role="core"] {
    background: var(--hl-core);
}

.ai-hl-legend-row i[data-role="evidence"] {
    background: var(--hl-evidence);
}

/* 잠금·다 씀 같은 안내 */
.viewer-ai-hl-pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 31;
    display: grid;
    gap: 10px;
    width: 260px;
    padding: 12px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 14px 36px rgba(39, 38, 30, 0.16);
    color: var(--ink);
    font-size: 13px;
    line-height: 1.55;
    white-space: normal;
    word-break: keep-all;
}

.ai-hl-pop-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.ai-hl-pop-close {
    height: 26px;
    padding: 0 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.ai-hl-pop-close:hover {
    background: var(--card);
    color: var(--ink);
}

.pdf-viewer button:focus-visible,
.pdf-viewer a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* 페이지 영역: [가운데 칸(위쪽 바 + 논문)] [번역 패널] [오른쪽 패널]. ASK 앱처럼 위쪽 바는 가운데 칸 위에만 있다. */
.viewer-body {
    position: relative;
    display: flex;
    flex: 1;
    min-height: 0;
}

.viewer-main {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    /* 앱처럼 칸이 좁으면 위쪽 바의 오른쪽 버튼부터 칸 경계에서 잘려 가려진다(패널 위로 삐져나가지 않게).
       바가 아니라 칸에서 자르므로 바 아래로 펼쳐지는 안내 카드는 잘리지 않는다. */
    overflow: hidden;
}

/* 논문 칸. 찾기 상자·떠 있는 캡처 창·알림은 이 칸 기준으로 뜬다(패널 위에 겹치지 않게). */
.viewer-stage {
    position: relative;
    flex: 1;
    min-height: 0;
}

.pdf-viewer .viewer-body .viewer-stage > .viewer-scroller {
    height: 100%;
}

.viewer-scroller {
    position: relative;
    height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    background: var(--viewer-inset);
    /* 모바일에서 페이지를 길게 누를 때 선택·복사 메뉴 대신 반대쪽 보기가 되게 한다 */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    /* 두 손가락 확대는 화면 전체가 아니라 논문만 키운다(pdf-viewer.js) */
    touch-action: pan-x pan-y;
}

/* 스크롤바는 막대만 보이고 길(트랙)은 배경에 묻힌다. 논문 영역과 번역 패널이 같이 쓴다. */
.viewer-scroller,
.side-body {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent;
}

@supports not (scrollbar-color: auto) {
    .viewer-scroller::-webkit-scrollbar,
    .side-body::-webkit-scrollbar {
        width: 8px;
        height: 8px;
        background: transparent;
    }

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

.viewer-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, var(--viewer-page-w, 400px));
    justify-content: center;
    gap: 16px;
    width: max-content;
    min-width: 100%;
    padding: 8px 24px;
    background: var(--viewer-inset);
    color: var(--ink-soft);
    font-size: 12.5px;
}

.viewer-pages {
    display: grid;
    gap: 16px;
    width: max-content;
    min-width: 100%;
    padding: 16px 24px 48px;
}

.viewer-header:not([hidden]) + .viewer-pages {
    padding-top: 4px;
}

.viewer-row {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    gap: 16px;
}

.viewer-slot {
    position: relative;
    background: #fff;
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent),
        0 10px 30px -18px color-mix(in srgb, var(--ink) 30%, transparent);
}

.viewer-slot.empty {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--line);
}

.viewer-slot canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* 번역만·원문만: 두 장을 같은 자리에 겹치고 한 장만 보인다 */
.pdf-viewer[data-show="ko"] .viewer-row,
.pdf-viewer[data-show="en"] .viewer-row {
    grid-template-columns: max-content;
}

.pdf-viewer[data-show="ko"] .viewer-slot,
.pdf-viewer[data-show="en"] .viewer-slot {
    grid-area: 1 / 1;
}

.pdf-viewer[data-show="ko"] .viewer-slot[data-side="en"],
.pdf-viewer[data-show="en"] .viewer-slot[data-side="ko"] {
    visibility: hidden;
}

.viewer-status {
    position: absolute;
    top: 40%;
    left: 50%;
    margin: 0;
    padding: 10px 16px;
    max-width: calc(100% - 32px);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 6px 24px -10px color-mix(in srgb, var(--ink) 35%, transparent);
    color: var(--ink-soft);
    text-align: center;
    transform: translate(-50%, -50%);
}

/* Alt(⌥) 미리보기 표시(앱: absolute left-1/2 top-3 rounded-full bg-fg/85 px-3 py-1 text-[12px] text-ground shadow-pop) */
.viewer-peek {
    position: absolute;
    top: 12px;
    left: 50%;
    z-index: 3;
    margin: 0;
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--app-fg, #27261e) 85%, transparent);
    box-shadow: var(--app-shadow-pop);
    color: var(--app-ground, #fbfbf8);
    font-size: 12px;
    transform: translateX(-50%);
    pointer-events: none;
    white-space: nowrap;
}

/* 좁은 화면(휴대폰 두 줄 위쪽 바는 viewer-toolbar.css) */
@media (max-width: 759px) {
    .viewer-pages {
        padding: 12px 12px 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pdf-viewer * {
        transition: none !important;
    }
}

/* 채팅 답변의 인용 칩을 누르면 원문에서 인용 문장을 잠깐 칠한다. */
.viewer-cite {
    position: absolute;
    border-radius: 2px;
    background: color-mix(in srgb, var(--accent) 34%, transparent);
    pointer-events: none;
    transition: opacity 0.8s ease;
}

.viewer-cite.fading {
    opacity: 0;
}

/* 하이라이트 층·메모 팝오버는 viewer-annotations.css */

/* 드래그로 고를 수 있는 보이지 않는 글자 층(pdf.js 3.x text layer 규칙). 마우스 쓰는 넓은 화면에서만 깐다. */
.textLayer {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    line-height: 1;
    text-align: initial;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    forced-color-adjust: none;
    transform-origin: 0 0;
    -webkit-user-select: text;
    user-select: text;
}

.textLayer span,
.textLayer br {
    position: absolute;
    color: transparent;
    white-space: pre;
    cursor: text;
    transform-origin: 0% 0%;
}

.textLayer span.markedContent {
    top: 0;
    height: 0;
}

/* 기본 선택 색은 끄고, 고른 범위를 줄마다 합친 상자(.viewer-sel-layer)로 글자 층 바로 아래에 칠한다.
   색은 ASK 앱 선택 색과 같다(불투명 + 곱하기라 겹쳐도 진해지지 않음). */
.textLayer ::selection {
    background: transparent;
}

.viewer-sel-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: multiply;
}

.viewer-sel-layer i {
    position: absolute;
    background: color-mix(in srgb, #cc7d5e 25%, white);
}

.textLayer br::selection {
    background: transparent;
}

.textLayer .endOfContent {
    display: block;
    position: absolute;
    inset: 100% 0 0;
    z-index: -1;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
}

.textLayer .endOfContent.active,
.textLayer.selecting .endOfContent {
    top: 0;
}

/* 고른 글자 근처에 뜨는 '질문하기'(앱 선택 팝업과 같은 모양) */
.viewer-ask {
    position: fixed;
    z-index: 20;
    display: flex;
    align-items: center;
    padding: 6px;
    border-radius: 12px;
    background: #fbfbf8;
    box-shadow: 0 8px 24px rgba(30, 28, 18, 0.14), 0 0 0 1px rgba(39, 38, 30, 0.11);
    transform: translate(-50%, 0) translateY(14px);
}

.viewer-ask.above {
    transform: translate(-50%, -100%) translateY(-14px);
}

.viewer-ask-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: #cc7d5e;
    color: #fff;
    font: inherit;
    font-size: 12.5px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s;
}

.viewer-ask-btn:hover {
    background: #b56b4d;
}

.viewer-ask-btn svg {
    width: 14px;
    height: 14px;
}

.viewer-ask[hidden] {
    display: none;
}

@media (max-width: 759px) {
    .textLayer {
        display: none;
    }
}