/* 문서 칸 — 머리줄, PDF 쪽(PDF.js), 아직 열 수 없는 형식의 안내. */
.material { margin-top: 2px; }

.mat-head {
  position: sticky;
  top: var(--sticky-h);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.app[data-layout="max"] .mat-head { top: var(--now-h); }

.mat-title {
  min-width: 0;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mat-page {
  flex: 1;
  color: var(--sub);
  font-size: 12.5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.mat-zoom { display: inline-flex; gap: 4px; }

.mat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  min-width: 28px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font-size: 12.5px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.mat-btn:hover { background: var(--hover); }
.mat-btn.fit { min-width: 64px; font-variant-numeric: tabular-nums; }
.mat-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.mat-body { padding-top: 12px; }
.mat-note { margin: 12px 0; color: #b3261e; font-size: 13px; }

/* PDF 쪽들: 가운데 정렬로 위에서 아래로 쌓인다. 크기는 pdfview.js가 --pdf-w, --pdf-h로 정한다. */
.pdf-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.pdf-page {
  position: relative;
  flex: none;
  width: var(--pdf-w);
  height: var(--pdf-h);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 1px 4px rgba(0, 0, 0, 0.08);
  --user-unit: 1;
  --total-scale-factor: calc(var(--scale-factor, 1) * var(--user-unit));
  --scale-round-x: 1px;
  --scale-round-y: 1px;
}

.pdf-page canvas { display: block; width: 100%; height: 100%; }

/* 글자층(PDF.js TextLayer): 글자를 고르거나 브라우저 찾기로 찾을 수 있게 투명한 글자를 쪽 위에 겹친다.
   pdfjs-dist 6.3의 web/pdf_viewer.css에서 필요한 규칙만 옮겼다(중첩 문법은 풀어서 씀). */
.textLayer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  opacity: 1;
  line-height: 1;
  letter-spacing: normal;
  word-spacing: normal;
  text-align: initial;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  caret-color: CanvasText;
  --min-font-size: 1;
  --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
  --min-font-size-inv: calc(1 / var(--min-font-size));
}

.textLayer span,
.textLayer br {
  position: absolute;
  color: transparent;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
  -webkit-user-select: text;
  user-select: text;
}

.textLayer > :not(.markedContent),
.textLayer .markedContent span:not(.markedContent) {
  z-index: 1;
  --font-height: 0;
  font-size: calc(var(--text-scale-factor) * var(--font-height));
  --scale-x: 1;
  --rotate: 0deg;
  transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}

.textLayer .markedContent { display: contents; }
.textLayer span[role="img"] { cursor: default; -webkit-user-select: none; user-select: none; }
.textLayer ::selection { background: rgba(0, 0, 255, 0.25); color: transparent; }
.textLayer br::selection { background: transparent; }

.textLayer .endOfContent {
  position: absolute;
  inset: 100% 0 0;
  z-index: 0;
  display: block;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

.textLayer.selecting .endOfContent { top: 0; }

/* 머리줄의 종류 그림과 [닫기] */
.mat-icon { flex: none; width: 18px; height: 18px; color: var(--sub); }
.mat-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mat-close { width: 30px; justify-content: center; padding: 0; font-size: 18px; line-height: 1; }

/* 형식별 보기 — 텍스트, 사진, 워드, 엑셀, 파워포인트 */
.mat-loading { padding: 28px 16px; color: var(--sub); text-align: center; }

.doc-text {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.doc-cut { margin: 8px 2px; color: var(--sub); font-size: 12.5px; }
.doc-image { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 4px; }
.doc-docx .docx-wrapper { padding: 16px 16px 0; border-radius: var(--radius); background: #d9d8d4; }
.doc-docx .docx-wrapper > section.docx { margin-bottom: 16px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); }
.doc-xlsx { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.doc-xlsx .vue-office-excel { height: 100%; }
.doc-pptx { overflow: hidden; border-radius: var(--radius); }

/* 아직 이 자리에서 열 수 없는 형식 */
.mat-later { padding: 28px 16px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--sub); text-align: center; }

/* 좁은 화면(휴대폰 세로): 양옆 여백, 쪽은 폭 가득 */
.app[data-device="compact"] .material { padding: 0 10px; }
.app[data-device="compact"] .mat-head { gap: 6px; }
.app[data-device="compact"] .mat-btn { padding: 0 6px; }
.app[data-device="compact"] .mat-open span { display: none; }