/* 파일 변환기 · 뷰어
   토큰은 DESIGN.md 의 계약을 그대로 옮긴 것이다. 여기 없는 값은 쓰지 않는다.

   두 층으로 나뉜다.
   1) 껍데기 — 어두운 작업대. --bg 계열.
   2) 종이   — .doc 이하. 테마를 따르지 않는다. 이 픽셀이 그대로 PDF·PNG가 되므로
              어두운 색이 새어 들어가면 인쇄물이 못 쓰게 된다. */

:root {
  /* 1. Color: 껍데기 */
  --bg: #0d1014;
  --bg-2: #12161c;
  --panel: #171c23;
  --panel-2: #1c222b;
  --line: #272e38;
  --line-2: #1f252d;
  --fg: #e6eaf0;
  --muted: #99a3b0;
  --faint: #7b8492;

  /* 1. Color: 빛 */
  --beam: #4fd1e0;
  --beam-ink: #062229;
  --beam-soft: rgba(79, 209, 224, .12);
  --beam-edge: rgba(79, 209, 224, .38);

  /* 1. Color: 상태 */
  --ok: #3fbf87;
  --ok-soft: rgba(63, 191, 135, .12);
  --warn: #e0a93f;
  --warn-soft: rgba(224, 169, 63, .12);
  --danger: #f0736a;
  --danger-soft: rgba(240, 115, 106, .12);

  /* 1. Color: 종이 */
  --paper: #ffffff;
  --paper-ink: #14181d;
  --paper-line: #ccd3db;
  --paper-line-2: #e6eaee;
  --paper-faint: #6b737d;
  --paper-fill: #f2f4f7;
  --paper-link: #17458f;
  --paper-note: #f7ad3c;
  --paper-note-bg: #fdf6e8;
  --paper-note-ink: #6a5218;

  /* 2. Typography */
  --font-ui: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo",
             "Malgun Gothic", "Noto Sans KR", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "D2Coding", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --t-title-size: clamp(1.5rem, 3.2vw, 2rem);
  --t-lede-size: .9375rem;
  --t-h2-size: 1.0625rem;
  --t-h3-size: .875rem;
  --t-body-size: .875rem;
  --t-meta-size: .75rem;
  --t-micro-size: .6875rem;

  /* 3. Spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --page-max: 1240px;
  --gutter: 20px;

  /* 4. Components */
  --r-lg: 12px; --r-md: 8px; --r-sm: 6px; --r-pill: 999px;

  /* 5. Motion */
  --m-fast: 140ms ease;
  --m-base: 220ms cubic-bezier(.2, .8, .25, 1);

  /* 3. Spacing: 종이 (문서 조판 관습을 따르는 별도 사다리) */
  --p-hair: 2px; --p-rule: 3px; --p-tight: 5px; --p-space: 6px; --p-cell: 7px;
  --p-note: 9px; --p-para: 10px; --p-block: 14px; --p-section: 18px;

  /* 6. Depth */
  --e2: 0 1px 2px rgba(0, 0, 0, .36);
  --e3: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .45);
  --e4: 0 0 0 1px rgba(79, 209, 224, .32), 0 6px 20px rgba(79, 209, 224, .16);
}

@media (max-width: 640px) { :root { --gutter: 16px; } }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--t-body-size);
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

.wrap { max-width: var(--page-max); margin: 0 auto; padding-inline: var(--gutter); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--beam); outline-offset: 2px; border-radius: var(--r-sm); }

/* ── 1. 머리 ─────────────────────────────────────────────── */

.masthead { border-bottom: 1px solid var(--line); background: var(--bg-2); }
.masthead-in {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  padding-block: var(--s5) var(--s4);
}
.masthead h1 {
  margin: 0;
  font-size: var(--t-title-size);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.masthead h1 .dim { color: var(--faint); font-weight: 400; }
.lede {
  margin: var(--s2) 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: var(--t-lede-size);
}

.shield {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--ok-soft);
  color: var(--ok);
  font-size: var(--t-meta-size);
  font-weight: 600;
  line-height: 1.4;
}
.shield-dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; flex: none; }

/* ── 2. 작업대 ───────────────────────────────────────────── */

.bench {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  grid-template-areas: "rail stage" "dock dock";
  gap: var(--s4);
  padding-block: var(--s4) var(--s6);
  align-items: start;
}
.rail { grid-area: rail; }
.stage { grid-area: stage; }
.dock { grid-area: dock; }

