/*!
 * pdfjs_preview — 문서에 삽입되는 미리보기 블록 스타일.
 *
 * 예전에는 이 규칙들이 전부 애드온이 만들어내는 인라인 style="" 속성이었다.
 * CSP 에서 'unsafe-inline' 이 빠지면 전부 무시되므로 클래스로 옮겼다
 * (docs/19-security.md).
 */

.pdfjs-preview-list {
    margin: 12px 0;
}

.pdfjs-preview-block {
    margin-top: 12px;
}

.pdfjs-preview-block:first-child {
    margin-top: 0;
}

/* 요약줄을 버튼처럼 보이게 한다. <details>/<summary> 의 접근성(키보드 포커스,
 * 스크린리더의 열림/닫힘 상태)을 그대로 쓰기 위해 button 요소로 바꾸지 않고
 * summary 를 스타일링한다. */
.pdfjs-preview-summary {
    /* 테마 클래스가 이 다섯 개만 바꾼다. 아래 규칙들은 손대지 않는다.
     * 여기 값이 곧 '기본' 테마다 — .pdfjs-theme-default 라는 규칙은 따로 없다. */
    --pp-bg: #9338eb;
    --pp-fg: #ffffff;
    --pp-border: #7f27d6;
    --pp-bg-hover: #8027d8;
    --pp-bg-open: #7526c4;

    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 8px 14px;
    border: 1px solid var(--pp-border);
    border-radius: 6px;
    background-color: var(--pp-bg);
    color: var(--pp-fg);
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.pdfjs-preview-summary::-webkit-details-marker {
    display: none;
}

.pdfjs-preview-summary:hover {
    background-color: var(--pp-bg-hover);
}

.pdfjs-preview-summary:active {
    background-color: var(--pp-bg-open);
}

.pdfjs-preview-summary:focus-visible {
    outline: 2px solid #4a90d9;
    outline-offset: 2px;
}

.pdfjs-preview-block[open] > .pdfjs-preview-summary {
    background-color: var(--pp-bg-open);
}

.pdfjs-preview-summary::before {
    content: "\1F4C4";
    flex: none;
}

/* 열림/닫힘 표시. 펼치면 화살표가 뒤집힌다. */
.pdfjs-preview-summary::after {
    content: "\25BE";
    flex: none;
    font-size: .85em;
    opacity: .65;
    transition: transform .15s ease;
}

.pdfjs-preview-block[open] > .pdfjs-preview-summary::after {
    transform: rotate(180deg);
}

/* ── 요약줄 테마 ──────────────────────────────────────────────────
 * 배경·글자·테두리를 사용자 지정 속성으로 뽑아 두고, 테마 클래스가 그 값만 바꾼다.
 * 관리자가 고른 테마는 Controllers\Inject 가 블록 요소에 클래스로 붙인다.
 *
 * 자유 입력(HEX)이 아니라 미리 짜 둔 조합인 이유:
 *   1. 배경만 고르게 하면 대비가 무너진다. 어두운 배경에 검은 글씨가 나오는
 *      조합을 관리자가 만들 수 있어야 할 이유가 없다. 짝으로 묶어 둔다.
 *   2. 임의 색을 반영하려면 값이 담긴 CSS 를 런타임에 만들어야 하는데,
 *      인라인 <style> 은 CSP 에서 막히고(docs/19-security.md) 파일로 쓰면
 *      웹서버 설정에 따라 차단되는 경로가 생긴다(files/ 차단 규칙).
 *      정적 클래스는 두 문제를 모두 피한다.
 * 색을 늘리려면 여기에 규칙 한 줄과 Models\Config::SUMMARY_THEMES 에 이름만 더한다. */
/* 2.0.0 까지의 기본값이던 회색. 밋밋한 쪽을 원하면 이것을 쓴다. */
.pdfjs-theme-gray > .pdfjs-preview-summary {
    --pp-bg: #f5f6f8;
    --pp-fg: #2b2f36;
    --pp-border: #d0d3d8;
    --pp-bg-hover: #eceef2;
    --pp-bg-open: #e8eaee;
}

.pdfjs-theme-slate > .pdfjs-preview-summary {
    --pp-bg: #2f353d;
    --pp-fg: #ffffff;
    --pp-border: #262b32;
    --pp-bg-hover: #3b424c;
    --pp-bg-open: #262b32;
}

.pdfjs-theme-blue > .pdfjs-preview-summary {
    --pp-bg: #2563eb;
    --pp-fg: #ffffff;
    --pp-border: #1d4fd0;
    --pp-bg-hover: #1d4fd0;
    --pp-bg-open: #1a45b8;
}

.pdfjs-theme-teal > .pdfjs-preview-summary {
    --pp-bg: #0f766e;
    --pp-fg: #ffffff;
    --pp-border: #0b5f58;
    --pp-bg-hover: #0b5f58;
    --pp-bg-open: #094f49;
}

.pdfjs-theme-crimson > .pdfjs-preview-summary {
    --pp-bg: #b3261e;
    --pp-fg: #ffffff;
    --pp-border: #971f18;
    --pp-bg-hover: #971f18;
    --pp-bg-open: #801a14;
}

/* 밝은 배경 — 글자를 어둡게 둔다. */
.pdfjs-theme-amber > .pdfjs-preview-summary {
    --pp-bg: #fbd24e;
    --pp-fg: #3a2c05;
    --pp-border: #e5bb35;
    --pp-bg-hover: #f6c62d;
    --pp-bg-open: #eeb91c;
}

.pdfjs-theme-mint > .pdfjs-preview-summary {
    --pp-bg: #d7f2e5;
    --pp-fg: #10543a;
    --pp-border: #a9dcc6;
    --pp-bg-hover: #c6ebd8;
    --pp-bg-open: #b5e4cb;
}

.pdfjs-theme-paper > .pdfjs-preview-summary {
    --pp-bg: #ffffff;
    --pp-fg: #2b2f36;
    --pp-border: #c7ccd4;
    --pp-bg-hover: #f5f6f8;
    --pp-bg-open: #eceef2;
}

/* ── 요약줄 아이콘 ──────────────────────────────────────────────
 * 기본값은 문서 아이콘. 'none' 은 content 를 지워 아이콘 칸까지 없앤다. */
.pdfjs-icon-book > .pdfjs-preview-summary::before { content: "\1F4D5"; }
.pdfjs-icon-clip > .pdfjs-preview-summary::before { content: "\1F4CE"; }
.pdfjs-icon-search > .pdfjs-preview-summary::before { content: "\1F50D"; }
.pdfjs-icon-eye > .pdfjs-preview-summary::before { content: "\1F441"; }
.pdfjs-icon-none > .pdfjs-preview-summary::before { content: none; }

.pdfjs-preview-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.pdfjs-preview-frame {
    display: block;
    width: 100%;
    /* viewer-embed.js 가 실측 후 덮어쓴다. JS 가 죽어도 볼 수 있도록 기본값을 둔다. */
    height: 70vh;
    border: 0;
    overflow: hidden;
    background: #2a2a2e;
}

.pdfjs-preview-block > .pdfjs-preview-frame {
    margin-top: 8px;
}

/* 단독 뷰어 페이지(dispPdfjsPreviewView) — 화면을 꽉 채운다. */
.pdfjs-preview-standalone {
    margin: 0;
}

.pdfjs-preview-standalone .pdfjs-preview-block {
    margin-top: 0;
}

.pdfjs-preview-standalone .pdfjs-preview-frame {
    height: 85vh;
    margin-top: 0;
}