/* 나란히 읽기 번역 패널: 원문 바로 옆에 붙는다. ASK AI 패널과 함께 열면 [원문][번역][ASK AI] 순서.
   색은 tokens.css, 문장 짝 강조는 원문·번역 모두 같은 옅은 주황(앱 강조색 #cc7d5e). AI 하이라이트 노랑과 겹치지 않게. */

/* 원문 문장 상자(가운데 칸)와 번역 문장(번역 패널)이 같이 쓰므로 뷰어 전체에 둔다. */
.pdf-viewer {
    --side-hl: rgba(204, 125, 94, 0.16);
}

.pdf-viewer.side-open .viewer-body {
    display: flex;
}

.pdf-viewer.side-open .viewer-scroller {
    flex: 1;
    min-width: 0;
}

.viewer-side {
    position: relative;
    display: flex;
    flex-direction: column;
    width: var(--side-w, 420px);
    max-width: calc(100% - 360px);
    flex: none;
    min-height: 0;
    border-left: 1px solid var(--line);
    background: var(--viewer-ground, #fbfbf8);
    font-family: var(--font-sans);
}

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

.side-resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -4px;
    z-index: 2;
    width: 8px;
    cursor: col-resize;
    touch-action: none;
}

.side-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 10px 18px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    white-space: nowrap;
}

/* 따라가기: '원문 ⇄ 번역' 사이 화살표 두 개. 켠 화살표는 주황, 끈 화살표는 흐리게. 머리 가운데에 둔다
   (설정 버튼도 margin-left: auto라 남는 폭을 둘이 나눠 가운데에 온다). */
.side-follow {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--card);
    box-shadow: inset 0 0 0 1px var(--line);
    font-size: 11.5px;
    letter-spacing: 0.01em;
    color: var(--ink-faint);
    white-space: nowrap;
    flex: none;
    user-select: none;
}

.side-follow-arrows {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
}

.side-follow-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 26px;
    height: 13px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: color-mix(in srgb, var(--ink) 25%, transparent);
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}

.side-follow-btn svg {
    width: 18px;
    height: 9px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.side-follow-btn:hover {
    background: var(--pill);
    color: var(--ink-soft);
}

.side-follow-btn[aria-pressed="true"] {
    color: var(--accent);
}

.side-follow-btn[aria-pressed="true"]:hover {
    background: var(--accent-tint);
    color: var(--accent-text);
}

.side-follow-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* 올리면 바로 아래에 설명(지금 켜짐·꺼짐 포함)을 띄운다. */
.side-follow-btn::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 9px);
    left: 50%;
    transform: translate(-50%, -2px);
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--ink);
    color: var(--bg);
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s, transform 0.12s;
    z-index: 30;
}

.side-follow-btn + .side-follow-btn::after {
    top: calc(100% + 8px);
}

.side-follow-btn:hover::after,
.side-follow-btn:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
    transition-delay: 0.3s;
}

.side-close {
    margin-left: auto;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
}

.side-close svg {
    width: 14px;
    height: 14px;
}

.side-close:hover {
    background: var(--pill);
}

.side-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    /* 아래 여백은 마지막 쪽도 위로 올려 읽게 둔다. 번역 중 자리 높이 계산에도 쓴다. */
    --side-pad-bottom: 40vh;
    padding: 6px 22px var(--side-pad-bottom);
    scroll-behavior: smooth;
    /* 번역 중 자리(.side-state.pending)가 패널에 보이는 높이(cqh)를 알 수 있게 한다. */
    container-type: size;
}

.side-page {
    padding-top: 14px;
}

.side-page + .side-page {
    margin-top: 18px;
    border-top: 1px solid var(--line);
}

.side-page-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
}

.side-page-head b {
    color: var(--ink-soft);
    font-weight: 600;
}

