/* 문서에서 찾기 상자와 일치 표시. 모양·색은 ASK 앱 PdfViewer.tsx(role="search")·globals.css(.pdf-search-match)와 같다. */
.pdf-viewer {
    --find-ground: #fbfbf8;
    --find-fg: #27261e;
    --find-fg-3: #6e6d66;
    --find-fg-4: #85847d;
    --find-edge: rgba(39, 38, 30, 0.11);
    --find-edge-strong: rgba(39, 38, 30, 0.18);
    --find-hover: rgba(39, 38, 30, 0.05);
    --find-accent: #cc7d5e;
    --find-accent-h: #b56b4d;
}

/* 논문 영역 오른쪽 위(앱: absolute right-4 top-3 z-[70] rounded-xl bg-ground p-1.5 shadow-pop) */
.viewer-find {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 2px;
    max-width: calc(100% - 32px);
    padding: 6px;
    border-radius: 12px;
    background: var(--find-ground);
    box-shadow: 0 8px 24px rgba(30, 28, 18, 0.14), 0 0 0 1px var(--find-edge);
    color: var(--find-fg);
    font-size: 12.5px;
}

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

.viewer-find-input {
    box-sizing: border-box;
    width: 192px;
    min-width: 0;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--find-edge-strong);
    border-radius: 6px;
    background: var(--find-ground);
    color: var(--find-fg);
    font: inherit;
    font-size: 13px;
    outline: none;
}

.viewer-find-input:focus {
    border-color: var(--find-fg-3);
}

.viewer-find-input::placeholder {
    color: var(--find-fg-4);
}

.viewer-find-status {
    min-width: 48px;
    padding: 0 6px;
    color: var(--find-fg-4);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

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

.viewer-find-btn svg {
    width: 16px;
    height: 16px;
}

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

.viewer-find-btn:hover {
    background: var(--find-hover);
    color: var(--find-fg);
}

.viewer-find-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.viewer-find-btn:disabled:hover {
    background: transparent;
    color: var(--find-fg-3);
}

.viewer-find-btn:focus-visible,
.viewer-find-input:focus-visible {
    outline: 2px solid var(--find-accent);
    outline-offset: 1px;
}

/* 쪽 칸 위 일치 상자: 하이라이트 위, 마우스는 받지 않아 글자 고르기를 막지 않는다.
   앱 글자 층처럼 곱하기로 얹어 글자가 그대로 읽힌다. */
.viewer-find-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: multiply;
}

.viewer-find-mark {
    position: absolute;
    border-radius: 2px;
    background: color-mix(in srgb, var(--find-accent) 42%, transparent);
}

.viewer-find-mark.current {
    background: color-mix(in srgb, var(--find-accent) 78%, transparent);
    box-shadow: 0 0 0 1px var(--find-accent-h);
}

/* 위치(right·top·max-width)는 viewer-find.js가 논문 영역에 맞춰 정한다. */
@media (max-width: 639px) {
    .viewer-find-input {
        width: 144px;
    }
}