@media (max-width: 900px) {
  .bench { grid-template-columns: minmax(0, 1fr); grid-template-areas: "rail" "stage" "dock"; }
}

.card {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--e2);
  overflow: hidden;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line-2);
  background: var(--panel-2);
}
.card-head h2 { margin: 0; font-size: var(--t-h3-size); font-weight: 700; }

.tally, .stage-meta, .dock-hint {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: var(--t-meta-size);
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 0;
}

/* 드롭존 */
.dropzone {
  margin: var(--s4);
  padding: var(--s5) var(--s4);
  border: 1.5px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--m-fast), background-color var(--m-fast), transform var(--m-fast);
}
.dropzone:hover { border-color: var(--beam-edge); background: var(--beam-soft); }
.dropzone.over { border-color: var(--beam); background: var(--beam-soft); transform: scale(1.012); }
.dz-icon { width: 26px; height: 26px; color: var(--beam); }
.dz-main { margin: var(--s2) 0 var(--s1); font-weight: 650; }
.dz-sub { margin: 0; color: var(--faint); font-size: var(--t-meta-size); }

.rail-empty {
  margin: 0;
  padding: 0 var(--s4) var(--s4);
  color: var(--faint);
  font-size: var(--t-meta-size);
}
.linkbtn {
  border: none;
  background: none;
  padding: 0;
  color: var(--beam);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.linkbtn:hover { color: var(--fg); }

/* 파일 목록 */
.filelist { list-style: none; margin: 0; padding: 0 var(--s4) var(--s4); }
.filelist:empty { padding: 0; }

.fileitem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s1) var(--s2);
  padding: var(--s3);
  margin-bottom: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
  cursor: pointer;
  transition: border-color var(--m-fast), background-color var(--m-fast);
}
.fileitem:hover { border-color: var(--beam-edge); }
.fileitem.active { border-color: var(--beam-edge); background: var(--beam-soft); }
.fileitem.failed { border-color: var(--danger); background: var(--danger-soft); }
.fileitem.blocked { opacity: .62; }

.fi-name {
  grid-column: 1;
  font-weight: 650;
  font-size: var(--t-body-size);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.fi-tools { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: flex-start; gap: var(--s1); }
.fi-sub {
  grid-column: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  color: var(--faint);
  font-size: var(--t-meta-size);
}
.fi-sub .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.bit { white-space: nowrap; }

.badge {
  display: inline-block;
  padding: 1px var(--s2);
  border-radius: var(--r-pill);
  font-size: var(--t-micro-size);
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.good { background: var(--beam-soft); color: var(--beam); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.err { background: var(--danger-soft); color: var(--danger); }

.iconbtn {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  color: var(--faint);
  font: inherit;
  font-size: var(--t-meta-size);
  line-height: 1;
  cursor: pointer;
  transition: color var(--m-fast), background-color var(--m-fast);
}
.iconbtn:hover:not(:disabled) { background: var(--panel-2); color: var(--fg); }
.iconbtn:active:not(:disabled) { color: var(--beam); }
.iconbtn:disabled { opacity: .3; cursor: default; }

.fi-range {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s1);
  color: var(--muted);
  font-size: var(--t-meta-size);
}
.fi-range input {
  flex: 1;
  min-width: 0;
  padding: var(--s1) var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--t-meta-size);
}
.fi-range input:focus-visible { border-color: var(--beam); }

.fi-note {
  grid-column: 1 / -1;
  margin-top: var(--s1);
  font-size: var(--t-meta-size);
  line-height: 1.55;
}
.fi-note.bad { color: var(--danger); }
.fi-note.warn { color: var(--warn); }

/* 무대 */
.stage-body {
  min-height: 440px;
  max-height: 74vh;
  overflow: auto;
  padding: var(--s4);
  background: var(--bg);
}
.stage-idle, .stage-busy, .stage-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  min-height: 400px;
  text-align: center;
  color: var(--faint);
  padding: var(--s4);
}
.idle-mark { width: 44px; height: 44px; color: var(--line); }
.stage-idle p, .stage-busy p, .stage-error p { margin: 0; max-width: 46ch; line-height: 1.7; }
.stage-error { color: var(--danger); }