.side-page-body {
    /* 설정의 '번역 글자 크기'(--side-font, 기본 18px). 블록 수식은 아래 .side-formula에서 15.5px로 고정한다. */
    font-size: var(--side-font, 18px);
    line-height: 1.85;
    color: var(--ink);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.side-block {
    margin: 0 0 14px;
    /* 줄 사이·문장 사이 빈틈에서도 문장 위와 같은 손가락 커서(강조도 빈틈에서 유지된다) */
    cursor: pointer;
}

.side-block.heading {
    font-weight: 700;
    font-size: calc(var(--side-font, 18px) + 1px);
    line-height: 1.6;
}

.side-block.caption {
    font-size: calc(var(--side-font, 18px) - 1.5px);
    color: var(--ink-soft);
}

/* 번역 설정(글자 크기): ASK AI 설정 창과 같은 모양 */
.side-head {
    position: relative;
}

.side-settings-btn {
    margin-left: auto;
}

.side-settings-btn + .side-settings + .side-close {
    margin-left: 0;
}

.side-settings-btn svg {
    width: 15px;
    height: 15px;
}

.side-settings-btn[aria-expanded="true"] {
    background: var(--card);
    color: var(--ink);
}

.side-settings {
    position: absolute;
    top: calc(100% - 4px);
    right: 12px;
    z-index: 3;
    width: 230px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(30, 28, 18, 0.14);
    font-size: 13px;
}

.side-settings[hidden] {
    display: none;
}

.side-settings-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.side-settings input[type="range"] {
    flex: 1;
    min-width: 0;
    accent-color: var(--ink);
    cursor: pointer;
}

.side-settings-row span {
    width: 44px;
    color: var(--ink-soft);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.side-sent {
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.12s;
}

.side-sent.on {
    background: var(--side-hl);
}

.side-formula {
    display: block;
    font-size: 15.5px;
    margin: 4px 0 16px;
    padding: 2px 0;
    overflow-x: auto;
    overflow-y: hidden;
    text-align: left;
}

/* '보행 가능성 =' + 블록 수식을 한 줄에 둔다. */
.side-eq-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 16px;
}

.side-eq-row > .side-block {
    flex: none;
    max-width: 40%;
    margin: 0;
}

.side-eq-row > .side-formula {
    flex: 1;
    min-width: 0;
    margin: 0;
}

/* 블록 수식은 본문처럼 왼쪽에 붙여 시작한다(KaTeX 기본은 가운데).
   식 번호가 있으면 번호를 겹쳐 띄우지 않고 오른쪽 끝에 둔다. 패널보다 넓으면 수식 칸이 옆으로 스크롤된다. */
.side-formula .katex-display {
    margin: 0;
}

.side-formula .katex-display > .katex {
    text-align: left;
}

.side-formula .katex-display > .katex > .katex-html {
    display: flex;
    align-items: center;
}

.side-formula .katex-display > .katex > .katex-html > .tag {
    position: static;
    flex: none;
    margin-left: auto;
    padding-left: 0.8em;
}

/* 새 문단을 풀어 보일 때 아직 차례가 오지 않은 수식(차례가 오면 살짝 나타난다). */
.side-math,
.side-math-raw {
    transition: opacity 0.2s;
}

.side-unrevealed {
    opacity: 0;
}

.side-math-raw {
    font-size: 0.92em;
    color: var(--ink-soft);
}

.side-skip {
    margin: 0;
    font-size: 13.5px;
    color: var(--ink-faint);
}

.side-state {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--card);
    font-size: 13px;
    color: var(--ink-soft);
}

/* 번역 전·번역 중인 쪽은 패널 한 화면을 거의 다 채운다(번역이 오면 글 높이로 바뀐다).
   cqh는 패널 본문의 여백을 뺀 높이라 아래 여백을 더하고, 쪽 머리(약 60px)만큼 뺀다. */
.side-state.waiting,
.side-state.pending {
    height: 60vh;
    height: calc(100cqh + var(--side-pad-bottom) - 72px);
    min-height: 160px;
    overflow: hidden;
    /* 아직 번역하지 않은 쪽도 모두 이 자리를 쓰니, 화면 밖 자리는 그리지 않아 가볍게 한다(높이는 위에서 정함). */
    content-visibility: auto;
}

/* 머무르기 전: 움직이지 않는 점선 칸. 지금 머무르기를 세는 쪽만 원형 타이머가 차오른다.
   이미 번역된 쪽인지 묻는 동안(보통 0.3초 안) 이 칸이 깜박이지 않게 조금 늦게 나타난다. */
.side-state.waiting {
    animation: side-appear 0.2s ease-out 0.3s both;
    justify-items: center;
    align-content: center;
    gap: 10px;
    border: 1px dashed var(--line-strong);
    background: transparent;
    text-align: center;
    font-size: 13.5px;
}

.side-state.waiting small {
    max-width: 26em;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-faint);
}

@keyframes side-appear {
    from { opacity: 0; }
}

@property --side-dwell {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

.side-ring {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: conic-gradient(var(--accent) var(--side-dwell), var(--solid) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}

.side-settling .side-ring {
    animation: side-dwell 3s linear forwards;
}

@keyframes side-dwell {
    to { --side-dwell: 100%; }
}

/* 번역 중: 숨쉬는 주황 점과 옅은 주황 빛이 지나가는 줄 다섯 개. */
.side-state.pending {
    align-content: start;
    gap: 14px;
    padding: 2px 0 0;
    background: transparent;
}

.side-status {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
}

.side-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    animation: side-pulse 1.6s ease-out infinite;
}

@keyframes side-pulse {
    from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 28%, transparent); }
    to { box-shadow: 0 0 0 9px transparent; }
}

.side-lines {
    display: grid;
    gap: 9px;
}

