/* 2차 — preview 전용 스타일. 공통 토큰(theme.css·tf.css)을 쓴다
   본문 미리보기: 문서 그대로(쪽 그림을 세로로) | 글자만 (사용자 요청 2026-10-15) */

.p2pv-head { flex-wrap: wrap; row-gap: 6px; }
.p2pv-head h2 { margin: 0; }

/* 바꾸기 — 오른쪽 끝에 작은 두 칸 */
.p2pv-seg {
    margin-left: auto; display: inline-flex; padding: 2px; gap: 2px;
    background: var(--surface-sunken); border-radius: 999px;
}
.p2pv-seg button {
    border: 0; background: none; cursor: pointer; font: inherit;
    font-size: 12.5px; font-weight: 600; color: var(--text-2);
    padding: 4px 12px; border-radius: 999px; min-height: 28px; white-space: nowrap;
}
.p2pv-seg button.on { background: var(--surface); color: var(--tf-deep); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.p2pv-seg button:focus-visible { outline: 2px solid var(--tf); outline-offset: 1px; }

/* 쪽 수 · PDF 로 열기 · 다시 만들기 — 기존 '받기·바로 보기' 단추와 겹치지 않게 글자 링크로 작게 */
.p2pv-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
    padding: 0 16px 8px; font-size: 12.5px;
}
.p2pv-link {
    display: inline-flex; align-items: center; gap: 4px;
    border: 0; background: none; padding: 2px 0; cursor: pointer; font: inherit;
    font-size: 12.5px; color: var(--tf-deep); text-decoration: none;
}
.p2pv-link:hover { text-decoration: underline; }
.p2pv-link svg { width: 14px; height: 14px; }

/* 쪽들 — 회색 바탕 위에 흰 종이. 어두운 화면에서도 종이는 흰색(인쇄 모양 그대로) */
.p2pv-pages {
    background: var(--surface-sunken);
    padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 14px;
    max-height: min(82vh, 1600px); overflow: auto; overscroll-behavior: contain;
}
.p2pv-page { margin: 0; width: 100%; max-width: 860px; }
.p2pv-page.wide { max-width: 1100px; }               /* 가로 쪽(발표 자료·표) */
.p2pv-page a { display: block; line-height: 0; }
.p2pv-page img {
    display: block; width: 100%; height: auto;
    background: #fff; color-scheme: light;
    box-shadow: 0 1px 3px rgb(0 0 0 / .18), 0 0 0 1px rgb(0 0 0 / .06);
}
.p2pv-page figcaption {
    text-align: center; font-size: 11.5px; color: var(--text-2); margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.p2pv-img img { max-height: 78vh; width: auto; max-width: 100%; margin: 0 auto; }

/* 만드는 중 */
.p2pv-wait { display: flex; gap: 12px; align-items: flex-start; padding: 6px 16px 18px; }
.p2pv-wait b { font-size: 14px; }
.p2pv-wait p { margin: 2px 0 0; font-size: 12.5px; }
.p2pv-spin {
    flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
    border: 2.5px solid var(--line); border-top-color: var(--tf);
    animation: p2pv-spin .9s linear infinite;
}
@keyframes p2pv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .p2pv-spin { animation-duration: 3s; } }

/* 못 만든 이유 한 줄 */
.p2pv-note {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
    margin: 0 16px 8px; padding: 8px 10px; border-radius: 8px;
    background: var(--surface-sunken); color: var(--text-2); font-size: 12.5px; line-height: 1.5;
}
.p2pv-note > svg { width: 15px; height: 15px; flex: none; color: var(--warn); }
.p2pv-note > span { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }

/* 어두운 화면 — 짙은 청록은 어두운 바탕에서 잘 안 보인다(tf.css 의 다른 곳과 같이 밝은 청록으로) */
:root[data-theme="dark"] .p2pv-link, :root[data-theme="dark"] .p2pv-seg button.on { color: var(--tf); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .p2pv-link,
    :root:not([data-theme="light"]):not([data-theme="dark"]) .p2pv-seg button.on { color: var(--tf); }
}

/* 폰 — 종이를 가장자리까지, 안쪽 스크롤은 조금 낮게 */
@media (max-width: 767px) {
    .p2pv-pages { padding: 8px 6px; gap: 10px; max-height: 75vh; }
    .p2pv-seg button { padding: 4px 10px; }
}