/* 클린뷰어 웹 보기 — 밝은/어두운 화면 둘 다(§2-L) · 폰 너비에서 가로로 안 넘치게(§2-UI) · 누르는 자리 48px(§2-ACC) */
:root {
  --bg: #e9eaee; --card: #ffffff; --text: #1e293b; --sub: #475569; --muted: #64748b;
  --line: #e2e8f0; --line-strong: #64748b; /* 11-08 7 자체검사 — 옅은 단추 테두리(--line 은 바탕 #e9eaee 와 대비 약 1:1 이라 단추가 안 보였다 · 이건 3.9:1) */ --bar: #fcf8ff; --accent: #104dfd; --accent-text: #ffffff; --hl: rgba(255, 196, 0, .45); --link-text: #1d4ed8;
  --sc-skip-bg: var(--accent); --sc-skip-fg: var(--accent-text);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a; --card: #1e293b; --text: #e2e8f0; --sub: #cbd5e1; --muted: #94a3b8;
    --line: #334155; --bar: #111827; --accent: #6b95ff; --accent-text: #0f172a; --hl: rgba(255, 196, 0, .55); --link-text: #93b4ff;
  }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: var(--bg); color: var(--text); display: flex; flex-direction: column; line-height: 1.6; /* 한글 행간 — 안 적으면 영문 기준으로 빽빽(화면 글자 측정이 잡음) */
  word-break: keep-all; overflow-wrap: anywhere;
}
/* 11-10 일본어(장부 1110aa-2 · 회의 261110_일본어2차) — 한국어 글꼴이 앞이면 한자가 한국식 모양으로 나온다(같은 코드 점) · 일본어는 띄어쓰기가 없어 keep-all 이면 줄이 안 나뉜다 */
:lang(ja) body { font-family: -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif; word-break: normal; line-break: strict; }

a { color: var(--link-text); }
[hidden] { display: none !important; }