.paper-flow { display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.paper-flow > .pdfpage, .paper-flow > .shot { box-shadow: var(--e3); max-width: 100%; }

/* 종이는 눌러서 좁히지 않는다. 폭을 줄이면 줄바꿈 위치가 달라져서, 미리보기가
   실제로 나올 결과와 다른 것을 보여주게 된다. 비율 그대로 축소해야 보이는 대로 나온다.
   .paper-fit 이 축소된 크기만큼 자리를 잡고, 안의 종이는 transform 으로 줄어든다. */
.paper-fit { position: relative; box-shadow: var(--e3); flex: none; }
.paper-fit > .doc { transform-origin: top left; }
.shot { background: var(--paper); padding: var(--s2); }
.shot img { display: block; max-width: 100%; height: auto; }
.pdfpage { display: block; background: var(--paper); max-width: 100%; height: auto; }
.flow-note { margin: 0; color: var(--faint); font-size: var(--t-meta-size); }

.spinner {
  width: 24px; height: 24px;
  border: 2px solid var(--line);
  border-top-color: var(--beam);
  border-radius: var(--r-pill);
  animation: spin 720ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 독 */
.targets { border: none; margin: 0; padding: var(--s4) var(--s4) 0; }
.chiprow { display: flex; flex-wrap: wrap; gap: var(--s2); }

.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: inline-block;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
  color: var(--muted);
  font-size: var(--t-meta-size);
  font-weight: 650;
  cursor: pointer;
  transition: border-color var(--m-fast), color var(--m-fast), background-color var(--m-fast);
}
.chip span:hover { border-color: var(--beam-edge); color: var(--fg); }
.chip input:checked + span {
  border-color: var(--beam);
  background: var(--beam-soft);
  color: var(--beam);
}
.chip input:focus-visible + span { outline: 2px solid var(--beam); outline-offset: 2px; }

.target-note {
  margin: var(--s3) 0 0;
  color: var(--muted);
  font-size: var(--t-meta-size);
  line-height: 1.6;
  max-width: 80ch;
}

.tune { margin: var(--s4) var(--s4) 0; border-top: 1px solid var(--line-2); padding-top: var(--s3); }
.tune summary {
  cursor: pointer;
  color: var(--muted);
  font-size: var(--t-meta-size);
  font-weight: 650;
  list-style-position: inside;
}
.tune summary:hover { color: var(--fg); }
.tune-grid { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); padding-top: var(--s3); }
.field { display: flex; align-items: center; gap: var(--s2); color: var(--muted); font-size: var(--t-meta-size); }
.field select {
  padding: var(--s1) var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel-2);
  color: var(--fg);
  font: inherit;
  font-size: var(--t-meta-size);
}
.field-check { cursor: pointer; }
.field-check input { accent-color: var(--beam); width: 14px; height: 14px; }

.actions { display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s4); }

.btn {
  padding: var(--s2) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel-2);
  color: var(--fg);
  font: inherit;
  font-size: var(--t-body-size);
  font-weight: 650;
  cursor: pointer;
  transition: border-color var(--m-fast), color var(--m-fast), background-color var(--m-fast), box-shadow var(--m-fast);
}
.btn:hover:not(:disabled) { border-color: var(--beam); color: var(--beam); }
.btn:active:not(:disabled) { background: var(--bg-2); }
.btn:disabled { opacity: .42; cursor: default; }

.btn-primary {
  border-color: var(--beam);
  background: var(--beam);
  color: var(--beam-ink);
  padding-inline: var(--s5);
}
.btn-primary:not(:disabled) { box-shadow: var(--e4); }
.btn-primary:hover:not(:disabled) { color: var(--beam-ink); filter: brightness(1.08); }
.btn-primary:disabled { box-shadow: none; }

.btn-quiet { border-color: transparent; background: none; color: var(--faint); }
.btn-quiet:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }

.progress { padding: 0 var(--s4) var(--s4); }
.progress-track { height: 4px; border-radius: var(--r-pill); background: var(--line-2); overflow: hidden; }
.progress-fill {
  height: 100%;
  background: var(--beam);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--m-base);
}
.progress-text { margin: var(--s2) 0 0; color: var(--muted); font-size: var(--t-meta-size); }

.results { display: flex; flex-direction: column; gap: var(--s2); padding: 0 var(--s4) var(--s4); }
.results:empty { padding: 0; }

