/* 워드 뷰어 — 문서가 주인공이라 종이처럼 보이게 한다. */

.wv-top { margin-bottom: var(--spacing-lg, 1.5rem); }

.wv-drop {
    border: 2px dashed var(--border-color, #d8dce3);
    border-radius: var(--radius-md, 8px);
    padding: var(--spacing-xl, 2rem) var(--spacing-lg, 1.5rem);
    text-align: center; cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
    background: var(--bg-subtle, #f8f9fb);
}
.wv-drop:hover, .wv-drop:focus-visible, .wv-drop.is-over {
    border-color: #2b579a; background: #eef2fa; outline: none;
}
.wv-drop.is-disabled { opacity: .5; pointer-events: none; }
.wv-drop > i { font-size: 2rem; color: #2b579a; margin-bottom: var(--spacing-sm, .5rem); }
.wv-drop-title { margin: 0 0 .25rem; font-weight: 600; }
.wv-drop-hint  { margin: 0; font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); }

.wv-fileinfo {
    display: flex; align-items: center; gap: .625rem;
    padding: .625rem .75rem;
    border: 1px solid var(--border-color, #e5e8ed);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-surface, #fff);
}
.wv-fileinfo > i { font-size: 1.25rem; color: #2b579a; }
.wv-fileinfo > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.wv-filename { font-weight: 600; font-size: var(--text-sm, .875rem); word-break: break-all; }
.wv-filemeta { font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); }

.wv-toolbar {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
    justify-content: space-between; margin-top: .625rem;
}
.wv-zoom { display: flex; align-items: center; gap: .375rem; }
.wv-zoom-label {
    min-width: 3.25rem; text-align: center;
    font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977);
    font-variant-numeric: tabular-nums;
}
.wv-actions { display: flex; gap: .5rem; align-items: center; }
.wv-export { width: 13rem; }

.wv-section { margin-top: 0; }
.wv-stat { font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); }

.wv-empty { text-align: center; padding: var(--spacing-xl, 2rem) var(--spacing-md, 1rem); color: var(--text-muted, #626977); }
.wv-empty > i { font-size: 1.75rem; display: block; margin-bottom: .5rem; opacity: .6; }
.wv-empty > p { margin: 0; font-size: var(--text-sm, .875rem); }

/* 문서 영역 — 회색 바탕 위에 흰 종이 */
.wv-paper {
    max-height: 72vh;
    overflow: auto;
    background: #edeff2;
    border: 1px solid var(--border-color, #e5e8ed);
    border-radius: var(--radius-sm, 6px);
    padding: var(--spacing-md, 1rem);
}

/* docx-preview 가 만든 섹션(페이지)을 종이처럼 보이게 한다.
   라이브러리가 인라인 스타일로 폭·여백을 넣으므로 우리는 그림자와 배경만 얹는다. */
.wv-paper .wv-docx-wrapper > section,
.wv-paper section.wv-docx {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    margin: 0 auto var(--spacing-md, 1rem);
}
/* 표에 선이 없으면 읽기 어렵다. 문서에 테두리가 지정돼 있으면 그쪽이 이긴다. */
.wv-paper table { border-collapse: collapse; }
.wv-paper td, .wv-paper th { border: 1px solid #d0d4da; }
.wv-paper img { max-width: 100%; height: auto; }

.wv-alert { margin-top: var(--spacing-md, 1rem); }
.wv-progress {
    display: flex; align-items: center; gap: .5rem;
    font-size: var(--text-sm, .875rem); color: var(--text-muted, #626977);
}

@media (max-width: 768px) {
    .wv-toolbar { flex-direction: column; align-items: stretch; }
    .wv-actions { flex-direction: column; }
    .wv-export { width: 100%; }
    .wv-paper { padding: .5rem; }
}