.bar, .search, .tools {
  display: flex; align-items: center; gap: 4px; padding: 4px 8px; background: var(--bar);
  border-bottom: 1px solid var(--line); min-height: 56px;
  flex-shrink: 0; /* 몸통이 세로로 늘어서 본문이 길면 막대가 56px 로 눌려 폰의 둘째 줄(파일 이름)이 반쯤 가려졌다(10-08 재서 찾음 · 운영도 같았다) */
}
.tools { border-bottom: 0; border-top: 1px solid var(--line); padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
/* 눌러서 막대 숨기기(10-11 · 폰) — 막대를 지우지 않고 화면 밖으로 민다(자판 Tab·낭독기로 오면 view.js 가 다시 보인다) · 본문은 그만큼 넓어진다 */
body.bars-hidden .bar, body.bars-hidden .tools { position: fixed; left: 0; right: 0; z-index: 40; transition: transform .2s ease; }
body.bars-hidden .bar { top: 0; transform: translateY(-110%); }
body.bars-hidden .tools { bottom: 0; transform: translateY(110%); }
body.bars-hidden .read-bar, body.bars-hidden .sum-bar { bottom: calc(8px + env(safe-area-inset-bottom)); } /* 진행 중인 띠는 막대가 비운 자리로 내려와 그대로 보인다 */
body.bars-hidden[data-reading] #autoBar, body.bars-hidden[data-reading] #richSelBar { bottom: calc(76px + env(safe-area-inset-bottom)); }
body.bars-hidden .toast { bottom: calc(12px + env(safe-area-inset-bottom)); }
body.bars-hidden .to-top { bottom: calc(16px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) { body.bars-hidden .bar, body.bars-hidden .tools { transition: none; } }
@media print { body.bars-hidden .bar, body.bars-hidden .tools { display: none; } }
.brand { font-weight: 800; font-size: 1rem; text-decoration: none; padding: 12px 8px; color: var(--text); white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 8px; }
.brand-mark { width: 22px; height: 22px; flex: none; } /* 정식 로고 그림(11-01 · scripts/make-icons.py 가 만듦) */ /* 파일 이름이 길어도 쪼개지지 않게(사진으로 발견) */
.name { font-size: 0.875rem; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.grow { flex: 1 1 auto; }
.count { font-size: 0.875rem; color: var(--sub); min-width: 48px; text-align: center; white-space: nowrap; }

button.icon {
  width: 48px; height: 48px; border: 0; background: transparent; color: var(--text); border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
}
button.icon:hover, button.icon:focus-visible { background: var(--line); } /* 테두리는 아래 :focus-visible 공통 규칙 — 전엔 지워서 옅은 바탕만 바뀌었다 */
.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 999px;
  background: var(--accent); color: var(--accent-text); font-weight: 700; font-size: 1rem; cursor: pointer; flex: none;
  border: 0; /* 11-04 — 채운 <button class="btn"> 33개에 브라우저 기본 입체 테두리가 그려졌다(사진 design-live-view-375-light 큰 열기 단추) · 테두리 있는 .btn.plain 은 아래 규칙이 이긴다 */
}
.btn { position: relative; }
.btn input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.btn:focus-within { outline: 3px solid var(--text); outline-offset: 2px; }

.search input {
  flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px; font-size: 1rem; /* 16px 미만이면 아이폰이 확대해 버린다 */
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text);
}

main { flex: 1 1 auto; overflow: auto; position: relative; }
.welcome { max-width: 640px; margin: 0 auto; padding: 32px 16px; }
.welcome h1 { font-size: 1.75rem; margin-bottom: 12px; }
.welcome p { font-size: 1rem; color: var(--sub); line-height: 1.7; margin-bottom: 12px; }
.welcome .promise { color: var(--text); }
.welcome .small { font-size: 0.9375rem; } /* 11-08 시안 A — 안내 글 15px(증명서 42348461846 바닥 위반 「360 폭 안내 글 12~13px」 · 전엔 14px) */
/* 보기 홈 탭 = 시안 A 「덜어내기」(11-08 · 약식 회의 261108_약식_보기첫화면시안 03_반영) — 제목 · 채운 「파일 열기」 하나 · 형식 한 줄 · 약속 · 샘플 · 「더 알아보기」 접힘 하나
   왼쪽 맞춤 · 간격은 4의 배수 · 색은 이 파일 :root 변수만(style.css 와 같은 이름) */
#tabHome { text-align: left; }
#tabHome h1 { margin-bottom: 24px; line-height: 1.3; }
/* 11-11 시안 G(약식 회의 261111_약식_보기화면90) — 제목·첫 행동·형식 줄을 옅은 대표색 판 하나로 · 첫 화면 / 의 판(--lp-tint #eef3ff)은 이 바탕(#e9eaee)에선 대비 1.08 이라 안 보여(반대 02 ⑦) 한 단계 진한 값
   폰은 화면 끝까지(.welcome 좌우 16 을 넘어) · 600px 넘으면 둥근 판 · 가장 큰 것은 제목 하나 — 약속은 판 밖 한 줄로 낮춤 */
:root { --home-tint: #dde7ff; }
/* 11-11 판 색은 앱의 다른 색(--text·--link-text)과 같은 규칙 하나로만 바꾼다 — data-theme 에도 따로 반응하게 했더니 판만 어두워지고 글자는 밝은 색으로 남아 대비 1.03(build-guard G1-contrast 실행 42873729553) */
@media (prefers-color-scheme: dark) { :root { --home-tint: #1b2a4d; --line-strong: #94a3b8; } }
#tabHome .home-hero { margin: -32px -16px 0; padding: 32px 16px 16px; background: var(--home-tint); }
@media (min-width: 600px) { #tabHome .home-hero { margin: 0; padding: 32px 24px 16px; border-radius: 16px; } }
#tabHome .home-hero h1 { margin-bottom: 20px; }
#tabHome .home-hero .open-formats { margin: 0; color: var(--text); }
#tabHome .home-hero .link-btn { padding: 0; text-align: left; } /* 글자 200% 에서 꺾인 줄이 가운데로 모였다(증명서 사진 42843670855) */
#tabHome .promise-text { flex: 1; min-width: 0; }
#tabHome .promise { display: flex; gap: 12px; align-items: flex-start; margin: 24px 0 0; font-size: 0.9375rem; color: var(--sub); }
#tabHome .promise-ico { flex: none; margin-top: 2px; color: var(--text); }
#tabHome .promise strong { display: block; font-weight: 400; color: var(--text); } /* 굵은 세 줄이 제목보다 무거워 보였다(사진 11-10) — 문장 글자는 그대로(D-25·D-30) */
#tabHome .home-from { margin: 24px 0 0; text-align: left; }
#tabHome .home-from summary { color: var(--text); font-weight: 600; }
#tabHome .home-from .from-pick { justify-content: flex-start; }
#tabHome .home-from .from-pick .btn { min-height: 44px; }
#tabHome .drop { margin: 24px 0 0; }
#tabHome .paste-hint { margin: 8px 0 0; }
.home-more { margin: 32px 0 0; border-top: 1px solid var(--line); }
.home-more > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 600; color: var(--text); cursor: pointer; list-style: none; }
.home-more > summary::-webkit-details-marker { display: none; }
/* 접힘인 것을 그림으로도(펼치면 뒤집힘) — 글자색 변수만 */
.home-more > summary::after { content: ""; flex: none; margin-left: auto; width: 20px; height: 20px; background: var(--sub); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.home-more[open] > summary::after { transform: rotate(180deg); }
.home-more > p, .home-more > details { margin: 8px 0 12px; }
.home-more .formats-more, .home-more .from-where { text-align: left; }
.home-more .from-pick, .home-more .sample-office { justify-content: flex-start; }
.home-more .sample-more { margin-top: 4px; }
/* 두 문서 글 비교(10-07) — 색만으로 말하지 않는다: 문단 이름표 + 줄 긋기(뺀 글)·밑줄(더한 글) */
.compare-entry { margin-top: 4px; }
.compare .cmp-head { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.compare .cmp-files { margin: 0; color: var(--sub); overflow-wrap: anywhere; }
.compare .cmp-sum { margin: 8px 0 0; font-weight: 700; color: var(--text); }
.compare .cmp-warn { margin: 8px 0 0; color: var(--text); }
.compare p { margin: 0 0 8px; overflow-wrap: anywhere; }
.compare .cmp-same { color: var(--sub); }
.compare .cmp-del, .compare .cmp-add, .compare .cmp-change { padding: 8px 12px; border-radius: 8px; border-left: 4px solid; color: var(--text); }
.compare .cmp-del { background: var(--cmp-del-bg); border-color: var(--cmp-del); }
.compare .cmp-add { background: var(--cmp-add-bg); border-color: var(--cmp-add); }
.compare .cmp-change { background: var(--card); border-color: var(--sub); border: 1px solid var(--line); border-left: 4px solid var(--sub); }
.compare .cmp-tag { display: inline-block; margin-right: 8px; padding: 0 8px; border-radius: 8px; font-size: .8125rem; font-weight: 700; background: var(--line); color: var(--text); }
.compare del { text-decoration: line-through; text-decoration-thickness: 2px; background: var(--cmp-del-bg); color: var(--text); }
.compare ins { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; background: var(--cmp-add-bg); color: var(--text); }
/* 바뀐 문단 속 낱말 — 「1」 지움과 「2」 더함이 붙어 「12,000만원」 으로 읽혔다(사진) → 작은 칸 + 사이에 화살표 */
.compare .cmp-change del, .compare .cmp-change ins { padding: 0 4px; border-radius: 8px; }
.compare .cmp-pair.keep { white-space: nowrap; }
.compare .cmp-arrow { margin: 0 4px; color: var(--sub); }
.compare .cmp-fold { margin: 0 0 8px; }
.compare .cmp-fold > summary { min-height: 44px; display: flex; align-items: center; color: var(--sub); cursor: pointer; }
:root { --cmp-del: #c62828; --cmp-del-bg: #fdecea; --cmp-add: #2e7d32; --cmp-add-bg: #e7f5e9; }
@media (prefers-color-scheme: dark) { :root { --cmp-del: #ef9a9a; --cmp-del-bg: #4a1f1f; --cmp-add: #a5d6a7; --cmp-add-bg: #1e3b22; } } /* 이 사이트는 기기 설정만 따른다(맨 위 :root 와 같게) */
/* 최근 연 문서(10-07) — 켠 사람만 · 줄 전체가 「열기」 · 휴지통은 따로(44px) */
.recent { margin: 24px 0 16px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.recent h2 { font-size: 1.25rem; margin-bottom: 8px; }
.recent-toggle { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--text); cursor: pointer; }
.recent-toggle input { width: 22px; height: 22px; flex: none; }
.recent-list { list-style: none; padding: 0; margin: 8px 0 0; }
.recent-list li { display: flex; align-items: center; gap: 4px; border-top: 1px solid var(--line); }
.recent-open { flex: 1 1 auto; min-width: 0; min-height: 56px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 4px; border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.recent-open:hover, .recent-open:focus-visible { background: var(--line); }
.recent-name { font-weight: 600; overflow-wrap: anywhere; }
/* 첫 쪽 미리보기 그림(PO-03) — 켰을 때만 · 48×64 · 둥글기 6 · 없으면 형식 이름 */
.recent-open.with-thumb { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; }
.recent-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.recent-thumb { flex: 0 0 48px; width: 48px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--card); display: flex; align-items: center; justify-content: center; }
.recent-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.recent-ext { font-size: .8125rem; font-weight: 700; color: var(--sub); }
.recent-meta { font-size: .875rem; color: var(--sub); font-variant-numeric: tabular-nums; }
.recent-del, .recent-star { flex: none; }
/* 경고 글자색(10-29 · 88 후보 1) — 화면 틀은 기기 설정(prefers-color-scheme)을 따르는데 채운 별은 문서 「어둡게」(body.dark)를 따라
   밝은 카드 위 옅은 노랑 · 어두운 카드 위 진한 주황이 나왔다 → 틀 색과 같은 조건으로 한 변수에 */
:root { --warn-ink: #b45309; } /* 흰 바탕 대비 5.0 */
@media (prefers-color-scheme: dark) { :root { --warn-ink: #fbbf24; } }
.recent-star[aria-pressed="true"] { color: var(--warn-ink); }
.drop {
  border: 2px dashed var(--muted); border-radius: 12px; padding: 40px 16px; text-align: center; color: var(--sub); /* 글자는 한 단계 진하게 — muted 는 이 바탕에서 3.96:1(대비 시험이 잡음) */
  margin: 16px 0; font-size: 1rem;
}
.drop.over, body.dragging .drop { border-color: var(--accent); color: var(--link-text); }

.status { max-width: 640px; margin: 0 auto; padding: 48px 16px; text-align: center; }
.status h2 { font-size: 1.25rem; margin-bottom: 8px; }
.status p { font-size: 1rem; color: var(--sub); line-height: 1.7; margin-bottom: 16px; }
/* 상태 틀(11-08 · 약식 회의 261108 시안 A·B 「빈·기다림·오류 같은 틀」) — 작은 그림 + 한 줄 + 단추 · 기다림(누를 것이 없는 상태)은 도는 그림 · 못 연 화면(#btnPickOther)은 느낌표 그림
   그림은 꾸밈이라 글자색 변수(--sub)로만 · 묻는 화면(단추·칸이 있는데 오류가 아닌 것 — 두 번째 문서 고르기·비밀번호)은 그림 없음(기다림으로 보이면 거짓 · §2-T) · 숫자는 그리지 않는다 */
.status:not(:has(button, input, a))::before, .status:has(#btnPickOther)::before {
  content: ""; display: block; width: 48px; height: 48px; margin: 0 auto 16px; background: var(--sub);
  -webkit-mask: var(--st-icon) center / contain no-repeat; mask: var(--st-icon) center / contain no-repeat;
}
.status { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9'/%3E%3C/svg%3E"); }
.status:has(#btnPickOther) { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5h.01'/%3E%3C/svg%3E"); }
.status:not(:has(button, input, a))::before { animation: cv-st-spin 1.2s linear infinite; }
@keyframes cv-st-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .status::before { animation: none !important; } }

.doc { padding: 8px 0 24px; }
.page { position: relative; margin: 0 auto 8px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.page canvas { display: block; width: 100%; height: 100%; }
/* PDF 여백 잘라 보기(10-11) — 쪽 상자는 쪽 전체 크기, 여백은 clip-path 로 가린다(view.js layout) · 가린 부분이 화면 밖으로 가로 넘침을 만들지 않게 */
#doc.crop-clip { overflow-x: clip; }
body.dark .page canvas, body.dark .img { filter: invert(1) hue-rotate(180deg); }
/* XPS 쪽(10-13 스물다섯째 ⑥) — PDF 쪽처럼 어두운 화면에선 뒤집어 어둡게(전엔 혼자 흰 종이라 눈부신 블록이었다) · 「종이는 원래 색」 토글이면 끈다 */
body.dark .xps-page { filter: invert(1) hue-rotate(180deg); }
.img { display: block; max-width: 100%; margin: 0 auto; }
/* 사진 상자 — 사진 크기에 꼭 맞게(글자 층이 사진 위에 정확히 얹히도록) */
.imgbox { position: relative; display: table; margin: 0 auto; }

/* PDF.js 글자 층 — 보이지 않지만 고르고 복사할 수 있다. 아래 .textLayer 규칙은 pdfjs-dist 6.3.289 web/pdf_viewer.css 에서
   그대로 옮긴 것(Apache-2.0) — 위치 계산이 이 규칙에 기대므로 손으로 바꾸지 않는다 */
.textLayer{
  color-scheme:only light;

  position:absolute;
  text-align:initial;
  inset:0;
  overflow:clip;
  opacity:1;
  line-height:1;
  letter-spacing:normal;
  word-spacing:normal;
  -webkit-text-size-adjust:none;
     -moz-text-size-adjust:none;
          text-size-adjust:none;
  forced-color-adjust:none;
  transform-origin:0 0;
  caret-color:CanvasText;
  z-index:0;

  &.highlighting{
    touch-action:none;
  }

  :is(span, br){
    color:transparent;
    position:absolute;
    white-space:pre;
    cursor:text;
    transform-origin:0% 0%;
    -webkit-user-select:text;
       -moz-user-select:text;
            user-select:text;
  }
  --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));

  > :not(.markedContent),
  .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));
  }

  .markedContent{
    display:contents;
  }

  span[role="img"]{
    -webkit-user-select:none;
       -moz-user-select:none;
            user-select:none;
    cursor:default;
  }

  .highlight{
    --highlight-bg-color:rgb(180 0 170 / 0.25);
    --highlight-selected-bg-color:rgb(0 100 0 / 0.25);
    --highlight-backdrop-filter:none;
    --highlight-selected-backdrop-filter:none;

    @media screen and (forced-colors: active){
      --highlight-bg-color:transparent;
      --highlight-selected-bg-color:transparent;
      --highlight-backdrop-filter:var(--hcm-highlight-filter);
      --highlight-selected-backdrop-filter:var(
        --hcm-highlight-selected-filter
      );
    }

    margin:-1px;
    padding:1px;
    background-color:var(--highlight-bg-color);
    backdrop-filter:var(--highlight-backdrop-filter);
    border-radius:8px;

    &.appended{
      position:initial;
    }

    &.begin{
      border-radius:8px 0 0 8px;
    }

    &.end{
      border-radius:0 8px 8px 0;
    }

    &.middle{
      border-radius:0;
    }

    &.selected{
      background-color:var(--highlight-selected-bg-color);
      backdrop-filter:var(--highlight-selected-backdrop-filter);
      scroll-margin-top:48px;
    }
  }

  ::-moz-selection{
    background:rgba(0 0 255 / 0.25);
    background:color-mix(in srgb, AccentColor, transparent 50%);
    color:transparent;
  }

  ::selection{
    background:rgba(0 0 255 / 0.25);
    background:color-mix(in srgb, AccentColor, transparent 50%);
    color:transparent;
  }

  &.selectionRendering{
    ::-moz-selection{
      background:transparent;
      color:transparent;
    }
    ::selection{
      background:transparent;
      color:transparent;
    }
  }
  br::-moz-selection{
    background:transparent;
  }
  br::selection{
    background:transparent;
  }

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

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

.textLayerImages{
  position:absolute;
  inset:0;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none;

  canvas{
    position:absolute;
    transform-origin:0% 0%;
  }
}
.textLayer ::selection { background: rgba(47, 107, 255, .35); }
/* 찾은 글자만 칠하는 표시 — <mark> 라서 PDF.js 의 span 위치 규칙을 타지 않고 조각 안에서 제자리에 흐른다 */
.textLayer mark.hl { background: var(--hl); color: transparent; border-radius: 8px; }

.textdoc {
  margin: 0 auto; max-width: 960px; padding: 12px 16px; background: var(--card); color: var(--text);
  font-family: ui-monospace, "D2Coding", Consolas, monospace; font-size: calc(0.875rem * var(--zoom, 1)); line-height: calc(1.6 * var(--lh, 1));
  white-space: pre-wrap; word-break: break-all;
}
.textdoc mark { background: var(--hl); color: inherit; }
/* JSON 색(10-13 스물다섯째 ⑬) — 이름·글·수·참거짓·null. 밝은·어두운 화면 둘 다 바탕(--card)과 대비가 넉넉하게(§2-L) */
.jsondoc .json-key { color: #0b5cad; font-weight: 600; }
.jsondoc .json-str { color: #1a7f37; }
.jsondoc .json-num { color: #9a3412; }
.jsondoc .json-bool { color: #8250df; }
.jsondoc .json-null { color: var(--sub); }
@media (prefers-color-scheme: dark) {
  :root .jsondoc .json-key { color: #79c0ff; }
  :root .jsondoc .json-str { color: #7ee787; }
  :root .jsondoc .json-num { color: #ffa657; }
  :root .jsondoc .json-bool { color: #d2a8ff; }
}

/* 한글(HWPX) — 글자·표·그림만. 쪽 모양은 옮기지 않는다(화면 위 안내에 적었다) */
.rich-notice {
  max-width: 800px; margin: 0 auto 8px; padding: 8px 16px; font-size: 0.875rem; color: var(--sub); line-height: 1.6;
}
.rich {
  max-width: 800px; margin: 0 auto; padding: 24px 16px; background: var(--card); color: var(--text);
  font-size: calc(1rem * var(--zoom, 1)); line-height: calc(1.7 * var(--lh, 1)); white-space: pre-wrap; tab-size: 4;
}
.rich p { min-height: 1em; }
.rich p.empty { min-height: .8em; }
.rich hr { border: 0; border-top: 1px dashed var(--line); margin: 24px 0; }
.rich-tblwrap { overflow-x: auto; margin: 8px 0; }
.rich-tbl { border-collapse: collapse; min-width: 50%; font-size: .875em; }
.rich-tbl td { border: 1px solid var(--muted); padding: 4px 8px; vertical-align: top; }
/* 큰 CSV — 2,000줄씩 쪽 넘기기. 쪽마다 머리줄을 다시 보인다 */
.csv-pager { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin: 8px 0; }
.csv-pager .btn { min-height: 44px; min-width: 64px; }
.csv-pager .btn:disabled { opacity: .4; cursor: default; } /* 누를 수 없는 쪽 — 누를 수 있는 단추처럼 보이지 않게(§2-T) */
/* 암호 걸어 저장(10-06) — 암호 칸 44px · 폰 폭 안에 */
#lockForm input[type=password] { font: inherit; font-size: 1rem; padding: 10px 12px; min-height: 44px; min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); }
/* 엑셀 정렬·거르기(10-06 · 보기만) — 단추 44px · 폰 폭에선 줄을 바꿔 들어간다 */
.sheet-tools { margin: 8px 0; }
.sheet-tools-toggle { min-height: 44px; }
.sheet-tools-panel { margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); display: grid; gap: 8px; }
.sheet-tools-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sheet-tools-row .btn { min-height: 44px; }
.sheet-tools-row .btn[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: -2px; font-weight: 700; }
.sheet-tools-field { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sheet-tools-field select, .sheet-tools-field input { min-height: 44px; min-width: 0; max-width: 100%; font: inherit; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); }
.sheet-tools-sum:empty { display: none; }
.sheet-tools-sum { color: var(--sub); font-size: .875rem; }
@media print { .sheet-tools { display: none; } }
.csv-range { color: var(--sub); font-size: .875rem; font-variant-numeric: tabular-nums; text-align: center; }
.rich-tbl tr.csv-head th { border: 1px solid var(--muted); padding: 4px 8px; background: var(--line); color: var(--sub); font-weight: 400; text-align: left; }
.rich-box { border-left: 3px solid var(--line); padding-left: 12px; margin: 8px 0; }
.rich-fig { margin: 8px 0; }
.rich-img { display: block; max-width: 100%; height: auto; background: var(--line); }
/* 한글 XML 그림 채운 도형·묶음 개체(10-19 O) — 크기는 원본 폭(px)·가로세로 비율 · 화면보다 넓으면 줄인다 · 묶음 안 그림은 묶음 크기 비율 자리에 */
.hml-shape { margin: 8px 0; max-width: 100%; width: fit-content; }
.hml-shape > .hml-fill, .hml-group { max-width: 100%; }
.hml-group { position: relative; overflow: hidden; }
.hml-group > .hml-part { position: absolute; margin: 0; }
.hml-gpic .rich-img { width: 100%; height: 100%; object-fit: fill; }
.hml-fill-miss { background: var(--line); outline: 1px dashed var(--muted); }
/* 떠 있는 그림(옛 워드·RTF · 10-18) — 원본처럼 왼쪽·오른쪽에 띄우고 글이 둘레로 흐른다. 글 폭이 그림의 두 배가 안 되면 docshare.watchFloats 가 띄우지 않는다(한 줄 차지) */
.rich-fig.rich-float-l { float: left; clear: left; max-width: 50%; margin: 4px 16px 8px 0; }
.rich-fig.rich-float-r { float: right; clear: right; max-width: 50%; margin: 4px 0 8px 16px; }
.rich-floatend { clear: both; }
/* 떠 있는 글상자 안 글(옛 워드·RTF · 10-18) — 걸린 문단 자리에 테두리 상자로 */
.rich-txbx { display: block; border: 1px solid var(--muted); border-radius: 8px; padding: 8px 12px; margin: 8px 0; overflow-wrap: anywhere; }
/* 원본 자리·크기(10-18) — 글 폭이 원본 상자 폭의 두 배 이상이면 원본 비율 폭(--bw) · 감싸기면 왼쪽·오른쪽에 띄운다(docshare.textBox·watchFloats). 높이는 글에 맞춰 늘어난다 */
.rich-txbx.rich-txbx-sized { width: var(--bw); max-width: 100%; }
.rich-txbx.rich-txbx-sized[data-align="r"] { margin-left: auto; }
.rich-txbx.rich-float-l { float: left; clear: left; max-width: 50%; margin: 4px 16px 8px 0; }
.rich-txbx.rich-float-r { float: right; clear: right; max-width: 50%; margin: 4px 0 8px 16px; }
.rich-txbx > p { margin: 0 0 4px; }
.rich-txbx > p:last-child { margin-bottom: 0; }
/* 각주 같은 짧은 문서 안 링크(10-12 스물셋째 ⑱) — 글·줄 간격은 그대로 두고 보이지 않는 누를 자리를 사방 14px 넓힌다(「[1]」 18×21 → 46×49 · 줄 높이에 안 셈).
   이웃 링크와 겹치면 view.js fitJumpHits 가 그쪽 변만 둘 사이 가운데까지로 줄인다(--jl·--jr·--jt·--jb) · 빈 쪽은 그대로 넓다 */
.rich a.rich-jump-small { position: relative; }
.rich a.rich-jump-small::before { content: ''; position: absolute; left: calc(-1 * var(--jl, 14px)); right: calc(-1 * var(--jr, 14px)); top: calc(-1 * var(--jt, 14px)); bottom: calc(-1 * var(--jb, 14px)); }
@media print { .rich a.rich-jump-small::before { content: none; } }
body.dark .rich-img { filter: invert(1) hue-rotate(180deg); }
/* 어두운 화면의 비친 그림(10-12 스물셋째 ⑥) — 바탕이 비친 PNG·SVG·로고·서명은 검은 선이 어두운 바탕(#0f172a)에 묻혀 안 보였다.
   view.js markClear 가 비친 곳이 있는 그림에만 img-clear 를 붙이고, 어두운 화면일 때만 흰 받침을 깐다(불투명 사진엔 안 붙어 테두리가 안 생긴다).
   그림 색은 그대로 — 「어둡게」 로 뒤집을 땐 받침도 같이 뒤집혀 검정 위 흰 선이 된다(밝은 화면에서 뒤집어도 선이 보인다) */
@media (prefers-color-scheme: dark) { img.img.img-clear, img.rich-img.img-clear { background: #fff; } }
body.dark img.img.img-clear, body.dark img.rich-img.img-clear { background: #fff; }
/* 한글 도형(선·사각형·타원…) — 그림처럼 폭에 맞춰 줄고, 어두운 화면에선 검은 선이 보이게 뒤집는다 */
.rich-shape { display: block; max-width: 100%; height: auto; }
body.dark .rich-shape { filter: invert(1) hue-rotate(180deg); }
/* 11-08 F01(쪽지 a0qtmg) — 「어둡게」 를 눌러도 워드·엑셀 본문(.rich)은 화면 색(--card 흰색)이라 밝은 그대로였다(PDF 만 뒤집힘 · 안내는 「문서 색도 뒤집었어요」).
   PDF 와 같게: 흰 종이·짙은 글로 맞춘 뒤 통째로 뒤집는다(기기 테마가 어두워도 결과가 같게) · 안의 그림·도형은 본문과 함께 뒤집히므로 따로 또 뒤집지 않는다 · 「종이는 원래 색」 이면 그대로 */
/* 11-08 F03(쪽지 a0qtmg) — 홈(아래 탭이 있는 첫 화면)에선 머리 줄의 문서 몫(파일 이름·남은 시간·목차·첨부·메모·읽어 주기·검색)을 숨긴다 · 「앞으로」 로 문서에 돌아오면 그대로 다시 보인다 */
body.has-tabs :is(#docName, #readLeft, #btnToc, #btnAtt, #btnNotes, #btnRead, #btnSearch, #searchBar) { display: none !important; }
body.dark:not(.paper-keep) .rich { background: #fff; color: #1e293b; filter: invert(1) hue-rotate(180deg); }
body.dark:not(.paper-keep) .rich .rich-img, body.dark:not(.paper-keep) .rich .rich-shape { filter: none; }
/* 글이 든 그림(흐름도·제목 그림) — 그림 위에 글을 원래 자리대로. 원래 크기를 넘지 않고, 좁으면 85% 까지만 줄인 뒤 가로로 굴린다(표와 같이) */
.rich-diagwrap { overflow-x: auto; margin: 8px 0; }
.rich-diagram { position: relative; container-type: inline-size; white-space: normal; line-height: 1.25;
  width: calc(min(var(--nw), max(100%, var(--nw) * .85)) * var(--zoom, 1)); }
.rich-diagram > svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.diag-text { position: absolute; display: flex; flex-direction: column; box-sizing: border-box; overflow-wrap: anywhere; }
.diag-text p { min-height: 0; margin: 0; }
.diag-text .rich-fig, .diag-text .rich-tblwrap { margin: 4px 0; }
.rich-caption { color: var(--sub); font-size: .875em; margin: 0 0 8px; }
/* 입력 칸·목록 상자(한글 양식 개체) — 적힌 값을 칸 모양으로 */
.rich-field { display: inline-block; min-width: 4em; min-height: 1.4em; border: 1px solid var(--muted); border-radius: 8px; padding: 0 8px; margin: 0 4px; vertical-align: middle; }
.rich-combo::after { content: "\25BE"; color: var(--sub); margin-left: 8px; float: right; }
.rich-compose { border: 1px solid var(--muted); border-radius: 50%; padding: 0 4px; margin: 0 0; }
.rich-note { color: var(--muted); font-size: 0.875rem; }
/* 메일 — 머리(보낸 사람·날짜) · 첨부 목록(이름 · 크기 · 열기 · 저장) · 압축 목록도 같은 모양 */
.eml-subject { font-size: 1.25rem; margin: 8px 0; overflow-wrap: anywhere; }
.eml-head { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 16px; color: var(--sub); font-size: .875rem; }
.eml-head dt { font-weight: 700; } .eml-head dd { margin: 0; overflow-wrap: anywhere; }
.eml-reply { display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 16px; text-decoration: none; } /* 답장 메일 쓰기(10-08) */
@media print { .eml-reply { display: none !important; } }
.eml-body { border-top: 1px solid var(--line); padding-top: 12px; }
/* 꾸민 메일 본문(10-12 · eml.js) — 모양대로 / 「글만 보기」 · 안내 줄 */
.eml-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.eml-mode .eml-modesay { flex: 1 1 200px; min-width: 0; margin: 0; }
.eml-mode .btn { min-height: 44px; font-size: .9375rem; }
.eml-html .rich-tblwrap { margin: 8px 0; }
.eml-attach { list-style: none; padding: 0; margin: 8px 0; }
.eml-attach li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; border-bottom: 1px solid var(--line); }
.eml-attach-name { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; } .eml-attach-size { color: var(--sub); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.eml-attach .btn { min-height: 48px; } /* 누를 칸 48px · 크기 글 15px(11-07 · 전엔 44px·14px) */
.eml-attach-btns { display: inline-flex; gap: 8px; margin-left: auto; }
/* 압축 목록 폴더(11-07 · 사장님 화면 지적) — 위치 줄 · 「폴더: …」 한 줄 · 폴더가 둘 넘으면 폴더마다 머리(누르면 접고 폄) · 줄에는 파일 이름만 */
.zip-where, .zip-folder-one { color: var(--sub); font-size: .9375rem; margin: 0 0 8px; overflow-wrap: anywhere; }
.zip-folder-one { color: var(--text); font-weight: 600; }
.zip-folder-head { font-size: 1rem; margin: 12px 0 0; }
.zip-folder { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 4px 8px 4px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.zip-folder:hover { background: var(--line); }
.zip-folder::before { content: ""; flex: none; width: .5em; height: .5em; margin: 0 .35em 0 .25em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.zip-folder[aria-expanded="false"]::before { transform: rotate(-45deg); }
.zip-folder-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.zip-folder-count { flex: none; color: var(--sub); font-size: .9375rem; font-weight: 400; }
.zip-folder-head + .eml-attach { margin-top: 0; padding-left: 12px; }
@media (prefers-reduced-motion: no-preference) { .zip-folder::before { transition: transform .15s; } }
#btnBack { min-height: 44px; margin: 0 0 8px; }
.rich-readonly { -webkit-user-select: none; user-select: none; } /* 배포용(읽기만) — 고르기·복사를 막는다 */
.rich mark.hl { background: var(--hl); color: inherit; }
.rich .hlBlock { background: var(--hl); }
#btnRetry { margin-top: 8px; border: 0; }
.rich-hf { display: flow-root; color: var(--sub); font-size: .875em; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 16px; } /* flow-root — 머리말 안 띄운 글상자가 본문으로 흘러 나가지 않게(10-18) */
.rich-footer { border-bottom: 0; border-top: 1px solid var(--line); padding: 8px 0 0; margin: 16px 0 0; }
.rich-noteref { font-size: .75em; vertical-align: super; text-decoration: none; padding: 0 4px; }
.rich-notes { margin-top: 24px; padding: 12px 0 0 24px; border-top: 1px solid var(--line); font-size: .875em; color: var(--sub); }
/* 문서 끝 각주 모음(10-13 ⑥) — 「각주」 제목 · 번호가 칸 밖으로 밀리지 않게(발표자 메모 칸 규칙 .rich-notes 가 왼쪽 여백을 0 으로 만든다) */
.rich-notes-title { font-size: 1rem; margin: 24px 0 4px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--sub); }
.rich ol.rich-notes { margin: 0; padding: 0 0 0 2em; border: 0; border-radius: 0; background: none; }
.rich ol.rich-notes > li { margin: 0 0 8px; }
.rich-textart { font-weight: 700; font-size: 1.25em; }
.rich-btn { display: inline-block; border: 1px solid var(--muted); border-radius: 8px; padding: 0 8px; margin: 0 4px; font-size: .9em; }
.rich rt { font-size: .75em; color: var(--sub); }
.rich-num { color: var(--sub); }
#engineBar { width: min(320px, 100%); height: 12px; accent-color: var(--accent); }
.status .small { font-size: 0.875rem; }

/* 폰에서 찾기 칸에 글을 쓰는 동안 아래 도구줄을 숨긴다 — 글자판이 화면 절반을 가져가므로 한 줄이라도 문서에 준다(§2-KB) */
@media (pointer: coarse) { body:has(#q:focus) .tools { display: none; } }

/* 엑셀 — 열 글자·행 번호 · 숫자는 오른쪽 · 시트 이름 */
.rich-sheetname, .rich-slidenum { font-size: 1.25rem; margin: 8px 0 12px; }
.rich-slidenum { color: var(--sub); font-size: 0.875rem; }
.rich-slidetitle { font-weight: 700; font-size: 1.25em; }
/* HTML·전자책(10-11) — 제목은 찾기 단위(p)로 만들고 크기만 · 표 머리 칸 · 코드 덩어리는 폰 폭에서 꺾는다 */
.rich-h { font-weight: 700; margin: .6em 0 .3em; }
/* 문서 글자 비율은 docfont.css 로(11-04) */
.rich-tbl td.rich-th { font-weight: 700; background: var(--line); }
/* 일정·연락처 카드(10-11) */
.pim-actions { max-width: 800px; margin: 0 auto 8px; padding: 0 16px; }
.pim-card { border: 1px solid var(--line); border-radius: 8px; padding: 8px 16px 12px; margin: 12px 0; background: var(--card); color: var(--text); white-space: normal; }
.pim-row { margin: 4px 0; overflow-wrap: anywhere; }
.pim-label { color: var(--sub); }
.pim-title { margin-top: 4px; }
.rich ul:not(.eml-attach), .rich ol { padding-left: 1.5em; } /* 맨 위 「* { padding: 0 }」 에 목록 점이 화면 밖으로 나갔다 */
.rich-pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, "D2Coding", Consolas, monospace; font-size: .875em; }
.rich-sheet th { background: var(--line); color: var(--sub); font-weight: 400; font-size: .875em; padding: 4px 8px; border: 1px solid var(--muted); position: sticky; top: 0; }
.rich-sheet th.rich-rowhead { position: sticky; left: 0; text-align: right; white-space: nowrap; } /* 줄 번호가 「1/3」 처럼 꺾이지 않게(10-08 사진) */
.rich-sheet td { white-space: pre-wrap; }
.rich-num-cell { text-align: right; font-variant-numeric: tabular-nums; }

/* 인쇄 · PDF로 저장 — 스크롤 칸을 풀어 문서 전체가, 어두운 화면이어도 종이에는 밝게 */
@media print {
  :root { --bg: #fff; --card: #fff; --text: #000; --sub: #333; --muted: #555; --line: #ccc; --link-text: #000; }
  html, body { height: auto; display: block; background: #fff; }
  .bar, .search, .tools, .rich-notice, .sc-skip-link, .welcome, .status, .csv-pager { display: none !important; }
  /* 배포용(읽기만) 문서 — 브라우저 메뉴로 인쇄해도 본문 대신 안내만 */
  body[data-noprint] main { display: none !important; }
  body[data-noprint]::after { content: "배포용 문서라 인쇄는 막아 두었어요."; display: block; padding: 24px; font-size: 1rem; }
  main { overflow: visible; }
  .doc { padding: 0; }
  .page { box-shadow: none; margin: 0 auto; break-after: page; }
  .page:last-child { break-after: auto; }
  body.dark .page canvas, body.dark .img, body.dark .rich-img, body.dark .rich-shape, body.dark .xps-page { filter: none; }
  body.dark .rich { filter: none !important; background: #fff; color: #1e293b; } /* 종이에는 원래 색(11-08 F01) */
  .page.print-skip { display: none !important; } /* 인쇄할 쪽 범위(10-13 ⑭) — 고른 쪽만 종이에 */
  .rich, .textdoc { max-width: none; padding: 0; }
  .rich-tblwrap { overflow: visible; }
  .rich-sheet th { position: static; }
}

/* PDF 링크 칸 — 글자 층 위에 겹친다(글자는 그대로 보이고, 링크 자리만 누를 수 있다) */
.linkLayer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* PDF 신청서 칸 — 칸 자리에 얹는 입력 칸(글자는 늘 검정 · 쪽은 밝은 종이라서) */
.formLayer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pdf-field { position: absolute; box-sizing: border-box; pointer-events: auto; margin: 0; padding: 0 4px; border: 1px solid rgba(47, 107, 255, .55); border-radius: 8px; background: rgba(47, 107, 255, .07); color: #000; font-family: inherit; line-height: 1.2; resize: none; }
.pdf-field:focus { outline: 2px solid var(--accent); outline-offset: 0; background: #fff; }
:root { --paper-accent: #1d4ed8; } /* 신청서 칸 표시색 — 쪽은 어두운 화면에서도 밝은 종이라 두 갈래 모두 같은 진한 파랑(흰 종이 대비 6.7:1) */
@media (prefers-color-scheme: dark) { :root { --paper-accent: #1d4ed8; } } /* 일부러 같게 둠 — 위 까닭 */
input.pdf-field[type="checkbox"], input.pdf-field[type="radio"] { accent-color: var(--paper-accent); padding: 0; }
body.dark .pdf-field { background: rgba(255, 255, 255, .85); }
@media print { .pdf-field { border-color: transparent; background: transparent; } .form-bar { display: none; } }
.linkLayer a { position: absolute; display: block; pointer-events: auto; border-radius: 8px; }
.linkLayer a:hover { background: rgba(47, 107, 255, .12); }
.linkLayer a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 암호 입력 */
.pw { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 8px; }
.pw label { font-size: 1rem; }
.pw input { height: 48px; min-width: 0; width: min(240px, 100%); padding: 0 12px; font-size: 1rem; border: 1px solid var(--muted); border-radius: 12px; background: var(--card); color: var(--text); }
.pw .btn { border: 0; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--muted); }
.status .err { color: #b91c1c; font-weight: 700; }
@media (prefers-color-scheme: dark) { :root .status .err { color: #fca5a5; } }
@media print { .linkLayer { display: none; } }

/* 목차 창 */
/* 저장하기(10-07) — 글·표·사진 꺼내기 */
#expList { padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.exp-note { color: var(--sub); }
/* 이름 바꿔 저장(10-09) — 이름 칸 + 그대로인 확장자 + 저장 · 16px(아이폰 확대 막기) · 좁은 폰에서 넘치지 않게 칸이 줄어든다 */
.exp-rename { display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; }
.exp-rename[hidden] { display: none; }
.exp-rename input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px; font-size: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); }
.exp-rename .exp-ext { flex: none; color: var(--sub); }
.exp-rename .btn { flex: none; }
/* 글꼴 고르기(10-09) — 고르면 문서가 정한 글꼴보다 이긴다(고른 사람의 뜻) · 「문서 그대로」 면 손대지 않는다 · 표·수식 그림은 그대로 */
html[data-font="sans"] { --doc-font: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
html[data-font="serif"] { --doc-font: "Noto Serif KR", "AppleMyungjo", "Batang", "Nanum Myeongjo", serif; }
html[data-font] .textdoc, html[data-font] .reflow, html[data-font] .rich, html[data-font] .rich :where(p, li, span, td, th, h1, h2, h3, h4, h5, h6, div) { font-family: var(--doc-font) !important; }
/* 글 줄 간격(10-09) — 넓게 고르면 문서가 문단마다 정한 줄 간격보다 이 값이 이긴다(고른 사람의 뜻) · 보통이면 문서 그대로 */
html[data-lh] .rich p, html[data-lh] .rich li { line-height: calc(1.7 * var(--lh, 1)) !important; }
.line-gap-row { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
/* 글자 방식(10-09) — 글 문서 위 작은 줄 · 인쇄엔 없음 */
.enc-row { max-width: 960px; margin: 0 auto; padding: 8px 16px 0; color: var(--sub); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.enc-row select { min-height: 44px; font-size: 1rem; padding: 0 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); }
@media print { .enc-row { display: none; } }
/* PO-06(11-01) 글 고치기 — 전체 화면 · 저장 단추는 위(글자판이 올라와도 안 가림 · §2-KB) */
/* 제자리 고치기(11-12 · 회의 261112_원본그대로고치기) — 보던 글 칸 자리에 같은 모양의 입력 칸 · 막대는 스크롤해도 위에(글자판이 아래를 먹으니 아래 고정 안 함 · §2-KB) */
.inplace-bar { position: sticky; top: 0; z-index: 6; display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; padding: 8px 12px; background: var(--card); border: 1px solid var(--line-strong); border-radius: 12px; }
.inplace-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inplace-row .btn { min-height: 44px; }
.inplace-row #inplaceSave { margin-left: auto; }
.inplace-info { margin: 0; color: var(--sub); }
.inplace-text { display: block; width: 100%; box-sizing: border-box; min-height: 40vh; margin: 0; font: inherit; line-height: 1.6; color: var(--text); background: var(--card); border: 1px dashed var(--line-strong); border-radius: 8px; outline-offset: 2px; resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
.inplace-text.mono { font-family: ui-monospace, "D2Coding", Consolas, monospace; }
.inplace-text.nowrap { white-space: pre; overflow-x: auto; overflow-wrap: normal; }
@media print { .inplace-bar { display: none; } }
/* 워드 제자리(11-12 · fixinplace.js) — 누른 문단만 입력 칸 · 고친 문단 점선 밑줄 · 못 고치는 곳은 눌렀을 때만 이유 한 줄 */
.rich [data-cv-p] { cursor: text; }
/* 종이 색 따라가는 표시 색(11-12 88 후보 12) — 「어둡게」 는 종이를 흰색으로 두고 통째로 뒤집는데, 기기 어두운 색(#6b95ff·#cbd5e1)을 그대로 쓰면
   흰 종이 위 대비 2.85·1.5 라 점선·이유 글이 안 보였다 → 종이가 흰색일 땐 밝은 쪽 값(흰 바탕 대비 6.0·7.6) */
.rich { --inplace-mark: var(--accent); --inplace-sub: var(--sub); }
body.dark .rich { --inplace-mark: #104dfd; --inplace-sub: #475569; }
.rich .inplace-on { outline: 2px dashed var(--inplace-mark); outline-offset: 2px; border-radius: 4px; }
.rich .inplace-done { text-decoration: underline dashed var(--inplace-mark); text-underline-offset: 4px; }
.rich .inplace-why { display: block; margin-top: 4px; font-size: calc(.875rem * var(--zoom, 1)); color: var(--inplace-sub); text-decoration: none; } /* 글자 키우면 이유 글도 같이(88 후보 12) */
body[data-inplace] .rich [data-cv-p]:focus-visible { outline: 2px solid var(--inplace-mark); outline-offset: 2px; border-radius: 4px; } /* 키보드로 옮겨 온 문단(88 후보 13) */
.inplace-list { max-width: 560px; padding: 16px; border-radius: 12px; }
.inplace-list h2 { margin: 0 0 4px; font-size: 1.25rem; }
.inplace-bar .btn:disabled, .inplace-list .btn:disabled { opacity: .45; cursor: default; } /* 누를 수 없는 저장 — 누를 수 있는 단추처럼 보이지 않게(§2-T · 11-12 사진)  */
body[data-inplace] #btnFixText, body[data-inplace] #btnTextEdit { display: none; } /* 고치는 동안 입구 단추는 숨김(같은 일을 두 번 시작하지 않게) */
.inplace-diff { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.inplace-jump { display: block; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; } /* 항목을 누르면 그 문단으로(D-23) */
.inplace-diff li { padding: 8px; border: 1px solid var(--line-strong); border-radius: 8px; overflow-wrap: anywhere; }
.inplace-diff ins, .inplace-diff del { white-space: pre-wrap; } /* 엔터로 나눈 새 문단이 목록에서도 줄로 보이게(1112ab-2) */
.inplace-diff del { color: var(--sub); }
.inplace-diff ins { text-decoration: none; font-weight: 700; }
.inplace-ok { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.inplace-ok input { width: 22px; height: 22px; }
/* 줄 바꿈 끄기(10-12 스물셋째 ⑫) — 글 칸 안에서만 가로로 구른다(화면 전체는 안 넘친다) · 인쇄는 늘 접는다(종이 밖으로 나가지 않게) */
.enc-row .btn-mini { margin-left: auto; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; cursor: pointer; white-space: nowrap; }
.textdoc.nowrap { white-space: pre; word-break: normal; overflow-wrap: normal; overflow-x: auto; }
@media print { .textdoc.nowrap { white-space: pre-wrap; word-break: break-all; overflow: visible; } }
.line-gap-row select { min-height: 44px; font-size: 1rem; padding: 0 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); }
/* 최근 문서 분류(10-09) — 「전체 · 학교 · 회사」 고르기(누른 것은 채운 색) · 줄의 분류 단추·입력칸 */
.recent-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.recent-tags[hidden] { display: none; }
.recent-tags button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; cursor: pointer; }
.recent-tags button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.recent-tagedit { display: flex; gap: 8px; align-items: center; flex: 1 1 100%; }
.recent-tagedit input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px; font-size: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); }
/* 문서 정보(10-09) — 이름표 | 값 두 칸 · 긴 값은 줄바꿈 */
.exp-info { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0 4px 8px; padding: 12px 12px; border-radius: 12px; background: var(--line); }
.exp-info[hidden] { display: none; }
.exp-info dt { color: var(--sub); }
.exp-info dd { margin: 0; overflow-wrap: anywhere; color: var(--text); }
/* 글자 수(10-09) — 센 값을 버튼 바로 아래에 · 숫자 자리 고정 */
.exp-count { margin: 0 4px 8px; padding: 12px 12px; border-radius: 12px; background: var(--line); color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.6; }
.exp-item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 56px; padding: 12px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.exp-item[hidden] { display: none; }
.exp-item:hover, .exp-item:focus-visible { background: var(--line); }
.exp-name { font-weight: 700; }
.exp-desc { font-size: .875rem; color: var(--sub); }
#privacyChange { display: block; color: var(--text); } /* 처리방침 바뀜 알림(11-12 · 장부 1112ah-1) — 설명 줄 아래 한 줄 · 본문 색 */
#privacyChange[hidden] { display: none; }
.exp-note { margin: 4px 0; padding: 12px; border-radius: 12px; background: var(--line); color: var(--text); font-size: .9375rem; line-height: 1.5; } /* 숨긴 단추 자리의 이유(D-03) · 15px */
.exp-note[hidden] { display: none; }
#tocDialog, #attDialog, #expDialog, #contactDialog, #hitDialog { margin: auto; /* 맨 위 「* { margin: 0 }」 이 창을 가운데로 보내는 기본 여백까지 지워 왼쪽 위에 붙었다(사진으로 발견) */ border: 0; border-radius: 12px; padding: 0; width: min(560px, calc(100% - 32px)); max-height: min(80vh, 720px); background: var(--card); color: var(--text); }
#tocDialog::backdrop, #attDialog::backdrop, #expDialog::backdrop, #contactDialog::backdrop, #hitDialog::backdrop { background: rgba(0, 0, 0, .45); }
.toc-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--card); }
.toc-head h2 { font-size: 1.25rem; }
#tocList { padding: 8px 8px 16px; }
#attList { padding: 8px 16px 16px; } .att-note { color: var(--sub); }
#tocList ul { list-style: none; }
#tocList ul ul { padding-left: 16px; }
.toc-item { display: flex; align-items: center; width: 100%; min-height: 48px; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 1rem; text-align: left; cursor: pointer; text-decoration: none; }
.toc-item:hover, .toc-item:focus-visible { background: var(--line); }
.toc-item.toc-here { box-shadow: inset 4px 0 0 var(--accent); font-weight: 700; }
.toc-item.toc-here::after { content: '지금 읽는 곳'; margin-left: auto; padding-left: 8px; font-size: .8125rem; font-weight: 400; color: var(--sub); white-space: nowrap; }
/* 아래 도구줄 — 단추가 늘어도 폰 폭에서 넘치지 않게 쪽 표시 글자가 줄어든다 */
#pageLabel { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tools .grow { flex: 1 1 0; min-width: 0; }
@media print { #tocDialog, #attDialog, #expDialog, #contactDialog, #hitDialog, .sheet { display: none; } }
/* 찾은 곳 목록(10-09) — 자리 이름 + 앞뒤 글 · 찾은 말은 굵게 */
#hitList { list-style: none; padding: 8px 8px 16px; }
#hitList .toc-item { flex-direction: column; align-items: flex-start; gap: 2px; }
.hit-where { font-size: .8125rem; color: var(--sub); }
.hit-text { overflow-wrap: anywhere; } .hit-text b { background: #fde68a; color: #1b1b1b; font-weight: 700; } /* 어둡게여도 노란 바탕엔 짙은 글자 */
.hit-more { padding: 8px 12px; color: var(--sub); font-size: .875rem; }
/* 도움말 · 쪽 이동 창 — 목차 창과 같은 모양 */
.sheet { margin: auto; border: 0; border-radius: 12px; padding: 0; width: min(480px, calc(100% - 32px)); max-height: min(80vh, 720px); background: var(--card); color: var(--text); }
.sheet::backdrop { background: rgba(0, 0, 0, .45); }
.help-body { padding: 16px; }
.photo-bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; margin: -16px -16px 8px; padding: 4px 8px; background: var(--card); border-bottom: 1px solid var(--line); }
.photo-bar .btn { min-height: 44px; }
/* 글자 200% 에서 「다 됐어요」 가 창 오른쪽 밖 87px(창 34곳 시험 qa-1107-dialogs ① · 42348686322) — .btn 이 flex:none 이라 줄지 않았다
   → 위 막대 단추는 줄고 글자가 단추 안에서 줄을 바꾼다 · 가운데 「n/N」 은 남는 자리 */
.photo-bar .btn { flex: 0 1 auto; min-width: 0; white-space: normal; text-align: center; justify-content: center; }
.photo-bar .photo-pos { flex: 1 1 auto; min-width: 0; text-align: center; }
.photo-pos { flex: 1; text-align: center; font-variant-numeric: tabular-nums; color: var(--sub); }
.help-body h2 { font-size: 1.25rem; margin-bottom: 12px; }
.help-body h3 { font-size: 1rem; margin: 12px 0 4px; }
/* 도움말 질문 바로가기(10-28 QA CU-05) */
.help-qs { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 8px; }
.help-qs a { color: var(--link-text); min-height: 44px; display: inline-flex; align-items: center; }
.help-formats summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; color: var(--link-text); }
.help-body p { font-size: 1rem; line-height: 1.6; }
.help-links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
/* 단축키 목록(10-11) — 키 | 하는 일 두 칸 · 좁은 폰에선 키 아래에 설명 */
.key-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 12px; margin: 4px 0 8px; font-size: .9375rem; }
.key-list dd { margin: 0; color: var(--sub); overflow-wrap: anywhere; }
@media (max-width: 420px) { .key-list { grid-template-columns: minmax(0, 1fr); gap: 0; } .key-list dd { margin-bottom: 8px; } }
kbd { display: inline-block; min-width: 1.6em; padding: 0 4px; border: 1px solid var(--muted); border-bottom-width: 2px; border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-size: .8125rem; line-height: 1.5; text-align: center; }
#helpKeys:focus { outline: none; }
.help-links a { color: var(--link-text); min-height: 44px; display: inline-flex; align-items: center; }
.help-body label { display: grid; gap: 8px; font-size: 1rem; }
.help-body label.stamp-row, .help-body label.toggle-row { display: flex; align-items: center; gap: 12px; min-height: 44px; } /* 쪽 번호·표시 켜기(10-07) · 보기 설정(10-08) — 체크 상자와 글이 한 줄 */
.help-body label.stamp-row input, .help-body label.toggle-row input { width: 22px; height: 22px; flex: none; }
.help-body fieldset.stamp-pick { border: 0; margin: 8px 0 0; padding: 0; } /* 제출용 문구 자리·진하기(10-31 · AC-P03) */
.help-body fieldset.stamp-pick legend { padding: 0; font-weight: 600; }
.help-body input[type=number], .help-body input[type=text], .help-body input[type=password] { min-height: 44px; font: inherit; font-size: 1rem; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); }
/* 소리 내어 읽기 — 아래 도구 막대 바로 위에 떠 있는 띠 · 읽는 문단은 테두리로 */
.read-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 30; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; width: max-content; max-width: calc(100% - 16px); padding: 8px 12px; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); }
.read-bar[hidden] { display: none; }
/* 한글·워드 형광펜·메모(10-09) — 칠한 칸 · 메모 꼬리표 · 고른 글 띠(읽기 띠와 같은 자리 — 둘이 함께면 이 띠가 위로) */
mark.user-hl { color: inherit; border-radius: 8px; cursor: pointer; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.hl-memo { position: relative; display: inline-flex; align-items: center; min-height: 28px; margin: 0 4px; padding: 0 8px; border-radius: 12px; border: 1px solid var(--accent); background: var(--card); color: var(--link-text); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; vertical-align: middle; }
.hl-memo::before { content: ''; position: absolute; inset: -8px -6px; } /* 글줄 높이는 그대로 · 누르는 범위만 44px */
@media print { .hl-memo { border: 0; background: none; color: #333; } .hl-memo::after { content: ' — ' attr(data-memo); font-weight: 400; } }
.rich-sel-bar input { min-width: 0; flex: 1 1 12em; height: 44px; padding: 0 12px; font-size: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); }
body[data-reading] #richSelBar { bottom: calc(132px + env(safe-area-inset-bottom)); }
/* 자동 넘김 띠(10-09) — 소리 읽기 띠와 함께 뜨면 한 칸 위로(겹치지 않게) */
body[data-reading] #autoBar { bottom: calc(132px + env(safe-area-inset-bottom)); }
.read-bar #readMsg { font-size: 0.875rem; }
.reading { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
@media print { .read-bar { display: none; } .reading { outline: 0; } }
/* 앱 안에서 열림 — 이름·「파일 열기」·도움말은 앱 위 막대가 맡는다(두 번 보이지 않게) */
.in-app .brand, .in-app .name, .in-app #btnOpen, .in-app #btnHelp { display: none; }
/* PDF 합치기 목록 — 차례 번호 · 「위로」·「빼기」 는 누르는 자리 44px */
.merge-list { margin: 12px 0 0 1.4em; display: grid; gap: 8px; }
.merge-list li { overflow-wrap: anywhere; }
.merge-list .btn-mini { min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; cursor: pointer; }
/* 목록에서 뺀 뒤 6초 되돌리기 줄(11-02 · removeWithUndo) — 모달 창 안이라 알림 띠 대신 목록 아래 */
.undo-line { display: flex; align-items: center; gap: 12px; margin: 8px 0 0; font-size: .9375rem; color: var(--text); }
.undo-line .btn-mini { min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.merge-list .btn-mini:disabled { opacity: .45; cursor: default; }
/* 쪽 순서·빼기 — 쪽마다 작은 그림 · 쪽이 많으면 목록만 굴린다(저장 단추는 늘 보이게) · 뺀 쪽은 흐리게(되살리기는 또렷하게) */
/*   창을 위아래로 나눠 목록만 굴린다 — 375×740 폰에서 목록이 창을 다 차지해 저장 단추가 화면 밖으로 밀렸다(qa-1010 에서 잡음) */
#orderDialog[open] { display: flex; }
#orderForm { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#orderForm > p, #orderForm > details, #orderForm > h2 { flex: none; }
#orderForm .goto-actions { margin-top: 8px; }
#orderForm input[type=text] { font: inherit; font-size: 1rem; padding: 10px 12px; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); }
.order-sum { margin-top: 4px; font-variant-numeric: tabular-nums; }
.order-list { flex: 1 1 auto; min-height: 180px; overflow: auto; overscroll-behavior: contain; margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.order-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.order-thumb { width: 40px; height: auto; max-height: 56px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.order-body { display: grid; gap: 4px; min-width: 0; }
.order-label { font-variant-numeric: tabular-nums; }
.order-btns { display: flex; gap: 8px; }
.order-btns .btn-mini { min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; cursor: pointer; white-space: nowrap; }
.order-btns .btn-mini:disabled { opacity: .45; cursor: default; }
.order-typed { margin-top: 8px; }
.order-typed summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--accent, inherit); }
.order-typed summary::before { content: '▸'; margin-right: 8px; }
.order-typed[open] summary::before { content: '▾'; }
#orderForm .goto-actions { flex-wrap: wrap; }
.order-out .order-thumb { opacity: .45; }
.order-out .order-label { color: var(--sub); text-decoration: line-through; } /* 11-02 — 글자는 흐리게(.45 · 밝은 화면 약 2.7:1) 말고 보조색(6:1 넘음)+줄 긋기로 「빠진 장」 을 보인다(55 §2-L) */
.order-out .order-label { text-decoration: line-through; }

/* 사진으로 PDF — 목록엔 작은 미리보기(단추는 11-04 부터 「찍기」 탭) */
/* 샘플 문서(10-12 스물셋째 ⑬) — 끌어다 놓기 칸 바로 아래 · 단추 아래 한 줄 안내 */
.sample-entry { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* 11-08 시안 A — 한글 샘플 먼저 · 둘 나란히(좁으면 줄 바꿈) · 써 보기 안내·오피스 샘플은 「더 알아보기」 안 */
.sample-entry .small { font-size: .9375rem; color: var(--sub); }
/* 첫 행동 먼저(10-28 QA CU-01) — 큰 열기 단추가 제목 바로 아래 · 채운 단추는 이것 하나(샘플 등은 plain) · 형식 목록은 접어 둔다 */
.open-first { margin: 0 0 12px; }
.big-open { display: flex; width: 100%; justify-content: center; text-align: center; min-height: 56px; padding: 12px 16px; border-radius: 16px; font-size: 1.0625rem; } /* 11-08 시안 A — 폭 가득 채운 단추 하나(화면당 채운 단추 하나) */
/* 첫 화면에서는 채운 단추를 본문 하나로(§2-UI 채운 색은 화면당 하나) — 머리의 「파일 열기」 는 문서를 연 뒤에 다시 채운 색 */
/* 11-08 7 자체검사 — 빈·오류·여는 중(상태 칸)에서도 낮춘다(증명서 42396031339 「채운 단추 2개」 · 회의 261108_7자체검사) · 상태 칸이 닫히면 저절로 원래대로 */
body:has(#welcome:not([hidden])) #btnOpen, body:has(.cmp-recover) #btnOpen, body:has(#status:not([hidden])) #btnOpen { background: transparent; color: var(--text); border: 1px solid var(--line-strong); }
/* 11-08 시안 A — 홈 탭에선 머리의 「파일 열기」 를 숨긴다(같은 이름 단추가 한 화면에 둘 → 하나 · 본문 큰 단추가 같은 #file 을 연다) · 다른 탭·문서 화면에선 그대로
   숨긴 칸(#file)을 click() 으로 여는 것은 앱 안(.in-app #btnOpen 숨김)과 #compareFile·#photoFile 이 이미 쓰는 길 */
body:has(#welcome:not([hidden]) #tabHome:not([hidden])) #btnOpen { display: none; }
/* 11-08 7 자체검사 — 여는 동안은 파일 고르기 칸이 잠긴다(view.js setOpening) · 눌리는 척하지 않게 흐리게 */
body.opening-file #btnOpen { opacity: .5; cursor: default; }
.formats-more { margin: 8px 0; text-align: center; }
.formats-more summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; color: var(--link-text); }
.formats-more p { text-align: left; color: var(--sub); }
.from-where { margin: 8px 0; text-align: center; }
.from-where summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; color: var(--link-text); }
.from-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin-top: 4px; }
.from-pick .btn[aria-pressed="true"] { outline: 2px solid var(--accent); }
.from-tip { margin-top: 8px; color: var(--sub); }
.in-app .from-where { display: none; }
.sample-office { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; font-size: .9375rem; color: var(--sub); }
.photo-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.photo-list img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.photo-list .pthumb-none { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; text-align: center; font-size: .8125rem; line-height: 1.2; color: var(--sub); border: 1px dashed var(--line); border-radius: 8px; }
.photo-list .pname { flex: 1 1 120px; min-width: 0; overflow-wrap: anywhere; }
/* 스캔 화면(10-26) — 작은 그림은 만들어질 모습이라 조금 크게 · 장 상태(가장자리 찾음/못 찾음)는 이름 아래 한 줄 */
.photo-list img { width: 64px; height: 64px; object-fit: contain; }
.photo-list .pstate { display: block; font-size: 0.875rem; color: var(--sub); }
/* 한 장씩 크게 보기(11-03 · 약식 검토 261101_약식_찍기배치 차례 2·3 · 앱 ScanScreen 과 같게) — 폰 폭에서 JS 가 .one 을 붙인다(판정 한 곳: view.js photoOneQ)
   목록이 옆으로 한 장씩 넘어간다(좌우로 밀기 = 가로 굴리기 · 한 장에 맞춰 멈춤) · 그림은 크게 · 단추는 그 장 아래 */
.photo-list.one { display: flex; gap: 0; margin: 12px 0 0; padding: 0; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.photo-list.one::-webkit-scrollbar { display: none; }
.photo-list.one li { flex: 0 0 100%; min-width: 0; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always; padding: 0 4px; justify-content: center; }
.photo-list.one img, .photo-list.one .pthumb-none { width: 100%; height: min(48vh, 420px); object-fit: contain; }
.photo-list.one .pname { flex: 1 1 100%; text-align: center; }
.photo-nav { display: flex; gap: 8px; margin: 8px 0 0; }
.photo-nav[hidden] { display: none; }
.photo-nav .btn { flex: 1 1 0; min-height: 44px; }
.photo-strip { display: flex; gap: 8px; margin: 8px 0 0; overflow-x: auto; padding: 4px; }
.photo-strip[hidden] { display: none; }
.photo-chip { position: relative; flex: 0 0 auto; width: 56px; height: 56px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #333; font: inherit; cursor: pointer; overflow: hidden; }
.photo-chip[aria-current="true"] { border: 3px solid var(--accent); }
.photo-chip img { width: 100%; height: 100%; object-fit: contain; display: block; }
.photo-chip .chip-mark { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .8); color: #fff; font-size: .8125rem; line-height: 1.3; text-align: center; }
.photo-chip .chip-n { position: absolute; top: 0; left: 0; min-width: 18px; background: rgba(255, 255, 255, .9); color: #111; font-size: .8125rem; line-height: 1.3; text-align: center; border-bottom-right-radius: 8px; }
/* 띠 끌어 놓기(11-03) — 끄는 작은 그림은 손가락을 따라가고 위로 뜬다 · 놓을 자리는 옆 작은 그림의 강조색 세로줄(색만이 아니라 자리로도 보인다) · 끄는 동안 글 고르기·그림 끌기 막음 */
.photo-chip { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.photo-chip img { -webkit-user-drag: none; pointer-events: none; }
.photo-chip.dragging { z-index: 2; opacity: .85; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); cursor: grabbing; }
.photo-chip.drop-before { box-shadow: -5px 0 0 var(--accent); }
.photo-chip.drop-after { box-shadow: 5px 0 0 var(--accent); }
.photo-strip.dragging { scroll-snap-type: none; }
.photo-strip-hint { margin: 4px 0 0; color: var(--sub); }
.photo-strip-hint[hidden] { display: none; }
/* 큰 그림 위 모서리 손잡이(11-03 · 명세 141줄) — 폰 폭 한 장 그림 자리 · 캔버스 위 밀기는 손잡이 끌기(장 넘기기 아님) · 단추 44px */
.edge-inline { flex: 1 1 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.edge-inline[hidden] { display: none; }
#edgeInCanvas { max-width: 100%; height: auto; touch-action: none; border-radius: 8px; background: #fff; }
#edgeInCanvas:focus-visible { outline: 3px solid var(--accent, #2f6bff); outline-offset: 2px; }
.edge-in-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0; }
.edge-in-btns .btn { min-height: 44px; }
.photo-list .plook { min-height: 44px; font: inherit; font-size: 0.9375rem; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); } /* 장마다 보정(10-31 · CS-04) */
.edge-wrap { display: flex; justify-content: center; }
#edgeCanvas { max-width: 100%; height: auto; touch-action: none; border-radius: 8px; background: #fff; }
#edgeCanvas:focus-visible { outline: 3px solid var(--accent, #2f6bff); outline-offset: 2px; }
/* 모서리 점 단추로 옮기기(10-26 · 접근성) — 점 고르기 넷 · 화살표 넷 · 누르는 자리 44px */
.edge-nudge { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.edge-nudge .btn-mini { min-width: 44px; min-height: 44px; }
.edge-pick [aria-pressed="true"] { outline: 2px solid var(--accent, #2f6bff); font-weight: 700; }
.photo-name { width: 100%; min-height: 44px; font-size: 1rem; box-sizing: border-box; }
label.check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
label.check input { width: 20px; height: 20px; }
/* 글만 크게 보기 — 쪽 모양은 숨기고 글을 폰 폭에 맞춰 흘린다 */
body.reflowing #doc > .page { display: none; }
.reflow { max-width: 760px; margin: 0 auto; padding: 8px 16px 48px; background: var(--card); color: var(--text); font-size: calc(1.25rem * var(--rf, 1)); line-height: calc(1.75 * var(--lh, 1)); }
.reflow p { margin: 0 0 .9em; overflow-wrap: anywhere; }
/* 문서 글자 비율은 docfont.css 로(11-04) */
.reflow .rf-page { text-align: center; color: var(--sub); font-size: .8em; margin: 1.6em 0 1em; }
@media print { .reflow-bar { display: none; } }
/* 문서 속 날짜 — 띠 · 목록(지난 날짜는 흐리게 + 글로 표시) */
.date-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.date-bar p { margin: 0 !important; }
.date-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.date-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.date-list .dwhen { font-weight: 700; }
.date-list .dwhat { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; color: var(--sub); }
.date-list li.past { color: var(--sub); } /* 11-02 — 흐리게(.72 · 약 3.8:1) 말고 보조색으로(55 §2-L) */
.date-list .btn-mini { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; cursor: pointer; }
@media print { .date-bar { display: none; } }
/* 형광펜·메모 — 화면에 겹치는 칠과 쪽지(저장하면 PDF 표준 주석으로 들어간다) */
.markLayer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.markLayer .hlMark { position: absolute; background: rgba(255, 212, 0, .42); mix-blend-mode: multiply; border-radius: 8px; }
/* 밑줄·취소선(10-13 스물다섯째 ⑯) — 가로 선 · 화면에선 테마 글자색(저장은 검정 잉크) */
.markLayer .uMark, .markLayer .sMark { position: absolute; height: 2px; background: var(--text); }
/* 형광펜 색(10-09) — 44px 동그라미 넷 · 고른 것은 굵은 테두리 */
.hl-colors { display: inline-flex; gap: 4px; vertical-align: middle; }
.hl-chip { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; padding: 0; }
.hl-chip[aria-pressed="true"] { border: 4px solid var(--text); }
/* 펜 색·굵기(10-13 스물다섯째 ⑪) — 형광펜 색과 같은 모양 · 고른 색·굵기는 테두리 */
.pen-opts { display: inline-flex; gap: 4px; vertical-align: middle; flex-wrap: wrap; align-items: center; }
.pen-chip { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; padding: 0; }
.pen-chip[aria-pressed="true"] { border: 4px solid var(--text); }
.pen-w[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: -2px; font-weight: 700; }
body.erase-mode .page { cursor: crosshair; }
.markLayer img { position: absolute; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.memo-text { width: 100%; margin-top: 8px; padding: 8px; font: inherit; font-size: 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); resize: vertical; }
body.memo-placing .page { cursor: crosshair; outline: 2px dashed var(--accent); outline-offset: -2px; }
@media print { .mark-bar { display: none; } }
.edit-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; margin-top: 8px; }
.edit-choices .btn { flex: 1 1 140px; }
/* 손보기 묶음 제목(10-28 QA CU-03) — 진한 단추 대신 묶음으로 고르게 */
.edit-group { margin-top: 16px; font-size: .875rem; color: var(--sub); font-weight: 700; }
.exp-group { margin: 12px 0 4px; font-size: .875rem; color: var(--sub); font-weight: 700; }
/* 비교 실패 곁의 다음 길(10-28 QA CU-06) */
.cmp-recover { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cmp-recover .btn { min-height: 44px; max-width: 100%; overflow-wrap: anywhere; }
.link-btn { background: none; border: 0; padding: 0 4px; min-height: 44px; color: var(--link-text); text-decoration: underline; font: inherit; cursor: pointer; }
.exp-edit-link { margin-top: 12px; }
/* 서명 칸 — 손가락으로 그릴 때 화면이 굴러가지 않게 · 밝은 종이 위에 짙은 파랑(어두운 보기에서도 종이는 밝다) */
.sig-pad { display: block; width: 100%; height: 180px; margin-top: 12px; background: #fff; border: 1px dashed var(--line); border-radius: 8px; touch-action: none; cursor: crosshair; }
.sigLayer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.sigLayer svg { position: absolute; }
body.sig-placing .page { cursor: crosshair; outline: 2px dashed var(--accent); outline-offset: -2px; }
@media print { .sign-bar { display: none; } }
/* 글자·✓·도장 넣기(10-12) — 쪽 위에 그대로(쪽지와 달리 그림자 없이) · 놓을 차례면 쪽 테두리 */
.markLayer img.fillPut { box-shadow: none; }
/* 메모 옮기기·고치기(10-13 스물다섯째 ⑤) — 붙인 쪽지를 끌거나 눌러 고친다 · 고른 것은 테두리 */
.markLayer img.memoMark { pointer-events: auto; touch-action: none; cursor: move; }
body.memo-placing .markLayer img.memoMark, body.pen-mode .markLayer img.memoMark { pointer-events: none; }
.markLayer img.memoMark:focus-visible, .markLayer img.memoMark.memo-sel { outline: 2px solid var(--accent); outline-offset: 2px; }
body.fill-placing .page { cursor: crosshair; outline: 2px dashed var(--accent); outline-offset: -2px; }
/* 넣은 것 옮기기·크기(10-13) — 넣은 서명·글자·도장은 누를 수 있다(끌면 옮김) · 고르면 테두리와 네 귀 손잡이(누를 자리 44px · 보이는 점 14px) */
.markLayer img.fillPut, .sigLayer svg.sigInk { pointer-events: auto; touch-action: none; cursor: move; }
.sigLayer svg.sigInk { pointer-events: bounding-box; }
body.fill-placing .markLayer img.fillPut, body.sig-placing .sigLayer svg.sigInk, body.pen-mode .markLayer img.fillPut, body.pen-mode .sigLayer svg.sigInk, body.redact-mode .markLayer img.fillPut, body.memo-placing .markLayer img.fillPut { pointer-events: none; }
.markLayer img.fillPut:focus-visible, .sigLayer svg.sigInk:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.put-sel-layer { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.put-sel { position: absolute; box-sizing: border-box; outline: 2px solid var(--accent); outline-offset: 1px; background: rgba(37, 99, 235, .06); pointer-events: auto; touch-action: none; cursor: move; }
.put-sel:focus-visible { outline-width: 3px; }
.put-h { position: absolute; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; pointer-events: auto; touch-action: none; cursor: nwse-resize; }
.put-h[data-c="tr"], .put-h[data-c="bl"] { cursor: nesw-resize; }
.put-h[data-c="tr"]::after, .put-h[data-c="br"]::after { left: 4px; }
.put-h[data-c="bl"]::after, .put-h[data-c="br"]::after { top: 4px; }
.put-h::after { content: ''; position: absolute; left: 24px; top: 24px; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.put-h:focus-visible { outline: 3px solid var(--accent); outline-offset: -6px; border-radius: 50%; }
@media print { .put-sel-layer { display: none; } }
.text-put { width: 100%; min-height: 44px; margin-top: 8px; padding: 8px; font: inherit; font-size: 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); }
.text-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.text-quick .btn { min-height: 44px; }
@media print { .fill-bar { display: none; } }
/* 가리고 저장(10-12) — 검은 네모 · 켜 있는 동안 손가락은 그리기(화면이 안 굴러간다 · 펜과 같다) · 사진도 같은 모양 */
.markLayer .redactBox, .img-redact .redactBox { position: absolute; background: #000; }
.markLayer .redactStroke, .img-redact .redactStroke { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } /* 칠하기(10-31 · CS-08) */
.redactStroke polyline { fill: none; stroke: #000; stroke-linecap: round; stroke-linejoin: round; }
.img-redact .mosaicBox { position: absolute; background: repeating-conic-gradient(#555 0 25%, #999 0 50%) 0 0 / 12px 12px; outline: 2px solid #000; } /* 모자이크(10-31 · CS-08) — 저장 전 표시 */
body.redact-mode .page { touch-action: none; cursor: crosshair; }
body.redact-mode .page > *:not(.markLayer) { pointer-events: none; }
.img-redact { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.imgbox.redacting { touch-action: none; cursor: crosshair; }
.imgbox.redacting > * { pointer-events: none; }
.img-redact-bar { max-width: 640px; margin: 0 8px 8px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.img-redact-bar p { flex: 1 1 100%; margin: 0; line-height: 1.6; }
.img-redact-bar .btn { min-height: 44px; }
@media (min-width: 656px) { .img-redact-bar { margin: 0 auto 8px; } }
@media print { .redact-bar, .img-redact-bar { display: none !important; } }
/* 사진 자르기(10-13) — 남길 네모 밖은 어둡게 · 네 귀 손잡이는 네모 안쪽 귀에(누를 자리 44px · 사진 밖으로 삐지지 않게) · 켜 있는 동안 손가락은 자르기(화면이 안 굴러간다) */
.img-crop { position: absolute; inset: 0; z-index: 5; overflow: hidden; touch-action: none; cursor: crosshair; }
.imgbox.cropping { touch-action: none; }
.crop-box { position: absolute; box-sizing: border-box; border: 2px solid #fff; outline: 1px solid rgba(0, 0, 0, .6); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5); cursor: move; touch-action: none; }
.crop-box:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; }
.crop-h { position: absolute; width: 44px; height: 44px; padding: 0; margin: 0; border: 0; background: transparent; touch-action: none; cursor: nwse-resize; }
.crop-h[data-c="tl"] { left: 0; top: 0; } .crop-h[data-c="tr"] { right: 0; top: 0; cursor: nesw-resize; }
.crop-h[data-c="bl"] { left: 0; bottom: 0; cursor: nesw-resize; } .crop-h[data-c="br"] { right: 0; bottom: 0; }
.crop-h::before { content: ''; position: absolute; width: 18px; height: 18px; border: 0 solid #fff; filter: drop-shadow(0 0 1px #000); }
.crop-h[data-c="tl"]::before { left: 2px; top: 2px; border-left-width: 4px; border-top-width: 4px; }
.crop-h[data-c="tr"]::before { right: 2px; top: 2px; border-right-width: 4px; border-top-width: 4px; }
.crop-h[data-c="bl"]::before { left: 2px; bottom: 2px; border-left-width: 4px; border-bottom-width: 4px; }
.crop-h[data-c="br"]::before { right: 2px; bottom: 2px; border-right-width: 4px; border-bottom-width: 4px; }
.crop-h:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
@media print { .img-crop { display: none !important; } }
/* 사진 크기 줄이기(10-13) — 줄인 뒤 용량 미리보기 */
.ish-preview { margin: 12px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* 도장 미리보기(10-12) — 지운 바탕이 보이게 밝은 종이 위(어두운 보기에서도 종이는 밝다) */
.seal-preview { display: block; max-width: 160px; max-height: 160px; margin: 8px 0; padding: 8px; background: #fff; border: 1px dashed var(--line); border-radius: 8px; }
.pick-err:empty { display: none; }
/* 위험 글씨 색(10-19) — 전엔 --danger 정의가 없어 어두운 화면에서도 밝은 화면용 진한 빨강(#c62828)이 떠 잘 안 보였다 · 링크 경고와 같은 짝 */
:root { --danger-text: #c62828; }
@media (prefers-color-scheme: dark) { :root { --danger-text: #fca5a5; } }
/* 고대비 모드 형광펜(10-19) — pdf.js 화면 꾸밈이 쓰는 이름인데 정의가 없어 그 속성이 통째로 무효였다 · 값은 pdf.js 공식 pdf_viewer.css 그대로(평소 none · 고대비 invert) */
:root { --hcm-highlight-filter: none; --hcm-highlight-selected-filter: none; }
@media screen and (forced-colors: active) { :root { --hcm-highlight-filter: invert(100%); } }
.pick-err { color: var(--danger-text, #c62828); }
/* 넘치면 다음 줄로(11-07 사장님 폰 사진 — 사진 창 「PDF 로 저장」 이 글자 큰 폰에서 왼쪽 화면 밖으로 잘림 · 한 줄 고정 + 오른쪽 정렬이라 넘친 쪽이 왼쪽으로 사라졌다)
   창 24곳이 같은 줄을 쓴다 — 넘치지 않으면 모양은 그대로 */
.goto-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; }
/* 단추 하나가 한 줄 폭보다 넓으면 그래도 넘친다(.btn 은 flex:none) — 글자 200% 에서 「사진으로 저장(JPG)」 이 창 왼쪽 밖 1px(시험 ①-가 · 42345349560)
   → 이 줄 안에서만 폭 상한 + 글자 줄바꿈 */
.goto-actions > .btn { flex: 0 1 auto; max-width: 100%; white-space: normal; text-align: center; justify-content: center; }
/* 바깥 링크 묻기(10-13) — 실제 주소 전체(도메인 굵게) · 글씨와 다른 곳이면 경고 · 긴 주소는 줄을 바꿔 가로로 안 넘친다 */
:root { --link-warn-text: #8a1c1c; --link-warn-bg: #fdecea; --link-warn-line: #e8a5a5; }
@media (prefers-color-scheme: dark) { :root { --link-warn-text: #ffd2d2; --link-warn-bg: #4a1f1f; --link-warn-line: #a35656; } }
.link-ask .link-url { margin: 4px 0 8px; padding: 12px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); font-size: .9375rem; line-height: 1.5; overflow-wrap: anywhere; word-break: break-all; }
.link-ask .link-url strong { font-weight: 800; font-size: 1.0625rem; }
.link-ask .link-warn { margin: 0 0 8px; padding: 12px 12px; border: 1px solid var(--link-warn-line); border-radius: 8px; background: var(--link-warn-bg); color: var(--link-warn-text); font-weight: 700; overflow-wrap: anywhere; }
.link-ask .small { font-size: .875rem; color: var(--sub); }
.link-ask .goto-actions { flex-wrap: wrap; }
/* 붙여넣기로 열기(10-13) — 안내는 마우스·자판이 있는 화면(PC)에서만 · 앱 안은 앱이 파일을 넘긴다 */
/* 붙여넣기 안내(11-03 · 장부 1102ao-2) — 손가락 화면에서만 숨긴다. 전엔 「마우스가 있는 화면」 에서만 보였는데, 마우스 없이 글자판만 쓰는 PC·
   마우스를 보고하지 않는 PC(11-02 검사 PC 시험에서 숨었다)에선 Ctrl+V 가 되는데도 안내가 사라졌다. Ctrl+V 는 글자판 기능이라 손가락 화면만 뺀다 */
.paste-hint { display: block; margin-top: 8px; color: var(--sub); }
@media (pointer: coarse) { .paste-hint, .drop { display: none; } } /* 손가락 화면 판정은 site/touch.js TOUCH_Q 와 같은 글만(11-08 QA 보강 공통 · 전엔 「and (hover: none)」 이 붙어 곳마다 달랐다) · 끌어다 놓기 상자는 폰에서 할 수 없어 숨김(B-01 · 창 전체 놓기 받기는 그대로) */
.in-app .paste-hint { display: none !important; }
.paste-ask .paste-peek { margin: 4px 0 0; padding: 12px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); font-size: .9375rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 7.5em; overflow: hidden; }
.paste-ask .goto-actions { flex-wrap: wrap; }
.btn.plain { background: transparent; color: var(--text); border: 1px solid var(--line-strong); }
/* 쪽 번호 — 여러 쪽 PDF 에서는 눌러서 쪽 이동, 아니면 글자처럼 */
button#pageLabel { border: 0; background: transparent; font: inherit; font-size: 0.875rem; color: var(--sub); min-height: 44px; padding: 0 8px; border-radius: 8px; cursor: pointer; }
button#pageLabel:not(:disabled) { color: var(--text); text-decoration: underline dotted; text-underline-offset: 4px; }
button#pageLabel:disabled { cursor: default; color: var(--sub); }
/* 배율 글자 = 「한 장 맞춤 ↔ 폭 맞춤」 단추(10-08 · PDF 만) — 쪽 번호 단추와 같은 모양 */
button#zoomLabel { border: 0; background: transparent; font: inherit; font-size: 0.875rem; color: var(--sub); min-height: 44px; padding: 0 8px; border-radius: 8px; cursor: pointer; }
button#zoomLabel:not(:disabled) { color: var(--text); text-decoration: underline dotted; text-underline-offset: 4px; }
button#zoomLabel:disabled { cursor: default; }
button#zoomLabel[aria-pressed="true"] { font-weight: 700; }

/* 메모 단추·글 — 쪽 위에 겹친다 */
.noteLayer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.note-btn { position: absolute; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; background: #d97706; color: #fff; display: inline-flex; align-items: center; justify-content: center; pointer-events: auto; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.note-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* 누를 자리 44px(10-13) — 보이는 동그라미 28px 둘레 8px 의 보이지 않는 자리 · 이웃 메모·링크와 겹치면 view.js fitNoteHits 가 그 변만 줄인다 · 테두리(2px) 바깥부터 잰다 */
.note-btn::before { content: ''; position: absolute; left: calc(-2px - var(--nl, 8px)); right: calc(-2px - var(--nr, 8px)); top: calc(-2px - var(--nt, 8px)); bottom: calc(-2px - var(--nb, 8px)); border-radius: 8px; }
.note-pop { position: absolute; z-index: 4; max-width: min(280px, 90%); padding: 8px 12px; border-radius: 8px; background: #fff8e1; color: #111827; border: 1px solid #d97706; box-shadow: 0 2px 8px rgba(0,0,0,.25); pointer-events: auto; font-size: 0.875rem; line-height: 1.6; white-space: pre-wrap; }
.note-pop strong { display: block; font-size: 0.875rem; }
body.dark .note-pop { filter: none; }
@media print { .noteLayer { display: none; } }
/* 메모 목록(10-13) — 위 막대 단추(메모 수 딱지) · 쪽·쓴 사람·날짜 + 글(세 줄까지) · 한 줄 전체가 누르는 자리 */
.note-list-btn { position: relative; }
.note-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #b45309; color: #fff; font-size: .8125rem; font-weight: 700; line-height: 18px; text-align: center; pointer-events: none; }
.notes-state { padding: 0 16px; color: var(--sub); }
.note-list { list-style: none; margin: 0; padding: 8px 8px 16px; }
.note-item { display: grid; gap: 4px; width: 100%; min-height: 48px; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; border-radius: 8px; }
.note-item:hover { background: var(--bg); }
.note-item-head { font-size: .8125rem; color: var(--sub); overflow-wrap: anywhere; }
.note-item-head b { color: var(--warn-ink); font-weight: 700; }
.note-item-quote { font-size: .9375rem; line-height: 1.5; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* 칠한 글자(PO-05) */
.order-grip { cursor: grab; touch-action: none; } /* 끌어서 순서(11-01) */
.order-drag { opacity: .5; }
.order-drop { box-shadow: 0 -3px 0 var(--accent); }
.order-drop-end > li:last-child { box-shadow: 0 3px 0 var(--accent); }
.photo-more { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* 찍은 뒤 한 장 더(11-01) */
.photo-more-btn { min-height: 48px; flex: 1 1 200px; font-weight: 700; }
/* 아래 탭(11-01 · 창고 app-shell 규칙 — 누르는 곳 44px 넘게 · 안전영역 · 지금 탭 강조색 · 아이콘은 글자색 · 글자판이 오르면 숨김 · 1024px 이상은 왼쪽 옆 메뉴) */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; background: var(--bg); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
.tabbar[hidden] { display: none; }
.tabbar .tab { flex: 1 1 0; min-width: 0; min-height: 56px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px; color: var(--sub); text-decoration: none; font-size: .8125rem; }
/* 탭 다섯(11-04 · 261104_하단탭) — 375px 에서 칸 75px · 글자를 rem 로만 키우면 기본 글자 200%(26px)에서 「더보기」 가 78px 로 칸을 넘어 잘린다
   → 글자는 rem 로 따르되 화면 폭의 4.2%(375px 에서 15.75px · 3글자 47px)를 넘지 않게 · 그래도 넘치면 줄을 바꿔 잘리지 않게 */
.tabbar .tab span { max-width: 100%; font-size: min(1em, 16px); line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.tabbar .tab svg { flex: none; }
.tabbar .tab[aria-current="page"] { color: var(--link-text); font-weight: 700; } /* 11-04 — --accent 는 면 색(바탕 #fcf8ff 위 4.3:1) · 글자는 --link-text */
/* 지금 탭은 색만이 아니라 위 막대로도(맹검 ④ · 색만으로 상태를 말하지 않는다 VIS4) */
.tabbar .tab[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 3px; border-radius: 0 0 8px 8px; background: var(--accent); }
.tabbar .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
body.has-tabs { --tabs-h: calc(57px + env(safe-area-inset-bottom, 0px)); padding-bottom: var(--tabs-h); }
body.has-tabs #toast, body.has-tabs .offline-retry-bar { bottom: calc(var(--tabs-h) + 12px); }
/* 11-02 고침 — 전엔 body[data-kb="open"] 을 봤는데 그 표시를 붙이는 코드가 0곳이라 글자판 위에 탭 띠 57px 가 남았다(55 §2-KB). kbCheck 가 붙이는 kb-open 을 본다 */
body.kb-open .tabbar { display: none; }
.tool-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.tool-list .exp-item { width: 100%; text-decoration: none; }
/* 찍기 탭(11-04) — 홈에서 옮겨 온 찍기 단추 둘 · 도구 목록과 같은 모양 */
.capture-list { display: grid; gap: 8px; margin: 0 0 16px; }
.capture-list .exp-item { width: 100%; text-align: left; }
.capture-tips { margin: 0; padding-left: 1.25em; color: var(--sub); line-height: 1.6; } /* 11-04 — 찍으면 저절로 되는 것 세 줄(검사 PC 사진: 카드 아래가 비었다 · 사장님 「찍을 때부터 자동으로」) */
/* 최근 탭이 빌 때(11-04) — 작은 그림 + 한 줄 + 단추 하나 */
.recent-blank { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 12px 0; padding: 16px 8px; text-align: center; color: var(--sub); }
.recent-blank[hidden] { display: none; }
.recent-blank p { margin: 0; }
.open-formats { margin: 12px 0 0; }
/* 언어 고르기(11-03 · 더보기 탭) — 줄마다 누를 자리 48px(§2-ACC 44px 이상) · 고른 줄은 글자로도(동그라미) */
.lang-pick { margin: 0 0 16px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.lang-pick[hidden] { display: none; }
.lang-pick legend { padding: 0 4px; font-weight: 700; }
.lang-opt { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 4px; border-radius: 8px; cursor: pointer; }
.lang-opt:hover, .lang-opt:focus-within { background: var(--line); }
.lang-opt input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent, currentColor); }
.lang-pick .small { margin: 8px 4px 0; }
.tool-group { margin: 16px 0 8px; color: var(--sub); }
@media (min-width: 1024px) {
  .tabbar { top: 0; bottom: 0; right: auto; width: 96px; flex-direction: column; justify-content: flex-start; padding-top: 72px; border-top: 0; border-right: 1px solid var(--line); }
  .tabbar .tab { flex: 0 0 auto; min-height: 64px; }
  .tabbar .tab span { font-size: 1em; } /* 옆 메뉴는 칸 폭 96px — 화면 폭 상한이 필요 없다 */
  .tabbar .tab[aria-current="page"]::before { top: 18%; bottom: 18%; left: 0; right: auto; width: 3px; height: auto; border-radius: 0 8px 8px 0; }
  body.has-tabs { padding-bottom: 0; padding-left: 96px; }
  body.has-tabs #toast { bottom: 12px; }
}
/* 옆 메뉴인데 화면이 낮을 때(가로 모드 · 11-04) — 다섯 칸 × 64 + 위 72 = 392px 가 높이 360 에서 마지막 탭을 자른다 → 칸 56 · 위 여백 8 · 그래도 모자라면 메뉴 안에서 굴림 */
@media (min-width: 1024px) and (max-height: 520px) {
  .tabbar { padding-top: 8px; overflow-y: auto; }
  .tabbar .tab { min-height: 56px; }
}
/* 보정 네 가지(CS-04 · 11-01) — 옛 체크 줄과 같은 모양 */
.photo-look { border: 0; padding: 0; margin: 8px 0; display: grid; gap: 4px; }
.photo-look legend { padding: 0; margin-bottom: 4px; font-weight: 700; }
/* 내 폴더(PO-02 · 11-01 · PC 크롬·엣지만) */
.my-folders { margin: 16px 0; }
.my-folders h2 { font-size: 1.0625rem; margin: 0 0 4px; }
.folder-list { display: grid; gap: 8px; margin: 8px 0; }
.folder-list .folder-open { width: 100%; min-height: 48px; text-align: left; }
#folderDialog { width: min(720px, 100vw - 32px); }
#folderDialog .toc-head { gap: 8px; flex-wrap: wrap; }
#folderFind { width: 100%; min-height: 44px; }
.folder-kinds, .folder-sorts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.folder-kinds .chip, .folder-sorts .chip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; cursor: pointer; }
.folder-kinds .chip[aria-pressed="true"], .folder-sorts .chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.folder-cap { color: var(--danger-text); font-weight: 700; }
#folderProgress { width: 100%; }
.folder-files { list-style: none; margin: 8px 0 0; padding: 0; max-height: 60vh; overflow: auto; }
.folder-files li { border-bottom: 1px solid var(--line); }
.folder-file { all: unset; box-sizing: border-box; width: 100%; min-height: 56px; display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 12px; padding: 8px 4px; cursor: pointer; }
.folder-file:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.folder-kind { grid-row: 1 / span 2; align-self: center; text-align: center; font-size: .8125rem; border-radius: 8px; padding: 8px 0; border: 1px solid var(--line); background: var(--card); color: var(--text); }
.folder-name { overflow-wrap: anywhere; }
.folder-meta { color: var(--sub); }
.note-ring { position: absolute; border: 3px solid var(--accent); border-radius: 8px; pointer-events: none; animation: noteRing .5s ease-in-out 3; z-index: 5; } /* 누른 메모 자리(PO-05) */
.note-ring.still { animation: none; }
@keyframes noteRing { 50% { opacity: .2; } }
.notes-tools { padding: 0 16px; margin: 4px 0 0; justify-content: flex-start; flex-wrap: wrap; }
.note-item-text { font-size: .9375rem; line-height: 1.5; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }

/* 스캔 PDF 글자 읽기 */
.ocr-bar { max-width: 900px; margin: 0 8px 8px; /* 폰에서 좌우 끝에 붙지 않게 */ padding: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; text-align: center; }
.ocr-bar p { font-size: 1rem; color: var(--text); margin-bottom: 8px; }
.ocr-bar .small { font-size: 0.875rem; color: var(--sub); margin: 8px 0 0; }
.ocr-bar .ocr-eng { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; cursor: pointer; } /* 영어도 함께 읽기(10-09) — 누르는 칸 44px */
.ocr-bar .ocr-eng input { width: 22px; height: 22px; flex: none; }
.ocr-bar .btn { border: 0; }
.ocrLayer { position: absolute; inset: 0; z-index: 1; line-height: 1; }
.ocrLayer span { position: absolute; color: transparent; white-space: pre; transform-origin: 0 0; cursor: text; }
.ocrLayer span::selection { background: rgba(47, 107, 255, .35); }
.ocrLayer mark.hl { background: var(--hl); color: transparent; }
@media (min-width: 916px) { .ocr-bar { margin: 0 auto 8px; } }
@media print { .ocr-bar { display: none; } }

/* 파워포인트 — 장마다 원래 비율(보통 16:9)의 카드 · 글이 넘치면 카드가 늘어난다 · 제목은 크게(QA 0929) */
.rich-slide { aspect-ratio: var(--ratio, 1.7778); border: 1px solid var(--line); border-radius: 8px; padding: 4% 5%; margin: 8px 0 24px; background: var(--card); overflow-wrap: anywhere; }
/* 문서 글자 비율은 docfont.css 로(11-04) */
@media print { .rich-slide { break-inside: avoid; } }
/* 글자색 — 워드·한글·파워포인트의 글자색. 어두운 화면에서는 밝게 섞어 읽히게 · 바탕색 칸 안은 칸 글자색을 따른다(§2-L) */
.rich .fc { color: var(--fc); }
@media (prefers-color-scheme: dark) { :root .rich .fc { color: color-mix(in srgb, var(--fc) 45%, #ffffff); } }
/* 어두운 화면 규칙(:root:not(...) 가 붙어 더 구체적)이 이 규칙을 이겨 노란 칸 위 빨간 글자가 대비 1.75 였다(기능 시험) — 칸 글자색이 늘 이긴다 */
.rich .rich-filled .fc { color: inherit !important; }
/* 칸 바탕과 대비가 4.5:1 이상인 색 글자만 원래 색 — 계산은 docshare.js styleCell */
.rich .rich-filled .fc.fc-keep { color: var(--fc) !important; }
.rich-formula { color: var(--muted); font-style: italic; }
/* 결과가 저장 안 된 수식을 여기서 계산한 칸 — 값은 보통 글씨, 점선 밑줄로 「여기서 계산함」 을 알린다(길게 누르면 식) */
.rich-calc { text-decoration: underline dotted var(--muted); text-underline-offset: 3px; }

/* 파워포인트 원본 배치 — 장 비율 그대로 · 글자 크기는 장 폭에 비례(cqw) · 확대하면 장이 커지고 가로로 굴린다 */
.rich-slidewrap { overflow-x: auto; margin: 8px 0 24px; }
.rich-slide.layout { position: relative; padding: 0; margin: 0; width: calc(100% * var(--zoom, 1)); container-type: inline-size; white-space: normal; line-height: 1.2; }
.slide-shape { position: absolute; display: flex; flex-direction: column; overflow-wrap: anywhere; padding: .2em .3em; }
.slide-shape p { min-height: 0; }
.slide-shape .rich-fig { margin: 0; }
/* 선(10-18) — 장 안에서 시작점·길이·기울기로 놓은 얇은 띠 · 테두리 있는 도형은 테두리를 상자 안쪽에 */
.slide-line { position: absolute; height: 0; transform-origin: 0 0; pointer-events: none; }
.slide-shape.slide-lined { box-sizing: border-box; }
/* 발표 속 동영상·소리(10-18) — 그 자리에서 재생 · 폭은 카드 안으로 */
.rich-mediabox { margin: .5em 0; max-width: 100%; }
.rich-mediabox video { display: block; width: 100%; max-width: 640px; height: auto; background: #000; border-radius: 8px; }
.rich-mediabox audio { display: block; width: 100%; max-width: 420px; }
.slide-shape .rich-mediabox, .slide-shape .rich-mediabox video { margin: 0; max-width: none; height: 100%; }
.slide-pic .rich-img { width: 100%; height: 100%; object-fit: contain; background: transparent; }
.rich-notice .btn-mini { margin-left: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; cursor: pointer; }

/* 아래 도구 막대 이름(10-28 UI·UX QA CU-02) — 그림만으로는 저장·보내기·문서 색의 뜻을 바로 읽기 어려웠다.
   넓은 화면에서만 그림 옆에 짧은 이름 · 좁은 화면은 막대가 꽉 차 그대로 그림만(결정 기록부 「PDF 서명 넣기」 — 375px 에서 단추를 더 못 둔다)
   보이는 이름은 읽어 주는 이름(aria-label) 안에 든다 — 손보기 ⊂ 「PDF 손보기 — …」 · 어둡게/밝게 ⊂ 「어둡게 보기/밝게 보기」 */
.tool-name { display: none; }
@media (min-width: 900px) {
  .tools button.icon.named { width: auto; padding: 0 12px; gap: 8px; }
  .tools .tool-name { display: inline; font-size: .875rem; }
}

/* 폰 도구줄 — 단추 6개(축소·배율·확대·인쇄·보내기·어둡게) 사이에 이름표 자리를 남긴다. 단추는 44px 아래로 줄이지 않는다(터치 크기) · QA 0930 */
@media (max-width: 420px) {
  .tools { gap: 4px; padding-left: 4px; padding-right: 4px; }
  .tools button.icon { width: 44px; }
  .tools #zoomLabel { min-width: 40px; }
  button#pageLabel { padding: 0 4px; }
}

/* 잠깐 뜨는 안내(인쇄 준비·보내기 실패) — 도구줄 바로 위, 글자색·바탕을 뒤집어 밝은·어두운 화면 둘 다 읽힌다 */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 20;
  max-width: calc(100vw - 32px); padding: 8px 16px; border-radius: 12px; background: var(--text); color: var(--card); font-size: 0.875rem; text-align: center; }
/* 알림 안 단추(인쇄 준비 「취소」) — 알림 색을 뒤집어 단추로 보이게 · 누를 자리 44px */
.toast button { margin-left: 12px; min-height: 44px; padding: 0 16px; border: 1px solid var(--card); border-radius: 8px; background: transparent; color: var(--card); font: inherit; font-weight: 700; cursor: pointer; }
/* 아주 좁은 폰(359px 이하) — 배율 숫자(100%)를 빼서 쪽 번호 자리를 낸다(320px 에서 「12 / 34」 가 잘렸다). 배율은 확대·축소 단추로 그대로 바뀐다 */
@media (max-width: 399px) { .tools #zoomLabel { display: none; } } /* 375px 폰에서 「보내기」 까지 보이면 막대가 380px 로 넘쳤다(헌법 총집합 10-07 · qa-1007 ③④) — 배율 숫자는 손가락 확대가 있어 빼도 된다 */
/* 위 막대도 359px 이하에선 틈·여백만 줄인다 — 「소리 내어 읽기」 단추가 늘자 320px 에서 「파일 열기」 가 둘째 줄로 밀렸다(qa-1002 ⑦ · 10-05). 단추는 44px 아래로 안 줄인다 */
/* 359px 이하 — 「저장하기」 단추가 늘자 320·344px 에서 쪽 번호 「123 / 456」 이 잘렸다(qa-0929 · 헌법 총집합 10-07) → 인쇄는 「저장하기」 창 안으로(그 단추가 있을 때만) */
@media (max-width: 359px) { .tools:has(#btnExport:not([hidden])) #btnPrint { display: none; } }
/* 11-11 375px 에서도 「저장하기」·「보내기」 가 둘 다 보이면 단추 44px 여덟 개로 막대가 392px(가로 넘침 · qa-1007 ③④ 11-05부터 · 웹 시험 42875244101 단추 폭 찍음) → 그때만 인쇄를 「저장하기」 창 안(expPrint)으로 · 보내기가 없으면 375px 에서도 막대에 그대로(qa-sweep) */
@media (max-width: 399px) { .tools:has(#btnExport:not([hidden])):has(#btnShare:not([hidden])) #btnPrint { display: none; } }
@media (max-width: 359px) {
  .bar { gap: 0; padding-left: 4px; padding-right: 4px; }
  .bar .brand { padding-left: 4px; padding-right: 4px; }
  .bar .brand-mark { display: none; } /* 로고 그림(11-01)만 숨긴다 — 이 폭에선 22px 도 「파일 열기」 를 둘째 줄로 민다(qa-1002 ⑦ 전례) · 이름 글자는 남김 */
  .bar button.icon { width: 44px; }
  #btnOpen { padding: 0 10px; }
}
/* 접는 폰 바깥 화면(300px 이하) — 단추 다섯 개만으로 꽉 차 넘쳤다 → 이름표를 윗줄로 내린다 */
@media (max-width: 300px) {
  .tools { flex-wrap: wrap; row-gap: 0; }
  .tools .grow { display: none; }
  button#pageLabel { order: -1; flex: 1 0 100%; }
  .toast { bottom: calc(116px + env(safe-area-inset-bottom)); } /* 도구줄이 두 줄이 된 만큼 위로 */
  /* 위 막대도 306px 로 넘쳐 폰이 화면을 넓혀 그렸다(그래서 알림이 도구줄을 덮었다) — 틈·여백만 줄인다. 단추는 44px 아래로 안 줄인다 */
  .bar { gap: 0; padding-left: 4px; padding-right: 4px; }
  .bar .brand { padding-left: 4px; padding-right: 4px; }
  .bar button.icon { width: 44px; }
  #btnOpen { padding: 0 10px; }
}

/* 키보드(Tab)로 고른 칸 — 어디가 골라졌는지 늘 보이게. 전엔 브라우저 기본(1px 흐린 테두리)뿐이거나 아예 지웠다(추가 관점 QA 0930 · qa-1002 ② 다섯 화면 전부)
   파랑 테두리 3px · 바탕과 대비 3:1 넘음(밝은 #2f6bff · 어두운 #6b95ff) · 마우스로 누를 땐 안 뜬다(:focus-visible) */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* 위 막대 — 글자를 크게 키우면(200%) 「파일 열기」 가 오른쪽으로 잘렸다(막대가 넘친 부분을 감춰 화면 폭 검사는 0 이었다 · qa-1002 ⑦).
   자리가 모자라면 단추를 다음 줄로 내린다. 파일 이름 칸은 바탕 크기 0 에서 남는 자리를 채우게 해(줄어드는 쪽) 긴 이름 때문에 단추가 내려가지는 않는다 */
.bar { flex-wrap: wrap; row-gap: 0; }
/* 11-04 — 그래도 글자 200%(375px)에선 「파일 열기」 가 둘째 줄로 내려가 머리띠가 화면 위 1/5 을 먹었다(검사 PC 사진 design-live-view-*-375-text200) → 하단 탭 글자(min(1em,4.2vw))와 같은 방식으로 머리띠 글자만 폭에 맞춰 상한(375px 에서 약 17px · 기본 16px 보다 작아지지 않음) · 줄바꿈 규칙은 그대로 둬 더 좁으면 여전히 내린다 */
.bar .brand, #btnOpen { font-size: min(1rem, 17px); } /* 11-04 — 글자 200% 에서도 머리띠 한 줄(위 줄 상한 · vw 없이) */
.bar .name { flex: 100 1 0; }
/* 좁은 폰에서 문서를 열면 파일 이름을 막대 아래 한 줄로(10-07) — 단추·「파일 열기」 사이에 끼면 375px 에서 「e.」 처럼 한두 글자만 보였다(사진) */
@media (max-width: 600px) { .bar .name:not(:empty) { order: 10; flex: 1 0 100%; padding: 0 8px 8px; font-size: .875rem; } }
/* 11-02 — 문서를 연 좁은 폰(430px 이하)에선 막대 로고 그림만 숨긴다: 11-01 로고(22px+틈)가 붙은 뒤 375px 에서 「파일 열기」 가 둘째 줄로 밀렸다(qa-1012 ⑧ 22/22 → 20/22) · 첫 화면 로고·글자 「클린뷰어」 는 그대로 */
@media (max-width: 430px) { body:not(.has-tabs) .bar:has(.name:not(:empty)) .brand-mark { display: none; } } /* 11-12 QA 게이트 Q21 — 뒤로가기로 첫 화면에 와도 문서 이름이 남아 로고가 사라졌다 · 문서 화면에서만 */

/* 낭독기에만 들리는 글(문서를 연 뒤 제목) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 새로고침·뒤로 뒤 안내 */
.reopen { background: var(--card); color: var(--text); border-left: 4px solid var(--accent); border-radius: 8px; padding: 8px 12px; margin: 8px 0 12px; }

/* 도움말 「PDF 볼 준비」 — 단추와 상태 글 */
.help-body .prep { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* 새 판 알림 — 도구줄 위(알림 칸 자리 위쪽) · 밝은·어두운 화면 둘 다 읽히게 글자·바탕 뒤집기 */
.update-bar { position: fixed; left: 16px; right: 16px; bottom: calc(120px + env(safe-area-inset-bottom)); z-index: 21; max-width: 560px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 12px; background: var(--text); color: var(--card); font-size: 0.875rem; }
.update-bar > span { flex: 1 1 200px; }
.update-bar .btn.plain { color: var(--card); border-color: var(--card); }

/* 차트를 숫자 표로 — 제목은 표 위에 굵게 */
.rich-chart { margin: 8px 0; }
.rich-chart-title { font-weight: 700; margin: 4px 0; }
/* 파워포인트 발표자 메모(10-07) — 장 아래 접힌 칸 · 누르는 자리 44px */
.rich-notes { padding: 0; /* 문서 안 목록 규칙이 왼쪽 24px 를 줬다(사진) */ margin: 8px 0 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.rich-notes > summary { min-height: 44px; display: flex; align-items: center; padding: 0 12px; cursor: pointer; font-weight: 600; color: var(--text); }
.rich-notes > summary::-webkit-details-marker { display: none; }
.rich-notes > summary::before { content: ''; flex: none; width: 7px; height: 7px; margin: 0 12px 0 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); } /* 글자 세모는 글꼴 따라 작게·엉뚱한 방향으로 보였다(사진) — 선으로 그린 꺾쇠 */ /* flex 로 바꾸면 기본 세모가 사라져 「누르면 펼쳐진다」 가 안 보인다 */
.rich-notes[open] > summary::before { transform: rotate(45deg); }
.rich-notes > p { margin: 0; padding: 4px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.rich-notes > p:last-child { padding-bottom: 12px; }
@media print { .rich-notes > summary { min-height: 0; } }
/* 차트 그림(10-07) — 폰 폭에서 글자가 12px 아래로 줄지 않게 그림 폭을 480px 로 묶는다(그림 안 글자 15 × 343/400 ≈ 13px) */
.rich-chart-fig { margin: 8px 0 12px; max-width: 480px; }
.rich-chart-svg { display: block; width: 100%; height: auto; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.rich-chart-svg .rc-grid { stroke: var(--line); stroke-width: 1; }
.rich-chart-svg .rc-axis { stroke: var(--sub); stroke-width: 1.5; }
.rich-chart-svg .rc-label { fill: var(--sub); font-size: var(--rc-label-size, 15px); font-family: inherit; } /* 크기는 docfigure.js fitChartLabels 가 손님 글자에 맞춰 정한다(10-29) */
.rich-chart-legend { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .875rem; }
.rich-chart-legend li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.rich-chart-chip { flex: none; width: 12px; height: 12px; border-radius: 8px; }
@media print { .rich-chart-svg { border-color: #999; } }
.rich-chart th { border: 1px solid var(--muted); padding: 4px 8px; background: var(--bg); color: var(--text); font-weight: 600; text-align: left; vertical-align: top; } /* 머리 칸에도 테두리 — 없으면 「Series 1Series 2」 처럼 붙어 보였다(사진) */

/* 쪽 돌리기 방향 고르기(10-05) */
.turn-choices { border: 0; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 0 16px; }
.turn-choices legend { padding: 0; margin-bottom: 4px; }
/* 문서 속 연락처(10-07) — 값 + 걸기·메일·지도(44px) */
#contactBody { padding: 8px 16px 16px; }
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); }
.contact-val { flex: 1 1 12em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.contact-save { min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--text); font: inherit; cursor: pointer; } /* 연락처 저장(10-09) — 걸기 옆 덜 눈에 띄게 */
.contact-go { min-height: 44px; min-width: 44px; padding: 0 12px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--link-text); text-decoration: none; font-weight: 600; }
/* 엑셀 칸 합계(10-07) — 고른 칸 · 아래 띠(도구줄 위) */
table.rich-sheet td.cell-sel { outline: 2px solid var(--accent); outline-offset: -2px; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.sum-bar { position: fixed; left: 8px; right: 8px; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 8px 8px 16px; border-radius: 12px; background: var(--card); color: var(--text); border: 1px solid var(--line); box-shadow: 0 4px 16px rgba(0,0,0,.18); font-variant-numeric: tabular-nums; }
.sum-bar[hidden] { display: none; }
.sum-bar span { flex: 1 1 auto; min-width: 0; }
.sum-bar .btn { min-height: 44px; }
.sum-bar .sum-formula { flex-basis: 100%; order: 3; font-family: ui-monospace, Consolas, monospace; font-size: .875rem; color: var(--sub); overflow-wrap: anywhere; } /* 수식 보기(10-08) — 긴 수식은 줄을 바꿔 다 보인다 */
.sum-bar .sum-formula[hidden] { display: none; }
@media print { .sum-bar { display: none !important; } }
/* 엑셀 첫 줄·첫 칸 고정(10-07 열셋째 「9」 ②) — 켜면 표 상자가 화면 높이 안에서 스스로 굴러가야 위에 붙일 수 있다 */
.sheet-freeze { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.sheet-freeze .btn { min-height: 44px; }
.sheet-freeze .btn[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: -2px; font-weight: 700; }
.rich-tblwrap.fz-on { max-height: min(75vh, 900px); overflow: auto; }
.rich-tblwrap.fz-on .rich-sheet thead th { z-index: 3; }
.rich-sheet.fz-r tbody tr.fz-row > * { position: sticky; top: var(--fz-y, var(--fz-top, 28px)); z-index: 2; background: var(--card); box-shadow: 0 1px 0 var(--muted); }
.rich-sheet.fz-c tbody td.fz-c0 { position: sticky; left: var(--fz-left, 40px); z-index: 1; background: var(--card); box-shadow: 1px 0 0 var(--muted); }
.rich-sheet.fz-c.fz-r tbody tr.fz-row > td.fz-c0 { z-index: 3; }
.rich-sheet.fz-r tbody tr.fz-row > th.rich-rowhead, .rich-sheet.fz-c tbody th.rich-rowhead { z-index: 2; }
.sheet-freeze-n { display: inline-flex; align-items: center; gap: 4px; }
.sheet-freeze-n[hidden] { display: none; }
.sheet-freeze-n select { min-height: 44px; font: inherit; }
.sheet-freeze .sheet-freeze-file { flex: 1 1 100%; margin: 0; } /* 엑셀에 저장된 틀 고정대로 켰다는 말(10-13 ⑮) */
.rich-sheet thead th.rich-rowhead { left: 0; z-index: 4; }
/* CSV 표(10-11) — 엑셀과 같은 고정·합계 손잡이 · 줄 번호 칸이 없어 첫 칸은 왼쪽 0 · 2쪽부터 다시 보이는 머리줄도 첫 칸이 붙는다 */
.rich-sheet.fz-c thead th.fz-c0 { left: var(--fz-left, 0); z-index: 4; }
.csv-sheet td { cursor: cell; }
/* 열 넓히기 손잡이(10-07 열셋째 「9」 ③) — 보이는 것은 가는 선 · 누를 자리는 44px */
.rich-sheet thead th { position: sticky; }
.col-grip { position: absolute; top: 0; right: 0; width: 12px; height: 100%; cursor: col-resize; touch-action: none; z-index: 5; }
.col-grip::before { content: ''; position: absolute; inset: 0 0 0 -32px; }
/* 누를 자리는 자기 칸 머리 안에서만 — 좁은 칸(31px)에선 옆 칸 손잡이의 넓힌 자리가 이 칸까지 덮어 끌면 옆 칸이 넓어졌다(qa-1013 ③ · 칸 머리마다 따로 겹이라 뒤 칸이 이긴다) */
.rich-sheet thead th { overflow: hidden; }
@media (pointer: coarse) { .rich-sheet thead th { height: 44px; } } /* 손가락으로 잡는 자리 44px */
.col-grip::after { content: ''; position: absolute; top: 20%; bottom: 20%; right: 1px; width: 2px; border-radius: 999px; background: var(--muted); }
.col-grip:hover::after, .col-grip:focus-visible::after, .col-grip.dragging::after { background: var(--accent); }
@media print { .sheet-freeze, .col-grip { display: none !important; } .rich-tblwrap.fz-on { max-height: none; overflow: visible; } }
/* 인쇄(10-12) — 칸 머리의 최소 폭(열 넓히기 10-07)이 16칸 표를 A4 밖 1049px 로 밀었다(qa-1003 ⑤) · 종이에선 폭을 풀어 칸이 줄어 들게 */
@media print { .rich-sheet thead th { min-width: 0 !important; width: auto !important; } .rich-sheet td { overflow-wrap: anywhere; } }
/* 가로 두 쪽(10-07 열셋째 「9」 ④) — 손가락 기기를 눕혔을 때만(view.js twoUpWanted) · 쪽 아닌 띠(글자 읽기·날짜·연락처)는 한 줄을 다 쓴다 */
#doc.two-up { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 8px; }
#doc.two-up > .page { margin: 0; }
#doc.two-up > :not(.page) { flex: 1 0 100%; }
#doc.two-up { margin-inline: auto; }
.goto-view h3 { font-size: 1rem; margin: 16px 0 8px; }
.goto-view-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.goto-view-btns .btn { min-height: 44px; }
.goto-view-btns .btn[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: -2px; font-weight: 700; }
/* 쪽 미리보기(10-11) — 쪽 번호 창 안 작은 그림 격자 · 격자만 굴린다(이동·닫기 단추는 늘 보이게) · 지금 쪽은 굵은 테두리 + 글 */
.page-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; max-height: min(42vh, 340px); overflow: auto; overscroll-behavior: contain; padding: 4px; border: 1px solid var(--line); border-radius: 12px; }
.thumb { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 44px; padding: 4px; border: 2px solid transparent; border-radius: 8px; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.thumb:hover { background: var(--line); }
.thumb-cv { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.thumb-n { font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--sub); }
.thumb[aria-current="page"] { border-color: var(--accent); }
.thumb[aria-current="page"] .thumb-n { color: var(--text); font-weight: 700; }
.thumb[aria-current="page"] .thumb-n::after { content: ' · 지금'; font-weight: 400; }
body.dark .thumb-cv { filter: invert(1) hue-rotate(180deg); }
body.dark.paper-keep .thumb-cv { filter: none; }
@media print { #doc.two-up { display: block; } #doc.two-up > .page { margin: 0 auto; } }
/* 어두운 화면에서도 종이는 원래 색(10-07 열셋째 「9」 ⑤) — 뒤집기를 끈다(PDF 쪽·사진·문서 속 그림·도형) */
body.dark.paper-keep .page canvas, body.dark.paper-keep .img, body.dark.paper-keep .rich-img, body.dark.paper-keep .rich-shape, body.dark.paper-keep .xps-page { filter: none; }

/* 발표 보기(10-08) — 검은 바탕 가운데 장 하나 · 아래 막대(이전 · N/M · 다음 · 끝내기) · 인쇄엔 안 나온다 */
.present { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: #000; color: #fff; }
.present[hidden] { display: none; }
.present-stage { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; overflow: hidden; touch-action: pan-y; user-select: none; cursor: pointer; }
.present-stage .present-slide { margin: 0; box-sizing: border-box; overflow: hidden; color: var(--text); --zoom: 1; }
.present-bar { flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: #111; }
.present-bar .btn { min-height: 44px; }
.present-bar .btn.plain { color: #fff; border-color: #6b7280; background: transparent; }
.present-bar .btn.plain:disabled { color: #9ca3af; border-color: #374151; }
.present-count { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; color: #e5e7eb; }
/* 발표자 메모·지난 시간(10-12 스물셋째 ⑯) — 장 아래 띠(장 자리는 그만큼 줄어든다) · 길면 띠 안에서 굴린다 · 시간은 분:초 */
.present-notes { flex: none; max-height: 32vh; overflow-y: auto; padding: 8px 16px; background: #111; color: #e5e7eb; border-top: 1px solid #374151; font-size: 1rem; line-height: 1.6; }
.present-notes p { margin: 0 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.present-notes .present-notes-none { color: #9ca3af; }
.present-bar .btn.plain[aria-pressed="true"] { background: #e5e7eb; color: #111; border-color: #e5e7eb; }
.present-time { min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; color: #e5e7eb; }
body.presenting { overflow: hidden; }
@media print { .present { display: none !important; } }

/* 첨부 한 번에 모두 저장(10-08) */
.att-all-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 16px; }
.att-all-row .btn { min-height: 44px; }

/* 그림 크게 보기(10-08) — 검은 바탕 · 위 막대(제목 · 더 크게 · 닫기) · 「더 크게」 면 2.5배로 굴려 본다 */
#doc img[data-zoom] { cursor: zoom-in; }
#doc img[data-zoom]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.img-view { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: #000; color: #fff; }
.img-view[hidden] { display: none; }
.img-view-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 16px 8px; background: #111; }
.img-view-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1rem; font-weight: 600; color: #e5e7eb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.img-view-bar .btn { min-height: 44px; flex: none; }
.img-view-bar .btn.plain { color: #fff; border-color: #6b7280; background: transparent; }
/* 「이 그림 저장」(10-13)이 늘어 폰 폭에선 제목을 윗줄로 — 단추 셋은 아랫줄에 그대로 44px · 오른쪽 끝 맞춤 */
@media (max-width: 520px) { .img-view-bar { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; } .img-view-title { flex: 1 0 100%; } }
.img-view-stage { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; place-items: center; padding: 8px; }
.img-view-img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; } /* 작은 그림도 화면에 맞게 키운다(크게 보려고 누른 것이다) */
.img-view-stage.big { place-items: start; }
.img-view-stage.big .img-view-img { width: 250%; height: auto; cursor: zoom-out; }
@media print { .img-view { display: none !important; } }

/* 펜(10-08) — 켜 있는 동안 쪽 위 손가락은 그리기(화면 안 굴러감) · 글자 층·칸이 손가락을 가로채지 않게 */
body.pen-mode .page { touch-action: none; cursor: crosshair; }
body.pen-mode .page > * { pointer-events: none; }
.markLayer svg.penInk { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* 사진 돌리기(10-08) */
.img-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 8px 0; }
.img-tools .btn { min-height: 44px; }
@media print { .img-tools { display: none !important; } }
/* 사진 속 위치 정보(10-11) — 사진 위 띠 · 알림은 굵게 · 단추 44px · 인쇄엔 없음 */
.img-gps { max-width: 640px; margin: 0 8px 8px; padding: 12px 16px; border: 1px solid var(--line); border-left: 4px solid #b45309; border-radius: 12px; background: var(--card); color: var(--text); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.img-gps p { flex: 1 1 100%; margin: 0; line-height: 1.6; }
.img-gps .small { color: var(--sub); font-size: .875rem; }
.img-gps .btn { min-height: 44px; }
@media (min-width: 656px) { .img-gps { margin: 0 auto 8px; } }
@media print { .img-gps { display: none !important; } }
/* 사진 여러 장(10-09) — 이전 · 2 / 5 · 다음 */
.img-set { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.img-set .btn { min-height: 44px; }
.img-set-count { min-width: 4em; text-align: center; font-variant-numeric: tabular-nums; }
/* 밝게 보기(10-08) — 어두운 서류 사진 · 어둡게 화면에서도(뒤집기와 함께) · 인쇄는 원래 사진 그대로 */
/* 배율(--bright)은 사진마다 잰다(view.js brightGain · 종이가 흰색 가까이) · 대비는 조금만(많이 주면 어두운 사진이 도로 어두워진다) */
.img.img-bright { filter: brightness(var(--bright, 1.6)) contrast(1.15); }
body.dark .img.img-bright { filter: brightness(var(--bright, 1.6)) contrast(1.15) invert(1) hue-rotate(180deg); }
body.dark.paper-keep .img.img-bright { filter: brightness(var(--bright, 1.6)) contrast(1.15); }
@media print { .img.img-bright, body.dark .img.img-bright { filter: none; } }

/* 옆으로 넘기기(10-08) — 쪽 상자를 가로 띠에 · 밀면 쪽마다 멈춘다 · 띠 높이는 JS(fitFlipStrip) */
#doc.flip .flip-strip { display: flex; gap: 16px; overflow-x: auto; overflow-y: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 8px 0; }
#doc.flip .flip-strip > .page { flex: none; margin: 0 auto; scroll-snap-align: center; scroll-snap-stop: always; }
#doc.flip .flip-strip::before, #doc.flip .flip-strip::after { content: ""; flex: 0 0 max(0px, calc((100% - var(--pw, 0px)) / 2 - 16px)); } /* 첫·끝 쪽도 가운데에 멈추게 */
@media print { #doc.flip .flip-strip { display: block; height: auto !important; overflow: visible; } #doc.flip .flip-strip > .page { margin: 0 auto; } }

/* 남은 읽기 시간(10-08) — 이름 옆(폰은 이름 줄 오른쪽 · 앱은 이름이 숨으니 머리 아래 한 줄) */
.read-left { font-size: .8125rem; color: var(--sub); white-space: nowrap; flex: none; padding: 0 8px; }
@media (max-width: 600px) {
  .bar .name:not(:empty) { flex: 1 1 60%; }
  .bar .read-left { order: 10; padding: 0 8px 8px; margin-left: auto; }
}
.in-app .bar .read-left { order: 10; flex: 1 0 100%; text-align: right; padding: 0 12px 8px; }

/* 누런 바탕(10-09) — 글 문서는 바탕·글자 색을, PDF·사진은 종이를 살짝 누렇게 · 어둡게가 켜지면 어둡게가 먼저 · 인쇄는 원래대로 */
body.sepia:not(.dark) { --sepia-bg: #f4ead5; --sepia-ink: #3b2e1c; }
body.sepia:not(.dark) .textdoc, body.sepia:not(.dark) .rich, body.sepia:not(.dark) .reflow { background: var(--sepia-bg); color: var(--sepia-ink); }
body.sepia:not(.dark) .page canvas, body.sepia:not(.dark) .img:not(.img-bright) { filter: sepia(.3) brightness(.98); }
@media print { body.sepia .textdoc, body.sepia .rich, body.sepia .reflow { background: #fff; color: #000; } body.sepia .page canvas, body.sepia .img { filter: none; } }

/* 맨 위로(10-08) — 도구줄 위 오른쪽 · 44px · 인쇄엔 안 나옴 */
.to-top { position: fixed; right: 16px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 30; display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: .875rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18); cursor: pointer; }
/* 읽은 만큼 막대(10-09) — 본문 칸 맨 위에 붙는 얇은 띠 · 누르는 것이 아니라 보이기만 · 인쇄엔 없음 */
.read-prog { position: sticky; top: 0; left: 0; right: 0; height: 3px; background: color-mix(in srgb, var(--line) 70%, transparent); z-index: 6; }
.read-prog[hidden] { display: none; }
.read-prog > span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s linear; }
@media print { .read-prog { display: none !important; } }
/* 링크·목차로 간 뒤 돌아오기(10-09) — 맨 위로 단추와 같은 모양, 왼쪽 아래 */
.to-top.link-back { right: auto; left: 16px; }
@media print { .to-top { display: none !important; } }

/* 최근 문서 이름으로 찾기(10-08) */
.recent-find { margin: 8px 0; }
.recent-find input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 12px; font: inherit; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 8px; }

/* 내 책갈피(10-08) */
.mark-list { list-style: none; padding: 0; margin: 4px 0; }
.mark-list li { display: flex; align-items: center; gap: 4px; border-top: 1px solid var(--line); }
.mark-list .mark-go { flex: 1 1 auto; min-width: 0; min-height: 44px; text-align: left; justify-content: flex-start; border: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mark-list .mark-del, .mark-list .mark-ren { flex: none; }
/* 책갈피 이름 붙이기(10-09) — 입력칸은 16px(아이폰 확대 막기) · 44px */
.mark-list .mark-name { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px; font-size: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); margin: 4px 0; }
.mark-list .mark-name-ok { flex: none; min-height: 44px; }
/* 숨긴 시트·숨긴 장(10-11 · docshare hiddenParts) — 맨 위 「숨긴 시트 N개 — 보기」 · 이름 옆 「숨김」 */
.rich-hiddenbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }
.rich-hiddenbar .btn { min-height: 44px; font-size: .9375rem; }
.rich-hiddentag, .rich-mediatag { display: inline-block; font-size: .8125rem; font-weight: 700; line-height: 1.4; padding: 0 8px; border-radius: 999px; border: 1px solid var(--muted); color: var(--sub); vertical-align: middle; }
/* 검토 메모(10-11 · docshare memoBook) — 워드 주석·한글 메모: 달린 글은 옅게 칠하고 「메모 N」 표 · 문서 끝 「검토 메모 N개」 */
.rich mark.rich-memo-at { background: rgba(250, 204, 21, .3); color: inherit; border-bottom: 2px solid #ca8a04; padding: 0; }
.rich-memo-ref { font-size: .75em; vertical-align: super; margin-left: 4px; padding: 0 4px; border-radius: 8px; background: var(--line); color: var(--link-text); text-decoration: none; white-space: nowrap; }
.rich-memo-flash { outline: 3px solid var(--accent); outline-offset: 2px; }
.rich-memos { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--line); }
.rich-memos-title { font-size: 1.0625rem; margin: 0 0 8px; }
.rich-memo-list { list-style: none; padding: 0; margin: 0; }
.rich-memo { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 0 0 8px; background: var(--card); overflow-wrap: anywhere; }
.rich-memo:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.rich-memo.reply { margin-left: 24px; }
.rich-memo-head, .rich-memo-quote { margin: 0 0 4px; }
.rich-memo-who, .rich-memo-quote { color: var(--sub); font-size: .875em; }
.rich-memo-done { display: inline-block; font-size: .8125rem; font-weight: 700; padding: 0 8px; border-radius: 999px; border: 1px solid var(--muted); color: var(--sub); }
.rich-memo-go { min-height: 44px; margin-top: 4px; font-size: .9375rem; }
/* 워드 고친 곳(10-12 · docshare revisionBook) — 넣은 글 밑줄 · 지운 글 줄긋기(색만으로 가르지 않는다) · 맨 위 「고친 곳 N개」 와 켜고 끄기 */
.rich ins.rich-ins { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; color: var(--cmp-add); background: var(--cmp-add-bg); }
.rich del.rich-del { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--cmp-del); background: var(--cmp-del-bg); }
.rich.rich-rev-final ins.rich-ins { text-decoration: none; color: inherit; background: none; }
.rich-revbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }
.rich-revbar .btn { min-height: 44px; font-size: .9375rem; }
.rich-revbar .rich-revsay { flex: 1 1 200px; min-width: 0; margin: 0; }
/* 원래 쪽 나눔(10-13 ⑫) — 쪽 경계는 얇은 선 + 「— 2쪽 —」 · 맨 위 쪽 수와 「N쪽으로 가기」(44px) · 손으로 넣은 나눔만 인쇄에서도 새 쪽 */
.rich-pgbreak { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--sub); font-size: .8125rem; line-height: 1.4; white-space: nowrap; }
.rich-pgbreak::before, .rich-pgbreak::after { content: ''; flex: 1 1 0; min-width: 0; border-top: 1px dashed var(--muted); }
.rich-pagebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }
.rich-pagecount { font-weight: 700; }
.rich-pagego { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.rich-pagego-lab { display: inline-flex; align-items: center; gap: 8px; }
.rich-pagego input { width: 4.5em; min-height: 44px; box-sizing: border-box; padding: 0 8px; font: inherit; color: var(--text); background: var(--card); border: 1px solid var(--muted); border-radius: 8px; }
.rich-pagego .btn { min-height: 44px; font-size: .9375rem; }
.rich-pagego-say { color: var(--sub); font-size: .875rem; }
.rich-pagebar .rich-pagenote { flex: 1 1 100%; margin: 0; }
/* XPS·OXPS 쪽(10-13 ㉑) — 종이처럼 흰 바탕(어두운 화면에서도 · 원래 색 그대로 읽히게) · 글은 쪽 폭에 맞춘 크기(cqw)로 그 자리에 · 고를 수 있다 */
.xps-pnum { margin: 8px 0 8px; color: var(--sub); font-size: .875rem; }
.xps-page { position: relative; width: 100%; margin: 0 auto 8px; background: #fff; color: #000; box-shadow: 0 0 0 1px var(--line), 0 2px 8px rgba(0, 0, 0, .12); overflow: hidden; container-type: inline-size; }
.xps-page > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rich .xps-page > p.xps-g { position: absolute; margin: 0; padding: 0; white-space: pre; line-height: 1; color: #000; font-family: system-ui, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; }
@media print { .xps-page { box-shadow: none; break-inside: avoid; } }
/* 그림 문서(.odg · .vsdx · 10-29) — 도형 안 글을 도형 자리에(쪽 너비 기준 cqw 크기 · 고르기·찾기가 된다) */
.rich .xps-page > .draw-t { position: absolute; margin: 0; padding: 0 .4cqw; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; text-align: center; overflow: hidden; line-height: 1.15; color: #000; font-family: system-ui, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; overflow-wrap: anywhere; }
.rich .xps-page > .draw-t.top { justify-content: flex-start; text-align: start; }
.rich .xps-page > .draw-t > p { margin: 0; }
@media print { .rich-pagebar { display: none; } .rich-pgbreak[data-kind="hard"] { break-before: page; } .rich-pgbreak::before, .rich-pgbreak::after { border-color: #999; } }
/* 엑셀 칸 메모(10-11 · xlsx drawGrid) — 오른쪽 위 빨간 삼각 · 누르면(폰)·고르면(키보드) 칸 아래 메모 글 · 시트 아래 「이 시트 메모 N개」 */
.rich .rich-sheet tbody td.xl-note.xl-note { background-image: linear-gradient(225deg, #dc2626 0 6px, transparent 6px); background-repeat: no-repeat; background-position: top right; background-size: 10px 10px; cursor: pointer; }
/* 엑셀 조건부 서식 데이터 막대(10-13 ⑭) — 칸 바탕에 반투명 띠(값 비율만큼) · 메모 삼각과 같이 있으면 둘 다 */
.rich .rich-sheet tbody td.xl-bar { background-image: linear-gradient(to right, var(--xl-bar-c) var(--xl-bar), transparent var(--xl-bar)); background-repeat: no-repeat; }
.rich .rich-sheet tbody td.xl-bar.xl-note.xl-note { background-image: linear-gradient(225deg, #dc2626 0 6px, transparent 6px), linear-gradient(to right, var(--xl-bar-c) var(--xl-bar), transparent var(--xl-bar)); background-size: 10px 10px, 100% 100%; background-position: top right, 0 0; }
@media print { .rich .rich-sheet tbody td.xl-bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.rich-sheet td.xl-note:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.xl-notes-host { position: relative; }
.xl-note-pop { position: absolute; z-index: 6; width: min(300px, calc(100% - 8px)); box-sizing: border-box; background: var(--card); color: var(--text); border: 1px solid var(--muted); border-radius: 8px; padding: 8px 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, .25); overflow-wrap: anywhere; }
.xl-note-head { margin: 0 0 4px; } .xl-note-who { color: var(--sub); font-size: .875em; }
.xl-note-text { margin: 0 0 8px; white-space: pre-wrap; }
.xl-note-close { min-height: 44px; font-size: .9375rem; }
.xl-note-list { margin: 4px 0 16px; font-size: .9375rem; }
.xl-note-title { margin: 0 0 4px; font-weight: 700; }
.xl-note-list ul { list-style: none; padding: 0; margin: 0; }
.xl-note-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 8px; overflow-wrap: anywhere; }
.xl-note-go { min-height: 44px; font-size: .9375rem; }
.xl-note-go:disabled { opacity: .5; cursor: default; }
.xl-note-li { flex: 1 1 160px; min-width: 0; white-space: pre-wrap; }
.split-mode { border: 0; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 0 16px; } /* 나누기 방법·메모 글자 크기(10-17) — 누를 자리 44px */
.split-mode legend { width: 100%; padding: 0; }
.split-mode label { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.split-zip { display: flex; align-items: flex-start; gap: 8px; min-height: 44px; margin: 4px 0; } /* 나누기 「한 파일(.zip)로」(10-17) */
.split-zip input { width: 22px; height: 22px; margin-top: 4px; flex: none; }
/* 수식(10-18 · 워드 OMML → MathML) — 수학 글꼴 · 따로 줄 수식은 가운데 · 폭이 넘치면 그 줄만 옆으로 */
/* 문서 글자 비율은 docfont.css 로(11-04) */
.rich-mathblock { text-align: center; margin: .6em 0; overflow-x: auto; overflow-y: hidden; max-width: 100%; }
math.rich-math mtd { padding: .15em .5em; } /* 행렬 칸 사이(붙어서 「12」 로 읽혔다) */
/* 고대비 모드(forced-colors · 10-29) — 이 모드는 바탕색을 지우고 시스템 색으로 바꾼다. 바탕색으로만 모양을 낸 것(「파일 열기」·누르는 단추 ·
   알림·새 판 띠·대화상자·아이콘 단추)은 테두리가 없어 글자만 둥둥 떠 단추인지·어디까지가 띠인지 안 보였다(qa-1029-i ③ — 잰 값 테두리 0px) →
   그 모드에서만 시스템 테두리 색을 준다(평소 화면은 그대로) */
@media (forced-colors: active) {
  .btn, button.icon, button#zoomLabel:not(:disabled), button#pageLabel:not(:disabled) { border: 1px solid ButtonBorder; }
  .toast, .update-bar, .sum-bar, .read-bar, .to-top, dialog, dialog.sheet, #tocDialog, #attDialog, #expDialog, #contactDialog, #hitDialog { border: 1px solid CanvasText; } /* 대화상자는 .sheet·#…Dialog 의 border: 0 을 이겨야 한다 */
  .bar, .search { border-bottom: 1px solid CanvasText; }
  .tools { border-top: 1px solid CanvasText; }
  .toast button { border-color: ButtonBorder; }
}
/* 도구줄이 모자랄 때(10-29 · 글자 크기 최대) — view.js fitTools 가 쪽 번호·배율 글이 잘리는 것을 재서 붙인다. 쪽 번호를 윗줄 한 줄로(300px 규칙과 같은 모양) ·
   떠 있는 띠는 두 줄이 된 도구줄 높이(--tools-h) 위로 */
.tools.tight { flex-wrap: wrap; row-gap: 0; }
.tools.tight .grow { display: none; }
.tools.tight button#pageLabel { order: -1; flex: 1 0 100%; }
button#pageLabel { min-width: 44px; } /* 쪽 번호 단추 — 「1 / 2」 처럼 짧으면 39px 로 누르는 자리가 모자랐다(qa-1029-i ②) · 잘림은 위 tight 가 맡는다 */
body.tools-tight:not(.bars-hidden) .read-bar, body.tools-tight:not(.bars-hidden) .sum-bar { bottom: calc(var(--tools-h, 56px) + 8px); }
body.tools-tight:not(.bars-hidden)[data-reading] #autoBar, body.tools-tight:not(.bars-hidden)[data-reading] #richSelBar { bottom: calc(var(--tools-h, 56px) + 76px); }
body.tools-tight:not(.bars-hidden) .toast { bottom: calc(var(--tools-h, 56px) + 12px); }
body.tools-tight:not(.bars-hidden) .to-top { bottom: calc(var(--tools-h, 56px) + 16px); }
body.tools-tight:not(.bars-hidden) .update-bar { bottom: calc(var(--tools-h, 56px) + 64px); }
/* 글자판이 떠 있는 동안(10-29 · view.js kbCheck) — 줄어든 화면 맨 아래에 남은 띠가 쓰고 있는 칸을 가리지 않게 숨긴다. 글자판을 닫으면 그대로 돌아온다 */
body.kb-open .tools, body.kb-open .toast, body.kb-open .sum-bar, body.kb-open .read-bar, body.kb-open .to-top, body.kb-open .update-bar { display: none !important; }
/* 자막(10-30 y · subs.js) — 줄마다 「시각 · 대사」 · 좁은 화면에선 시각 아래로 대사가 내려간다 */
.rich ol.subs { list-style: none; padding: 0; margin: 0; }
.rich ol.subs > li { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.subs-time { color: var(--sub); font-variant-numeric: tabular-nums; font-size: .875em; white-space: nowrap; flex: 0 0 auto; }
.rich .subs-text { flex: 1 1 14em; min-width: 0; margin: 0; white-space: pre-line; }
.subs-lang select { min-height: 48px; max-width: 100%; }
/* 주피터 노트북(10-30 y · notebook.js) — 칸마다 선으로 나누고, 입력·출력 이름은 작게 · 코드·출력은 고정폭(.rich-pre) */
.nb-cell { padding: 8px 0; border-bottom: 1px solid var(--line); }
.rich .nb-label { color: var(--muted); font-size: .8125em; margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.rich .nb-code { margin: 4px 0 8px; padding: 8px; border-radius: 8px; background: var(--bg); }
.rich .nb-err, .rich .nb-err-label { color: #b91c1c; }
@media (prefers-color-scheme: dark) { .rich .nb-err, .rich .nb-err-label { color: #fca5a5; } }
.nb-img { max-width: 100%; height: auto; display: block; margin: 4px 0; }
.rich .mobi-author { color: var(--sub); font-weight: 600; } /* 전자책 MOBI 저자(10-30 y) */
/* 캐드 도면 속 글(10-30 w · dxf.js) — 그림 안 글은 고를 수 없어 아래에 모아 찾기·복사가 되게 */
.dxf-texts { margin: 12px auto; padding: 0 4px; color: var(--text); overflow-wrap: anywhere; }
.dxf-texts summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.dxf-texts p { margin: 4px 0; white-space: pre-wrap; }
/* 개인정보 찾아 가리기(AC-P01 · 10-31) — 찾은 것마다 한 줄 고르기(누를 자리 44px) · 왼쪽 맞춤 */
.pii-list { display: grid; gap: 4px; margin: 8px 0 0; text-align: left; }
.pii-list p { margin: 0 0 4px; line-height: 1.6; }
.pii-list .toggle-row { min-height: 44px; display: flex; align-items: center; gap: 8px; }
.pii-list .toggle-row input { width: 22px; height: 22px; flex: none; }
.pii-list .btn { min-height: 44px; justify-self: start; }
/* 11-06 사장님 🙋1 「예」(보드 #1375) — 찾은 것은 기본으로 모두 고른 채 · 개수와 「빼기」 를 더 크게(빼려는 것만 누르면 된다) */
.pii-list .pii-count { font-size: 1.25rem; font-weight: 700; line-height: 1.4; margin: 0; }
.pii-list .pii-row { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding: 4px 0; }
.pii-list .pii-row .toggle-row { flex: 1 1 auto; min-width: 0; min-height: 48px; }
.pii-list .pii-row .toggle-row span { overflow-wrap: anywhere; }
.pii-list .pii-row .btn { min-height: 48px; min-width: 88px; justify-content: center; font-size: 1rem; }
.pii-list .pii-row.off .toggle-row span { color: var(--sub); text-decoration: line-through; }
/* 가린 결과 → 보내기 준비(11-06 · 회의 261106 D-36 · 시안 R-06 (나) 두 화면) — 폰은 화면 전체 · 넓은 화면은 가운데 480px · 누를 자리 48px · 글자 15px 이상 */
.red-res { margin: 0 auto; border: 0; padding: 0; width: 100%; max-width: 480px; height: 100%; max-height: 100%; background: var(--card); color: var(--text); display: none; flex-direction: column; font-size: .9375rem; }
.red-res[open] { display: flex; }
.red-res::backdrop { background: rgba(0, 0, 0, .45); }
.red-res-top { display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 0 4px; border-bottom: 1px solid var(--line); flex: none; }
.red-res-top h2 { font-size: 1.0625rem; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.red-res-body { flex: 1 1 auto; overflow-y: auto; padding: 16px; }
.red-trust { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--sub); }
.red-trust > svg { flex: none; }
.red-trust-full { display: none; }
.red-trust-short { flex: 1; min-width: 0; }
.red-trust-short summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-height: 48px; cursor: pointer; list-style: none; }
.red-trust-short summary::-webkit-details-marker { display: none; }
.red-trust-short summary b { font-weight: 700; color: var(--text); }
.red-trust-short summary u { margin-left: auto; color: var(--link-text); text-decoration: none; font-weight: 700; white-space: nowrap; }
.red-trust-short p { padding: 0 0 12px; color: var(--text); }
@media (min-width: 560px) { .red-trust-full { display: block; } .red-trust-short { display: none; } }
.red-head { display: flex; gap: 12px; align-items: flex-start; }
.red-pic { width: 48px; height: 48px; border-radius: 12px; background: var(--bg); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.red-pic.red-no { color: var(--danger-text); }
.red-big { font-size: 1.75rem; line-height: 1.3; font-weight: 700; }
.red-sub, .red-file, .red-note, .red-hint { color: var(--sub); }
.red-file, .red-note { margin: 12px 0 0; overflow-wrap: anywhere; }
.red-file b { color: var(--text); }
.red-sec { margin: 24px 0 0; }
.red-sec h3 { font-size: 1.0625rem; margin: 0 0 4px; }
.red-hint { margin: 0 0 8px; }
.red-list, .red-cond { list-style: none; border-top: 1px solid var(--line); }
.red-list li, .red-cond li { border-bottom: 1px solid var(--line); }
/* 가린 곳 줄 — 줄 전체가 스위치(56px) · 상태는 글자로도(「가림」·「안 가림」 — 색만으로 안 말한다) */
.red-sw { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 4px 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.red-sw .what { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.red-sw .what small { display: block; color: var(--sub); font-size: .9375rem; }
.red-sw .st { font-weight: 700; color: var(--sub); white-space: nowrap; }
.red-sw .knob { width: 52px; height: 32px; border-radius: 16px; background: var(--line); position: relative; flex: none; border: 2px solid var(--muted); }
.red-sw .knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 12px; background: var(--card); border: 2px solid var(--muted); box-sizing: border-box; }
.red-sw[aria-checked="true"] .knob { background: var(--accent); border-color: var(--accent); }
.red-sw[aria-checked="true"] .knob::after { left: 22px; border-color: var(--accent); }
.red-sw[aria-checked="true"] .st { color: var(--text); }
.red-mini { padding: 12px; border: 1px solid var(--line); border-radius: 12px; margin: 0 0 16px; align-items: center; }
.red-mini p { color: var(--sub); overflow-wrap: anywhere; }
.red-mini p b { display: block; color: var(--text); }
.red-summary { font-size: 1.25rem; font-weight: 700; line-height: 1.4; margin: 0 0 8px; }
.red-given { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--sub); margin: 0 0 8px; }
.red-cond-form { display: grid; gap: 8px; margin: 0 0 12px; }
.red-field { display: grid; gap: 4px; }
.red-field input { min-height: 48px; font: inherit; font-size: 1rem; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); min-width: 0; }
.red-check { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.red-check input { width: 22px; height: 22px; flex: none; }
.red-cond li { display: flex; gap: 12px; padding: 12px 0; }
.red-cond li > svg { flex: none; }
.red-cond .txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.red-cond .k { color: var(--sub); }
.red-cond .say { display: block; font-weight: 700; }
.red-cond .note { display: block; color: var(--sub); }
.red-cond .ok { color: var(--accent-text); } .red-cond .chk { color: var(--warn-ink); } .red-cond .no { color: var(--danger-text); }
.red-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 48px 16px; }
.red-state h3 { font-size: 1.25rem; }
.red-prog { width: 100%; max-width: 280px; height: 8px; }
.red-act { flex: none; border-top: 1px solid var(--line); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--card); }
.red-row { display: flex; gap: 8px; }
.red-row .btn { flex: 1 1 0; min-width: 0; justify-content: center; }
.red-row .btn.plain { flex: 0 0 auto; }
.red-wide { width: 100%; min-height: 56px; font-size: 1.0625rem; justify-content: center; }
/* 상태 — 그 상태 이름이 없는 data-s 는 숨긴다 */
.red-res[data-state="result"] [data-s]:not([data-s~="result"]), .red-res[data-state="ready"] [data-s]:not([data-s~="ready"]),
.red-res[data-state="empty"] [data-s]:not([data-s~="empty"]), .red-res[data-state="wait"] [data-s]:not([data-s~="wait"]),
.red-res[data-state="error"] [data-s]:not([data-s~="error"]) { display: none !important; }
@media print { .red-res { display: none !important; } }
/* 숨은 정보 지운 사본(AC-P02 · 10-31) — 문서 정보 칸 바로 아래 · 누를 자리 44px */
#expMetaClean { min-height: 44px; margin: 0 4px 8px; }
#expMetaClean[hidden] { display: none; }
/* 전자서명 띠(AC-P05 · 10-31) — 서명 뒤 고침이 있으면 경고 색(글자만 · 밝은·어두운 화면 둘 다 읽히는 경고 색) */
.sig-bar p { margin: 0 0 4px; line-height: 1.6; }
.sig-bar .sig-warn { color: var(--warn-ink); font-weight: 700; }
/* 펼친 책 두 쪽 나누기(CS-05 · 10-31) — 사진은 창 폭 안 · 막대는 누르기 쉽게 */
.book-canvas { display: block; max-width: 100%; height: auto; max-height: 55vh; width: auto; margin: 8px 0; border-radius: 8px; touch-action: pan-y; cursor: ew-resize; } /* 11-03 — 가로 화면에서도 막대·단추가 창 안에 남게 높이 상한 · 옆으로 끌면 선이 옮겨진다 */
.book-range { width: 100%; min-height: 44px; }
/* 창 본문 굴리기(11-03 · 명세 CS-05 · 앱 점수표 결함 2) — 그림이 높아도 막대·차례·단추까지 굴려 닿는다 */
#bookDialog { overflow-y: auto; overscroll-behavior: contain; }
#bookDialog .goto-actions .btn { min-height: 44px; }
/* 신분증 차례 · A4 위 미리보기(11-03 · 명세 CS-01 68~75줄) — 쪽은 A4 비율 흰 종이 · 카드 자리는 view.js 가 % 로(PDF 와 같은 셈) */
.photo-id { margin: 12px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.photo-id h3 { margin-top: 0; }
.photo-id-ask { font-weight: 600; }
.photo-id-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-id-btns .btn, #photoIdAddBack { min-height: 44px; flex: 1 1 140px; }
.photo-id-page { position: relative; width: min(72%, 260px); aspect-ratio: 595.28 / 841.89; margin: 8px auto; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.photo-id-card { position: absolute; display: block; object-fit: fill; background: #e5e7eb; }
/* 용량 줄이기 진행 창·결과 창(11-03 · 앱 6231d40 과 같게) — 띠는 창 너비 · 큰 줄 하나 · 단추 줄바꿈(375px 넘침 없게) · 단추 48px(.btn) */
.shrink-prog { width: 100%; height: 12px; margin: 12px 0 4px; accent-color: var(--accent); }
.shrink-res p { margin: 8px 0 0; overflow-wrap: anywhere; }
.shrink-res .shrink-big { font-size: 1.25rem; font-weight: 700; margin-top: 0; }
.shrink-res-actions { flex-wrap: wrap; }

/* ─── 글 바로잡기(11-06 · 회의 261104_원본글고치기 시안 A · fixui.js) — 온 화면 창 · 줄 고르기 · 입력 시트 · 견주기 ─── */
.fix-new { border-color: var(--accent); }
.fix-tag { display: inline-block; margin-left: 4px; padding: 0 8px; border: 1px solid var(--accent); border-radius: 8px; color: var(--accent-text); font-size: .8125rem; font-weight: 700; vertical-align: middle; }
.fix-sheet { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border: 0; border-radius: 0; padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); box-sizing: border-box; background: var(--card); color: var(--text); overflow-y: auto; }
.fix-sheet[open] { display: flex; flex-direction: column; gap: 8px; }
.fix-top { display: flex; align-items: center; gap: 8px; min-height: 48px; }
.fix-top h2 { flex: 1; min-width: 0; font-size: 1.0625rem; margin: 0; overflow-wrap: anywhere; }
.fix-back { min-height: 44px; flex: none; }
.fix-sub { margin: 0; }
.fix-pages { display: grid; gap: 12px; }
.fix-page { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.fix-page-no { margin: 0 0 4px; font-size: .8125rem; color: var(--sub); font-weight: 700; }
.fix-ln { display: block; width: 100%; min-height: 44px; padding: 8px; border: 1px dashed var(--line); border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: .9375rem; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.fix-ln.no { color: var(--muted); background: var(--line); border-style: solid; }
.fix-ln.done { border: 2px solid var(--accent); }
.fix-ln.done::after { content: " · 고침"; color: var(--accent-text); font-weight: 700; font-size: .8125rem; }
:lang(en) .fix-ln.done::after { content: " · fixed"; }
.fix-ln.on { border: 2px solid var(--accent); }
.fix-ln:focus-visible, .fix-in:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fix-state { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--line); color: var(--text); font-size: .9375rem; }
.fix-state-ic { flex: none; width: 24px; height: 24px; color: var(--sub); }
.fix-state-ic svg { width: 24px; height: 24px; }
.fix-state-tx { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fix-state .btn { min-height: 44px; flex: none; }
.fix-input { position: sticky; bottom: 0; padding: 12px; border: 1px solid var(--line); border-radius: 16px 16px 0 0; background: var(--card); box-shadow: 0 -4px 16px rgba(0, 0, 0, .16); }
.fix-input-top { position: static; border-radius: 16px; }
.fix-fld { display: block; font-size: .8125rem; color: var(--sub); margin-bottom: 4px; }
.fix-in { display: block; width: 100%; min-height: 48px; box-sizing: border-box; padding: 8px 12px; border: 2px solid var(--accent); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; font-size: 1.0625rem; }
.fix-say { margin: 8px 0; font-size: .9375rem; color: var(--sub); }
.fix-say b { color: var(--text); }
.fix-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 0; }
.fix-row .btn { min-height: 48px; }
.fix-row .btn:not(.plain) { flex: 1; }
.fix-row .btn[disabled] { opacity: .45; }
.fix-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.fix-actions .btn { min-height: 44px; }
.fix-cmp { display: grid; gap: 4px; }
.fix-big-label { margin: 12px 0 4px; font-size: .8125rem; font-weight: 700; color: var(--sub); }
.fix-zoom { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 8px; overflow-x: auto; }
.fix-zoom.after { border: 2px solid var(--accent); }
.fix-zoom-text { color: #14171f; font-size: 1.75rem; line-height: 1.35; overflow-wrap: anywhere; }
.fix-crop { display: block; max-width: 100%; height: auto; }
.fix-measure { margin: 8px 0; padding: 0; list-style: none; }
.fix-measure li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.fix-what { display: block; font-size: .8125rem; color: var(--sub); }
.fix-warn { margin: 8px 0; padding: 12px; border-radius: 12px; border: 1px solid var(--note-line, #d97706); font-size: .9375rem; }
.fix-check { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; margin: 8px 0; font-size: .9375rem; cursor: pointer; }
.fix-check input { flex: none; width: 24px; height: 24px; margin: 0; }
/* 언어 바꾸기 단추(11-07 · §2-UI UI9 · 약식 회의 261107_약식_언어단추) — 앱 안에선 숨김(앱은 ENGLISH_READY 전 · 반쪽 영어 화면 막기 §2-DUAL)
   문서를 연 좁은 폰(430px 이하)에선 막대에서 빼고 더보기 줄로 — 「파일 열기」 가 둘째 줄로 밀려 qa-1012 ⑧ 이 깨진다(로고 그림 숨김과 같은 까닭) */
.in-app #btnLang, .in-app #moreLang { display: none; }
@media (max-width: 430px) { body:not(.has-tabs) .bar:has(.name:not(:empty)) #btnLang { display: none; } } /* 11-12 QA 게이트 Q21 — 뒤로가기로 첫 화면에 와도 언어 단추가 숨은 채였다 · 문서 화면에서만 */
#langDialog .lang-pick { margin: 0; }
/* 문서를 연 동안 폰 크롬의 「당겨서 새로고침」 을 막는다 — 한 번 당기면 보던 문서·가린 곳·넣은 글이 사라졌다(11-07 7 자체검사 UX · 최근 기억은 기본 꺼짐이라 되살릴 길도 없다) · 첫 화면은 그대로 */
html:has(> body.doc-open), body.doc-open { overscroll-behavior-y: contain; } /* 화면 굴림이 html 에서 일어나는 브라우저도 */

/* PDF 제자리 고치기(fixinplace-pdf.js · 베타 · 꺼짐) — 스크립트 안 <style> 은 CSP 가 막아 여기로(11-12) · 덮는 글 상자는 종이(늘 흰색) 위라 흰 바탕·검은 글 그대로 */
.ipdf-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.ipdf-mark { position: absolute; border-bottom: 2px dotted var(--accent); pointer-events: none; box-sizing: border-box; }
.ipdf-hit { position: absolute; transform: translateY(-50%); min-width: 44px; padding: 0; margin: 0; border: 0; background: transparent; cursor: text; pointer-events: auto; }
.ipdf-hit:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; }
.ipdf-mark.ipdf-done { border: 2px dashed var(--accent); background: #fff; color: #111; overflow: hidden; white-space: nowrap; line-height: 1; display: flex; align-items: center; }
.ipdf-mark.ipdf-bad { border-style: solid; border-color: #b91c1c; }
.ipdf-input { position: absolute; z-index: 6; min-height: 44px; box-sizing: border-box; padding: 0 4px; border: 2px solid var(--accent); border-radius: 4px; background: #fff; color: #111; pointer-events: auto; transform: translateY(-50%); }