.result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
  animation: rise var(--m-base) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.result.done { border-color: var(--ok); background: var(--ok-soft); }
.result.bad { border-color: var(--danger); background: var(--danger-soft); }
.result-main { min-width: 0; }
.result-name { font-weight: 650; overflow-wrap: anywhere; }
.result-sub { color: var(--muted); font-size: var(--t-meta-size); }
.result.bad .result-sub { color: var(--danger); }

.dl {
  flex: none;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--ok);
  border-radius: var(--r-md);
  background: var(--ok);
  color: var(--beam-ink);
  font: inherit;
  font-size: var(--t-meta-size);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--m-fast);
}
.dl:hover { filter: brightness(1.1); }
.dl.ghost { background: none; color: var(--ok); }

/* ── 3. 형식 표 ──────────────────────────────────────────── */

.band { border-top: 1px solid var(--line); padding-block: var(--s6); }
.band-alt { background: var(--bg-2); }
.band h2 { margin: 0 0 var(--s2); font-size: var(--t-h2-size); font-weight: 700; letter-spacing: -.01em; }
.band-lede { margin: 0 0 var(--s4); max-width: 78ch; color: var(--muted); }

.matrix { width: 100%; border-collapse: collapse; font-size: var(--t-meta-size); }
.matrix th, .matrix td {
  text-align: left;
  vertical-align: top;
  padding: var(--s2) var(--s3) var(--s2) 0;
  border-bottom: 1px solid var(--line-2);
}
.matrix thead th { color: var(--faint); font-weight: 650; border-bottom-color: var(--line); }
.matrix td:nth-child(1) { font-weight: 650; white-space: nowrap; }
.matrix td:nth-child(2) { font-family: var(--font-mono); color: var(--faint); }
.matrix td:nth-child(4) { color: var(--muted); line-height: 1.6; min-width: 22ch; }
.matrix tr.group-head td {
  padding-top: var(--s4);
  color: var(--faint);
  font-weight: 650;
  border-bottom-color: var(--line);
}

@media (max-width: 720px) {
  .matrix, .matrix tbody, .matrix tr, .matrix td { display: block; width: 100%; }
  .matrix thead { display: none; }
  .matrix tr { padding-block: var(--s2); border-bottom: 1px solid var(--line-2); }
  .matrix td { border: none; padding: 0; }
  .matrix td:nth-child(2) { margin-top: var(--s1); }
  .matrix td:nth-child(3) { margin-top: var(--s1); }
  .matrix td:nth-child(4) { margin-top: var(--s1); }
}

/* ── 4. 설명 ─────────────────────────────────────────────── */

.band details {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s2);
}
.band summary { cursor: pointer; font-weight: 650; }
.band summary:hover { color: var(--beam); }
.band details p { margin: var(--s3) 0 0; max-width: 78ch; color: var(--muted); line-height: 1.75; }
.band details b { color: var(--fg); font-weight: 650; }
kbd {
  font-family: var(--font-mono);
  font-size: var(--t-micro-size);
  padding: 1px var(--s2);
  border: solid var(--line);
  border-width: 1px 1px 2px;
  border-radius: var(--r-sm);
  background: var(--panel-2);
  color: var(--fg);
}

/* ── 5. 바닥 ─────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--line); padding-block: var(--s5) var(--s7); }
.foot p { margin: 0; color: var(--faint); font-size: var(--t-meta-size); }

/* ── 움직임 줄이기 ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .dropzone.over { transform: none; }
}

/* ═════════════════════════════════════════════════════════
   여기서부터 종이. 테마를 따르지 않는다.
   ═════════════════════════════════════════════════════════ */

.doc {
  background: var(--paper);
  color: var(--paper-ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.7;
  text-align: left;
}
.doc img { max-width: 100%; height: auto; }

.doc-plain {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--paper-ink);
}

.doc-code { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; }
.doc-code-row { display: flex; gap: 12px; }
.doc-code-num { flex: none; color: var(--paper-faint); text-align: right; user-select: none; white-space: pre; }
.doc-code-src { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--paper-ink); }

