/* MODUWORKS Study — 최소 스타일. 프레임워크 없음. */
:root {
  --ink: #222;
  --sub: #666;
  --line: #ddd;
  --accent: #b8562f; /* moduworks 웜톤 액센트 근사치 */
  --bg: #fdfcfa;
}
* { box-sizing: border-box; }
/* [hidden] 속성은 항상 이겨야 한다 — .row 등 display:flex를 주는 클래스와
   함께 쓰이면(예: form-book/form-toc/ingest-startpage) author stylesheet의
   display:flex가 origin 우선순위상 UA 기본 규칙([hidden]{display:none})을
   이겨버려 hidden=true여도 계속 렌더링되는 실제 버그가 있었다(T3 Upload UI
   작업 중 Playwright로 재현·확인). !important로 항상 우선하도록 고정한다. */
[hidden] { display: none !important; }
body {
  margin: 0;
  /* T5.4(§3): standalone PWA(홈 화면 진입)에서 둥근 모서리/홈 인디케이터
     영역에 내용이 가리지 않도록 safe-area-inset을 더한다 — env()를
     지원하지 않는 브라우저에서는 max()가 그냥 기존 24px로 폴백된다. */
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  max-width: 880px;
  margin-inline: auto;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  line-height: 1.5;
}
header { margin-bottom: 24px; }
h1 { font-size: 22px; margin: 0 0 4px; }
.sub { color: var(--sub); font-size: 13px; margin: 0; }
.panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 16px;
  background: #fff;
}
.panel h2 { font-size: 15px; margin: 0 0 12px; }
.hint { color: var(--sub); font-size: 13px; }
.row { display: flex; gap: 8px; margin-bottom: 12px; }
.row.wrap { flex-wrap: wrap; }
.row input, .row select {
  flex: 1;
  min-width: 100px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
}
.row button {
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.row button:hover { opacity: 0.9; }
.list { list-style: none; margin: 0; padding: 0; }
.list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  cursor: pointer;
}
.list li:hover { background: #faf7f4; }
.list li.selected { background: #f6ece5; font-weight: 600; }
.list li .actions { display: flex; gap: 4px; flex-shrink: 0; }
.list li .edit,
.list li .del {
  color: var(--sub);
  font-size: 12px;
  padding: 2px 6px;
  cursor: pointer;
}
.list li .edit:hover { color: var(--accent); }
.list li .del:hover { color: #c0392b; }
.list.toc li { cursor: default; }
.toc .pages { color: var(--sub); font-size: 12px; margin-left: 8px; }
.panel.highlight { border-color: var(--accent); background: #fffaf6; }
.list.batches li { cursor: pointer; font-size: 13px; color: var(--sub); }
.list.batches li:hover { background: #faf7f4; }
.list.pages li {
  cursor: default;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}
.badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #eee;
  color: var(--sub);
  flex-shrink: 0;
}
.badge.ok { background: #e6f4ea; color: #1e7e34; }
.badge.warn { background: #fdecea; color: #c0392b; }
#ingest-startpage { align-items: center; flex-wrap: wrap; background: #fdecea; padding: 10px 12px; border-radius: 8px; }
#ingest-startpage span { flex-basis: 100%; font-size: 13px; color: #922; }
#ingest-startpage input { flex: 0 1 120px; }
.ingest-correct-input { flex: 0 1 90px; margin-left: 8px; font-size: 12px; padding: 2px 6px; }

/* T3D: 목차 가져오기 후보 목록 — list li의 기본 space-between 레이아웃
   대신 가로로 여러 편집 컨트롤을 나열해야 해서 flex-start로 오버라이드한다. */
.list.toc-candidates li.toc-candidate-row {
  justify-content: flex-start;
  gap: 6px;
  flex-wrap: wrap;
}
.list.toc-candidates li.toc-candidate-excluded { opacity: 0.45; }
.toc-candidate-level { flex: 0 0 auto; font-size: 12px; padding: 2px 4px; }
.toc-candidate-title { flex: 1 1 160px; min-width: 100px; font-size: 13px; padding: 3px 6px; }
.toc-candidate-page { flex: 0 0 72px; font-size: 12px; padding: 2px 6px; }
.toc-candidate-parent { flex: 0 1 160px; font-size: 12px; padding: 2px 4px; }
/* T4.2: 홈 화면 "최근 교재 / 내 교재" — 첫 화면의 가장 중요한 요소(§2/§4).
   기존 .list/li 스타일과 달리 정보 2줄(제목/메타) + 버튼 1개를 가로로
   배치해야 해서 별도 클래스로 오버라이드한다. */
.home-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.home-header h2 { margin: 0; }
.home-scan-add {
  padding: 6px 12px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: #fff;
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
}
.home-scan-add:hover { background: #fdf3ec; }
.list.home-books li.home-book-row {
  cursor: default;
  align-items: center;
}
.home-book-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-book-title { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-book-meta { font-size: 12px; color: var(--sub); }
.home-resume-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.home-resume-btn:hover { opacity: 0.9; }

/* T4.4(§6): 학습 영역(관리 영역보다 위)에 배치하는 복습 진입점 — 개수
   텍스트 + 버튼 1개뿐, 별도 dashboard 없음. */
.home-review-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #faf6f2;
}
#home-review-count-text { font-size: 13px; color: var(--sub); }
.home-review-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.home-review-btn:hover { opacity: 0.9; }

/* T4.6(§6): 학습 영역의 검색 진입점 — home-review-entry와 동일한 톤/구조,
   개수 대신 안내 문구 한 줄 + 버튼 1개뿐. */
.home-search-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #faf6f2;
}
.home-search-entry span { font-size: 13px; color: var(--sub); }
.home-search-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.home-search-btn:hover { opacity: 0.9; }

/* T4.4: Review Queue 화면 — panel-viewer와 같은 topbar 패턴 재사용, 본문만
   전용 스타일. */
.review-body { padding: 16px; }
.review-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.review-filter-btn {
  padding: 6px 14px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
}
.review-filter-btn.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.list.review-queue li.review-item {
  cursor: default;
  align-items: center;
}
.review-item-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.review-item-book { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-item-page { font-size: 12px; color: var(--sub); }
.review-item-marks { display: flex; flex-wrap: wrap; gap: 6px; }
.mark-badge {
  padding: 2px 10px;
  border-radius: 999px;
  background: #f0e6dd;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
}
.review-open-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.review-open-btn:hover { opacity: 0.9; }
/* T4.5(§8): "복습 N회 · 최근 M/D" 한 줄 — 배지/그래프 없이 다른 메타
   정보(.review-item-page)와 같은 톤의 보조 텍스트로만 표시한다. */
.review-item-history { font-size: 11px; color: var(--sub); }

/* T4.6(§6): Search 화면 — Review Queue와 같은 topbar/list 패턴 재사용.
   검색창(row wrap) + 결과 목록(review-item과 동일 골격 + snippet 한 줄
   추가)뿐 — 자동완성/하이라이트/그래프 없음. */
.search-body { padding: 16px; }
.search-body .row { margin-bottom: 14px; }
.search-body input[type='text'] { flex: 1; min-width: 160px; }
.list.search-results li.search-item {
  cursor: default;
  align-items: center;
}
.search-item-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.search-item-book { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-item-page { font-size: 12px; color: var(--sub); }
/* snippet(OcrIndex)이 돌려주는 원문 조각을 그대로 보여준다 — 강조/하이라이트
   마크업 없이 일반 텍스트 톤(review-item-history와 동일한 보조 텍스트급)으로만. */
.search-item-snippet {
  font-size: 12px;
  color: var(--sub);
  white-space: pre-wrap;
  word-break: break-word;
}
.search-open-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.search-open-btn:hover { opacity: 0.9; }

/* T4.2(§10): 관리 기능(등록/스캔/목차)을 <details>로 접어 시각적 우선순위를
   낮춘다 — 기능은 그대로, 기본 노출만 줄인다. */
#admin-section { margin-bottom: 16px; }
#admin-section summary {
  cursor: pointer;
  padding: 10px 4px;
  color: var(--sub);
  font-size: 13px;
  font-weight: 600;
  list-style: revert;
}
#admin-section summary:hover { color: var(--accent); }
#admin-section[open] summary { margin-bottom: 8px; }

/* T4: Digital Book Viewer MVP — 데스크톱은 목차 사이드바 + 스캔 페이지
   좌우 배치, iPad(좁은 화면)는 목차를 버튼으로 여닫는 단순 drawer로
   접는다(§10). 애니메이션/새 UI 프레임워크 없이 클래스 토글만 쓴다. */
.viewer-panel { padding: 0; overflow: hidden; }
.viewer-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.viewer-topbar h2 { flex: 1; font-size: 15px; margin: 0; text-align: center; }
.viewer-topbar button {
  flex-shrink: 0;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
}
.viewer-toc-toggle { display: none; }
.viewer-body { display: flex; gap: 16px; padding: 16px; align-items: flex-start; }
.viewer-toc-panel {
  flex: 0 0 220px;
  max-height: 70vh;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  padding-right: 12px;
}
.viewer-toc-panel h3 { font-size: 12px; margin: 0 0 8px; color: var(--sub); text-transform: uppercase; }
.viewer-toc-panel .list.toc li { cursor: pointer; font-size: 13px; }
.viewer-toc-panel .list.toc li.selected { background: #f6ece5; font-weight: 600; }
.viewer-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
/* T5.4(§7): min-width:0 — `.viewer-main`(flex-direction:column)의 flex
   item으로서 이 wrap의 기본 min-width:auto가 내부 img의 content-based
   min sizing을 그대로 물려받아, zoom>100%에서 img에 큰 explicit px
   width를 줄 때 wrap 자신과 그 조상(.viewer-main/.viewer-body)까지
   함께 커져 페이지 전체가 가로로 넘치는 문제가 있었다(overflow:auto가
   가로채야 할 스크롤을 상위 레이아웃이 대신 흡수해버림) — 표준
   flexbox min-width:auto 함정. min-width:0으로 이 wrap이 자기 자신의
   지정 폭(부모가 준 만큼)을 넘어 커지지 않게 고정하면, 그 안의 오버사이즈
   콘텐츠는 이제 정확히 이 wrap의 overflow:auto가 스크롤로 처리한다. */
.viewer-image-wrap { text-align: center; overflow: auto; max-height: 75vh; min-width: 0; }
/* §6: 원본 비율 유지 — 리사이즈/캔버스 가공 없음. 뷰포트보다 이미지가
   크면 이 wrap의 overflow:auto 스크롤이 처리한다.
   T5.4(§7): "100% 이내" 제약과 zoom 배율 적용을 여기(CSS max-width)가
   아니라 app.js의 applyViewerZoom()이 JS로 직접 계산해 width(px)를
   대입한다 — CSS에 max-width를 남겨두면 width(px)와 동시 적용되어
   zoom>100%를 다시 100%로 눌러버리므로(스펙상 최종 폭=min(width,
   max-width)) 의도적으로 비워둔다. height:auto만으로 비율은 계속
   유지된다. (기존 transform 기반 zoom이 `.viewer-image-wrap`의
   overflow:auto 스크롤 범위 계산과 어긋나 150%에서 좌측/하단 일부가
   도달 불가능했던 문제의 근본 수정 — ADR-030 "T5.4 확장" 참조.) */
.viewer-image-wrap img { height: auto; display: block; }
.viewer-image-wrap .hint { padding: 48px 12px; }
/* T5.1(ADR-030): img를 감싸는 stage — border/radius를 여기로 옮겨(img
   자체는 border 없음) canvas가 img와 정확히 같은 content box를 덮게
   한다(1px border 오차 방지). T5.4(§7)부터 이 엘리먼트는 transform이
   아니라 자식 img의 실제 width(app.js applyViewerZoom)를 그대로
   shrink-wrap한다 — img/canvas가 여전히 항상 같은 크기로 함께 커지므로
   필기 코드는 zoom 값을 몰라도 된다(Part A §5 설계 그대로 유지). */
.viewer-page-stage {
  position: relative;
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.viewer-annotation-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* T5.3(§14): pan-x/pan-y만 허용 — annotation ON 상태에서도 canvas가
     pointer-events의 hit-test 대상이지만, 손가락 pan은 브라우저가 네이티브로
     처리하도록 위임한다(pen/mouse는 JS의 ev.preventDefault()가 개별 억제하므로
     무관). pinch-zoom/double-tap-zoom은 이 값에 포함되지 않아 계속 비활성 —
     기존 버튼 기반 Viewer zoom 정책을 그대로 유지한다. */
  touch-action: pan-x pan-y;
}
/* §12 OFF: canvas가 포인터 이벤트를 가로채지 않아 기존 스크롤/줌/
   페이지 이동이 전부 그대로 동작한다. */
.viewer-annotation-canvas:not(.drawing-on) { pointer-events: none; }
/* T5.2(§17): compact 확장 — 필기 토글/색상 3/굵기 3/지우개/실행취소를
   한 줄에 담되, 좁은 폭에서는 flex-wrap으로 줄바꿈만 허용한다(모달/대형
   GoodNotes식 툴바 금지, §17). iPad 터치 타겟은 44px 안팎을 목표로 한다. */
.viewer-annotation-toolbar { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; row-gap: 8px; }
.viewer-annotation-toolbar button {
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
}
.viewer-annotation-toolbar button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.viewer-annotation-toolbar button:disabled { opacity: 0.4; cursor: default; }
.viewer-annotation-group { display: inline-flex; align-items: center; gap: 4px; }
/* 색상 스와치 — 현재 선택된 색은 겹 테두리(inset 흰 링 + 바깥 색 링)로
   눈에 띄게 표시한다(§17 "현재 color가 명확히 보임"). */
.annotation-swatch {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--swatch-color);
  padding: 0;
  cursor: pointer;
}
.annotation-swatch[aria-pressed="true"] {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px #fff inset, 0 0 0 4px var(--swatch-color);
}
/* 굵기 버튼 — 같은 점(●) 기호를 크기만 다르게 렌더링해 얇게/보통/굵게를
   시각적으로 직관적으로 구분한다(§17 "현재 width가 명확히 보임"). */
.annotation-width-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  color: var(--ink);
  line-height: 1;
  padding: 0;
}
.annotation-width-btn[data-width-key="thin"] { font-size: 10px; }
.annotation-width-btn[data-width-key="normal"] { font-size: 15px; }
.annotation-width-btn[data-width-key="thick"] { font-size: 22px; }
.annotation-width-btn[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.viewer-controls { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.viewer-controls button {
  padding: 6px 16px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.viewer-controls button:disabled { background: #ccc; cursor: default; }
.viewer-page-label {
  min-width: 64px;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
}
/* T4.2(§8, 선택): 확대/축소 컨트롤 — prev/next와 같은 줄, 새 UI 프레임워크 없음. */
.viewer-zoom { display: flex; align-items: center; gap: 6px; }
.viewer-zoom button {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: #eee;
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
}
.viewer-zoom button:hover { background: #e2e2e2; }
#viewer-zoom-label {
  min-width: 44px;
  text-align: center;
  font-size: 12px;
  color: var(--sub);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* T4.2(§9): Viewer 안에서도 "스캔 추가"로 바로 갈 수 있는 진입점 —
   기존 .viewer-topbar button 규칙을 그대로 물려받는다(별도 스타일 불필요). */

/* T4.3(§5~§9, ADR-026): Study Mark 툴바 — 페이지 이미지 바로 아래,
   prev/next 컨트롤 위에 위치한다. inactive=outline(테두리만),
   active=filled(배경 채움)로 색 하나에 의존하지 않고 aria-pressed도
   함께 쓴다(§7). flex-wrap으로 좁은 화면에서 2줄까지 자연스럽게
   줄바꿈되고, 가로 스크롤은 절대 생기지 않는다(§6). */
.viewer-mark-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 4px 0;
}
.mark-btn {
  padding: 6px 14px;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.mark-btn:hover:not(:disabled) { background: #f6ece5; }
.mark-btn.active {
  background: var(--accent);
  color: #fff;
}
.mark-btn:disabled { opacity: 0.45; cursor: default; }

/* T4.5(§2/§8): 복습 완료 — Study Mark 툴바 바로 아래, 완전히 분리된
   한 줄. 버튼 하나 + 컴팩트한 보조 텍스트뿐, 별도 카드/박스 없음. */
.viewer-review-complete {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 2px 0 8px;
  flex-wrap: wrap;
}
#btn-review-complete {
  padding: 6px 16px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
#btn-review-complete:hover:not(:disabled) { opacity: 0.9; }
#btn-review-complete:disabled { background: #ccc; cursor: default; }
.viewer-review-feedback { font-size: 12px; color: var(--sub); }

@media (max-width: 900px) {
  .viewer-toc-toggle { display: inline-block; }
  .viewer-topbar h2 { text-align: left; }
  /* T5.4(§7): 좁은 화면(≤900px)에서 `.viewer-body`가 column 방향으로
     바뀌면 cross axis가 세로→가로로 바뀐다. 데스크톱(row)에서는
     `align-items: flex-start`가 toc-panel과 main의 높이를 서로
     강제로 맞추지 않기 위한 의도였지만, column 모드에서는 이 값이
     그대로 "가로 폭 stretch 안 함"으로 해석되어 `.viewer-main`/
     `.viewer-image-wrap`이 부모 폭에 고정되지 않고 내용(zoom된 img)
     만큼 스스로 커져버렸다 — 150% zoom처럼 이미지가 뷰포트보다 커지면
     wrap 내부 스크롤(overflow:auto)이 아니라 조상 전체가 화면 밖으로
     밀려나 `#panel-viewer`의 overflow-x:hidden에 잘리는, 도달 불가능한
     영역이 생기는 원인이었다(100%/125%처럼 결과 폭이 우연히 뷰포트
     안에 들어올 때는 드러나지 않았다). column 모드에서만 stretch로
     되돌려 `.viewer-main`이 항상 부모 폭에 고정되게 하면, 그 안의
     `.viewer-image-wrap`이 어떤 zoom 배율에서도 자기 폭을 넘는 내용을
     항상 자신의 overflow:auto 스크롤로 정확히 처리한다. */
  .viewer-body { flex-direction: column; padding: 12px; align-items: stretch; }
  .viewer-toc-panel {
    display: none;
    width: 100%;
    max-height: 40vh;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding-right: 0;
    padding-bottom: 12px;
    margin-bottom: 4px;
  }
  .viewer-body.toc-open .viewer-toc-panel { display: block; }

  /* T4.2(§6): iPad 등 터치 환경에서 터치 타깃을 넉넉하게 — Apple HIG의
     44pt 권장 최소 크기에 맞춘다(기존 6px 16px 패딩은 마우스 기준이라
     좁았다). */
  .viewer-topbar button,
  .viewer-controls button,
  .home-resume-btn,
  .home-scan-add,
  .home-review-btn,
  .home-search-btn,
  .review-open-btn,
  .review-filter-btn,
  .search-open-btn,
  #btn-search-submit {
    padding: 12px 18px;
    min-height: 44px;
  }
  .viewer-zoom button { min-height: 44px; min-width: 44px; padding: 8px; }
  .mark-btn { padding: 12px 16px; min-height: 44px; font-size: 14px; }
  #btn-review-complete { padding: 12px 18px; min-height: 44px; font-size: 14px; }

  /* T4.4/T4.6: 좁은 화면에서 진입 바/목록 item이 세로로 쌓이도록 —
     home-book-row와 같은 패턴, 가로 스크롤 방지(§15 L/M 동일 원칙). */
  .home-review-entry { flex-wrap: wrap; }
  .home-search-entry { flex-wrap: wrap; }
  .list.review-queue li.review-item { flex-wrap: wrap; }
  .list.search-results li.search-item { flex-wrap: wrap; }
}

.error {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: #c0392b;
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
}