.side-state.limit {
    background: var(--accent-tint);
    color: var(--accent-ink);
}

.side-shimmer {
    display: block;
    height: 9px;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--card) 0%, color-mix(in srgb, var(--accent) 14%, var(--card)) 50%, var(--card) 100%);
    background-size: 220% 100%;
    animation: side-shimmer 1.8s ease-in-out infinite;
}

.side-shimmer:nth-child(2) { animation-delay: 0.12s; }
.side-shimmer:nth-child(3) { animation-delay: 0.24s; }
.side-shimmer:nth-child(4) { animation-delay: 0.36s; }
.side-shimmer:nth-child(5) { animation-delay: 0.48s; }

@keyframes side-shimmer {
    from { background-position: 110% 0; }
    to { background-position: -110% 0; }
}

/* 아직 받는 중인 쪽: 마지막 문단 끝에서 깜박이는 커서. */
.side-tail::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 1em;
    margin-left: 3px;
    vertical-align: -0.15em;
    border-radius: 2px;
    background: var(--accent);
    animation: side-caret 1s steps(2, start) infinite;
}

@keyframes side-caret {
    to { visibility: hidden; }
}

/* 다 받은 쪽 끝의 '이 쪽 다시 번역'. 본문을 가리지 않게 작고 옅은 밑줄 글자로 둔다. */
.side-redo {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.side-redo-btn {
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--ink-faint);
    font: inherit;
    font-size: 12.5px;
    line-height: 1.5;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.side-redo-btn:hover {
    color: var(--ink-soft);
}

.side-redo-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.side-retry {
    justify-self: start;
    padding: 5px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

/* 원문 쪽 위 문장 상자. 글자 고르기 층 아래에 깔려 고르기를 막지 않는다. */
/* 원문 쪽: 문장 상자 안(줄 사이 빈틈 포함)에서는 글자 선택 커서를 유지한다. */
.viewer-slot.side-hit .textLayer {
    cursor: text;
}

.side-boxes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.side-box {
    position: absolute;
    border-radius: 2px;
    transition: background-color 0.12s;
}

.side-box.on {
    background: var(--side-hl);
    mix-blend-mode: multiply;
}

.side-retry:focus-visible,
.side-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* 번역·ASK AI를 함께 열기엔 좁으면 ASK AI가 번역 패널 위에 겹쳐 뜬다 */
@media (max-width: 1279px) and (min-width: 760px) {
    .pdf-viewer.side-open.chat-open .viewer-chat {
        position: absolute;
        top: 0;
        /* 오른쪽 레일은 가리지 않는다 */
        right: var(--vr-w);
        bottom: 0;
        z-index: 4;
        box-shadow: -12px 0 28px rgba(39, 38, 30, 0.14);
    }
}

/* 시트 탭(번역 | ASK AI): 휴대폰에서 둘 다 열렸을 때만 보인다. ASK AI 시트의 'ASK AI' 표시(.sheet-current)도 그때만. */
.sheet-tab,
.sheet-current {
    display: none;
}

/* 휴대폰: 논문 아래 시트 */
@media (max-width: 759px) {
    /* 둘 다 열리면 한 자리를 번갈아 쓴다. 머리의 탭 제목으로 바꾼다(sheet-tabs.js). */
    .pdf-viewer.side-open.chat-open[data-sheet="chat"] .viewer-side,
    .pdf-viewer.side-open.chat-open[data-sheet="side"] .viewer-chat {
        display: none;
    }

    .pdf-viewer.side-open.chat-open .sheet-tab {
        display: inline-flex;
        align-items: center;
        padding: 2px 2px 4px;
        border: 0;
        border-bottom: 2px solid transparent;
        background: none;
        color: var(--ink-soft);
        font: inherit;
        font-size: 14px;
        cursor: pointer;
    }

    .pdf-viewer.side-open.chat-open .side-head > b,
    .pdf-viewer.side-open.chat-open .chat-head > .sheet-current {
        padding: 2px 2px 4px;
        border-bottom: 2px solid var(--accent);
    }

    .pdf-viewer.side-open.chat-open .chat-head > .sheet-current {
        display: block;
    }


    .pdf-viewer.side-open.chat-open .side-head .side-follow-end {
        display: none;
    }

    .pdf-viewer.side-open.chat-open .side-head,
    .pdf-viewer.side-open.chat-open .chat-head {
        gap: 14px;
    }

    .pdf-viewer.side-open .viewer-body {
        flex-direction: column;
        background: color-mix(in srgb, var(--bg), var(--ink) 7%);
    }

    .pdf-viewer.side-open .viewer-scroller {
        height: auto;
        min-height: 0;
    }

    .viewer-side {
        width: auto;
        max-width: none;
        height: var(--side-h, 46%);
        border-left: 0;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.14);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* 시트 위쪽 손잡이를 끌어 높이를 바꾼다(ASK AI 시트와 같은 모양). 끄는 동안 논문·번역 글은 구르지 않는다. */
    .side-resizer {
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        width: auto;
        height: 22px;
        cursor: row-resize;
    }

    .side-resizer::after {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--line-strong);
        transform: translateX(-50%);
        transition: background 0.15s;
    }

    .side-resizer:hover::after,
    .side-resizer:focus-visible::after,
    .pdf-viewer.side-resizing .side-resizer::after {
        background: var(--accent);
    }

    .side-resizer:focus-visible {
        outline: none;
    }

    .pdf-viewer.side-resizing {
        cursor: row-resize;
        user-select: none;
    }

    .side-head {
        padding-top: 22px;
    }

    /* 번역 시트가 열려 있으면 'AI 질문' 버튼을 시트 위로 올려 번역 글을 가리지 않게 한다. */
    .pdf-viewer.side-open .viewer-chat-fab {
        bottom: calc(var(--side-h, 46%) + 12px);
    }

    /* 휴대폰 바는 둘째 줄이 보기 탭이다. 만들기 버튼은 그 줄 오른쪽 끝에 둔다. */
    .viewer-layout {
        order: 7;
        margin-left: auto;
    }

    .viewer-layout::before {
        display: none;
    }

    .viewer-layout-pop {
        left: auto;
        right: 0;
    }

    .side-body {
        --side-pad-bottom: 24px;
    }
}

/* 마우스가 없는 기기(휴대폰·태블릿)는 올림이 없고 누르면 늘 짝으로 옮기니 따라가기 화살표를 두지 않는다. */
@media (hover: none) {
    .side-follow {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .side-state.waiting,
    .side-shimmer,
    .side-dot,
    .side-settling .side-ring,
    .side-tail::after {
        animation: none;
    }

    .side-body {
        scroll-behavior: auto;
    }
}

/* 번역본 PDF 만들기: 보기 탭 옆의 테두리 없는 주황 글자 버튼. 만드는 중엔 작은 원이 차오르고(--p), 다 되면 뷰어가 번역본으로 바뀐다. */
.viewer-layout {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.viewer-layout::before {
    content: "";
    width: 1px;
    height: 18px;
    background: var(--line-strong);
}

.viewer-layout:has(.viewer-layout-btn[hidden])::before {
    display: none;
}

/* 레이아웃 번역 만들기: 옆 보기 버튼(원문·사이드 번역)과 같은 모양(색 없음, 보통 굵기). */
.viewer-layout-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px 1px;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s;
}

.viewer-layout-btn:hover {
    color: var(--ink);
}

.viewer-layout-btn[data-phase="starting"],
.viewer-layout-btn[data-phase="running"] {
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    cursor: default;
}

.viewer-layout-btn[data-phase="starting"]:hover,
.viewer-layout-btn[data-phase="running"]:hover {
    color: var(--ink-soft);
}

.viewer-layout-btn[data-phase="starting"]::before,
.viewer-layout-btn[data-phase="running"]::before {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background:
        radial-gradient(circle, var(--surface) 0 3.5px, transparent 4px),
        conic-gradient(var(--accent) var(--p, 0%), var(--solid) 0);
}

.viewer-layout-pop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    width: 300px;
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 14px 36px rgba(39, 38, 30, 0.16);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink);
    /* 위쪽 바는 줄을 바꾸지 않으니 패널 안에서는 다시 바꾼다 */
    white-space: normal;
    word-break: keep-all;
}

.viewer-layout-pop[hidden],
.layout-pop-error[hidden] {
    display: none;
}

.layout-pop-head {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.layout-pop-close {
    margin-left: auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
}

.layout-pop-close svg {
    width: 13px;
    height: 13px;
}

.layout-pop-text {
    color: var(--ink-soft);
}

/* 차감 안내: 키 컬러 주황 글자 */
.layout-pop-note {
    color: var(--app-accent, #cc7d5e);
}

.layout-pop-error {
    padding: 8px 10px;
    border-radius: 9px;
    background: color-mix(in srgb, #c0392b 9%, var(--surface));
    color: #a1302a;
}

.layout-pop-start {
    height: 36px;
    border: 0;
    border-radius: 9px;
    background: var(--ink);
    color: var(--bg);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.layout-pop-start:focus-visible,
.layout-pop-close:focus-visible,
.viewer-layout-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* 위쪽 바의 작은 패널·안내 카드가 논문과 찾기 상자(z-index 70) 위로 뜨게 바를 본문보다 위에 둔다(앱 카드 z-80과 같다).
   확대·⋯ 메뉴(.viewer-pop, 80)는 그보다 위다. */
.pdf-viewer .viewer-bar {
    position: relative;
    z-index: 75;
}