.doc-rich h1 { font-size: 26px; margin: 0 0 var(--p-block); line-height: 1.35; }
.doc-rich h2 { font-size: 21px; margin: var(--s5) 0 var(--p-para); line-height: 1.4; }
.doc-rich h3 { font-size: 17px; margin: 20px 0 8px; }
.doc-rich h4, .doc-rich h5, .doc-rich h6 { font-size: 15px; margin: var(--s4) 0 var(--p-space); }
.doc-rich p { margin: 0 0 var(--p-para); }
.doc-rich ul, .doc-rich ol { margin: 0 0 12px; padding-left: 24px; }
.doc-rich li { margin-bottom: 4px; }
.doc-rich blockquote {
  margin: 12px 0;
  padding: var(--s1) 0 var(--s1) var(--p-block);
  border-left: var(--p-rule) solid var(--paper-line);
  color: var(--paper-faint);
}
.doc-rich pre {
  background: var(--paper-fill);
  border: 1px solid var(--paper-line-2);
  border-radius: 6px;
  padding: var(--p-para) var(--s3);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.doc-rich code { font-family: var(--font-mono); font-size: .92em; }
.doc-rich hr { border: none; border-top: 1px solid var(--paper-line-2); margin: var(--p-section) 0; }
.doc-rich a { color: var(--paper-link); text-decoration: underline; }
.doc-muted { color: var(--paper-faint); }

.doc-table, .doc-rich table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--p-para) 0 var(--p-block);
  font-size: 13px;
  table-layout: fixed;
}
.doc-table th, .doc-table td, .doc-rich th, .doc-rich td {
  border: 1px solid var(--paper-line);
  padding: var(--s1) var(--p-cell);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.doc-table th, .doc-rich th { background: var(--paper-fill); font-weight: 700; }

.doc-notice {
  margin-top: var(--p-section);
  padding: var(--p-note) var(--s3);
  border-left: var(--p-rule) solid var(--paper-note);
  background: var(--paper-note-bg);
  color: var(--paper-note-ink);
  font-size: 12px;
  line-height: 1.6;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.sheet-section { margin-bottom: var(--p-section); }
.sheet-title {
  font-size: 15px;
  margin: 0 0 8px;
  padding-bottom: var(--p-tight);
  border-bottom: var(--p-hair) solid var(--paper-ink);
}
.zip-list { font-size: 12.5px; }
.zip-openable { font-weight: 650; color: var(--paper-link); cursor: pointer; text-decoration: underline; }

.pptx-slide-wrap { margin-bottom: 16px; }
.pptx-slide { position: relative; background: var(--paper); border: 1px solid var(--paper-line); overflow: hidden; }
.pptx-slide-no { margin-top: var(--p-tight); font-size: 11px; color: var(--paper-faint); text-align: right; }
.pptx-shape { overflow: hidden; }
.pptx-text { width: 100%; height: 100%; line-height: 1.32; }
.pptx-text p { margin: 0 0 var(--p-hair); }
.pptx-bullet { padding-left: var(--p-block); position: relative; }
.pptx-bullet::before { content: "•"; position: absolute; left: var(--p-hair); }
.pptx-img { display: block; }
.pptx-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.pptx-table td { border: 1px solid var(--paper-line); padding: var(--p-rule) var(--p-tight); vertical-align: middle; }

.hwpx-p { margin: 0 0 var(--p-hair); min-height: 1em; }
.hwpx-table { border-collapse: collapse; margin: var(--p-space) 0; font-size: 13px; width: 100%; table-layout: fixed; }
.hwpx-table td { border: 1px solid var(--paper-line); padding: var(--p-rule) var(--p-space); vertical-align: top; overflow-wrap: anywhere; }
.hwpx-img { display: block; max-width: 100%; margin: var(--p-space) 0; }
.hwpx-tab { display: inline-block; width: 32px; }

.odf-tab { display: inline-block; width: 32px; }
.odf-img { display: block; max-width: 100%; margin: 8px 0; }
.odf-table { border-collapse: collapse; width: 100%; margin: var(--p-para) 0; font-size: 13px; }
.odf-table td { border: 1px solid var(--paper-line); padding: var(--s1) var(--p-cell); vertical-align: top; }
.odf-slide {
  border: 1px solid var(--paper-line);
  border-radius: 4px;
  padding: 16px;
  margin-bottom: var(--p-block);
  min-height: 180px;
}
.odf-slide-no { font-size: 11px; color: var(--paper-faint); margin-bottom: var(--s2); }
.odf-textbox { margin-bottom: 8px; }
.odf-link { color: var(--paper-link); text-decoration: underline; }