/* frontend/css/pdfViewer.css */
/* EUNHA — PDF 뷰어 모드 (Phase 1 M1) */

#pdfViewerContainer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #2d2d2d;
  flex-direction: column;
  color: #e8e8e8;
}

/* 뷰어 활성 시 본문 스크롤/스크롤바 차단 */
body.pdf-viewer-active {
  overflow: hidden;
}

/* 툴바 */
.pv-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 14px;
  background: #1f1f1f;
  border-bottom: 1px solid #3a3a3a;
  flex-shrink: 0;
}
.pv-toolbar button,
.pv-toolbar .pv-pageBox {
  background: #3a3a3a;
  color: #e8e8e8;
  border: 1px solid #4a4a4a;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.pv-toolbar button:hover:not(:disabled) {
  background: #4a4a4a;
  border-color: #5a5a5a;
}
.pv-toolbar button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pv-toolbar .pv-exit {
  background: #5a3a3a;
  border-color: #6a4a4a;
  margin-left: 16px;
}
.pv-toolbar .pv-exit:hover {
  background: #7a4a4a;
}
.pv-toolbar .pv-pageBox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
}
.pv-toolbar .pv-pageBox input {
  width: 50px;
  padding: 2px 4px;
  background: #1f1f1f;
  border: 1px solid #4a4a4a;
  border-radius: 4px;
  color: #e8e8e8;
  text-align: center;
  font-size: 13px;
}
.pv-toolbar .pv-pageCounter {
  font-size: 13px;
  color: #b8b8b8;
  min-width: 70px;
  text-align: center;
}
.pv-toolbar-sep {
  width: 1px;
  height: 22px;
  background: #4a4a4a;
  margin: 0 6px;
}
.pv-toolbar #pvOverlayToggle[aria-pressed="true"],
.pv-toolbar #pvNatToggle[aria-pressed="true"],
.pv-toolbar #pvSideToggle[aria-pressed="true"],
.pv-toolbar #pvOcrToggle[aria-pressed="true"] {
  background: var(--green, #228b22);
  border-color: var(--green, #228b22);
  color: #fff;
}

/* OCR 가상 textLayer span — PDF.js native span과 같은 transparent 패턴 */
.pv-textLayer .pv-ocr-line {
  color: transparent;
  text-align: left;
}
.pv-textLayer .pv-ocr-line[data-vid] {
  cursor: pointer;
}

/* OCR 출처 어휘 행 — 약한 시각 구분, 본문 어휘와 동일 인터랙션 */
.pv-vocab-row.pv-vocab-ocr {
  background: rgba(34, 139, 34, 0.04);
}
.pv-vocab-row.pv-vocab-ocr:hover,
.pv-vocab-row.pv-vocab-ocr.hl {
  background: rgba(34, 139, 34, 0.18);
}
.pv-ocr-badge {
  display: inline-block;
  margin-right: 4px;
  font-size: 10px;
  opacity: 0.75;
  vertical-align: middle;
}

/* 사이드 패널 접힘 상태 */
.pv-side.collapsed {
  width: 0 !important;
  border-left: none;
  overflow: hidden;
}

/* body: 좌측 페이지 + 우측 사이드 패널 */
.pv-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

/* 페이지 영역 */
.pv-pageWrap {
  flex: 1;
  overflow: auto;
  padding: 28px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
/* 페이지 묶음 — 박스 그림자 */
.pv-pageStack {
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  overflow: hidden;
}
.pv-page {
  position: relative;
  background: #fff;
}

/* 분석 중 페이지 오버레이 */
.pv-page.analyzing::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  z-index: 5;
  pointer-events: none;
}
.pv-page.analyzing::before {
  content: '⏳ 분석 중...';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  background: rgba(31, 31, 31, 0.92);
  color: #fff;
  padding: 10px 18px;
  border-radius: 22px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.pv-canvas {
  display: block;
}

/* PDF.js native textLayer — selectable text overlay
   v4 패턴: span은 transparent, position absolute, scale-factor 변수 사용 */
.pv-textLayer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  text-align: initial;
  overflow: hidden;
  opacity: 1;
  line-height: 1;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  caret-color: CanvasText;
  z-index: 1;
  user-select: text;
  -webkit-user-select: text;
}
.pv-textLayer span,
.pv-textLayer br {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}
.pv-textLayer ::selection {
  background: rgba(34, 139, 34, 0.35);
  color: transparent;
}
.pv-textLayer ::-moz-selection {
  background: rgba(34, 139, 34, 0.35);
  color: transparent;
}
.pv-textLayer .endOfContent {
  display: block;
  position: absolute;
  inset: 100% 0 0;
  z-index: -1;
  cursor: default;
  user-select: none;
}
.pv-textLayer .endOfContent.active {
  inset: 0;
}

/* textLayer 단어 — 분석된 단어는 옅은 점선 underline (정보 있다는 힌트). 호버 시 강조 */
.pv-textLayer span[data-vid] {
  cursor: pointer;
  text-decoration: underline dotted rgba(34, 139, 34, 0.55);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
/* 하이라이트: span 자체엔 배경 없음.
   같은 vid의 인접 span을 줄별로 묶어 underlay 박스를 동적 생성 (`_renderHighlightUnderlay`).
   장점: 인접 span 사이 띄어쓰기/공백까지 자연 메움 + 박스가 하나라 중첩 진해짐 X.
   span의 :hover는 mouseover JS가 underlay를 그리므로 별도 처리 불필요. */

/* Underlay 레이어 — canvas 위, textLayer span 아래 (z-index 0).
   underlay 박스는 호버/재생 시 동적 생성, _clearHighlight/페이지 이동 시 제거. */
.pv-underlayLayer {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 0;
}
.pv-text-hl {
  position: absolute;
  background: rgba(34, 139, 34, 0.30);
  border-radius: 3px;
  pointer-events: none;
}
.pv-text-hl.playing {
  background: rgba(255, 200, 0, 0.35);
}

/* Ruby 오버레이 — textLayer 위에 absolute 배치 */
.pv-rubyOverlay {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  pointer-events: none;
}
.pv-ruby {
  position: absolute;
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: #0d4d0d;
  /* 배경 제거 — 줄간격 좁은 곳에서 가려짐 방지. 가독성은 흰 outline으로 확보 */
  background: transparent;
  text-shadow:
    0 0 3px #fff,
    0 0 2px #fff,
    0 0 2px #fff,
    1px 0 0 #fff,
    -1px 0 0 #fff,
    0 1px 0 #fff,
    0 -1px 0 #fff;
  border-radius: 3px;
  padding: 0 2px;
  /* 자연 폭 + 단어 중심 정렬 (긴 번역 잘림 방지). nowrap으로 한 줄 유지 */
  white-space: nowrap;
  overflow: visible;
  text-align: center;
  line-height: 1.15;
  letter-spacing: -0.02em;
  box-sizing: border-box;
  /* JS에서: left = 단어 중심 X, transform: translateX(-50%) */
}
.pv-ruby.hl,
.pv-ruby.active-sent,
.pv-ruby[data-transient="1"] {
  z-index: 5; /* 호버/활성 ruby가 옆 ruby와 충돌해도 위에 오도록 */
}
.pv-ruby.hl {
  color: #fff;
  text-shadow:
    0 0 3px #228b22,
    0 0 2px #228b22,
    1px 0 0 #228b22,
    -1px 0 0 #228b22,
    0 1px 0 #228b22,
    0 -1px 0 #228b22;
}

/* Inline 자연역 — 문장 마지막 줄 아래, 페이지 콘텐츠 좌측에 정렬
   배경 제거 + 흰 outline 가독성 → 줄간격 좁은 곳에서 다른 줄 안 가림 */
.pv-nat-inline {
  position: absolute;
  /* left / max-width / top / font-size 는 JS에서 동적 설정 */
  box-sizing: border-box;
  background: transparent;
  /* 자연역: 의역/해석 톤 — 다크 티얼 + italic으로 ruby(직역, 초록 정자체)와 시각적 구분 */
  color: #1f5a6e;
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  font-weight: 600;
  font-style: italic;
  padding: 0 4px;
  /* 본문에 밀착 — line-height 1.1로 위 여백 최소화 */
  line-height: 1.1;
  letter-spacing: -0.01em;
  pointer-events: auto;
  z-index: 3;
  word-break: break-word;
  display: inline-block;
  text-shadow:
    0 0 3px #fff,
    0 0 2px #fff,
    0 0 2px #fff,
    1px 0 0 #fff,
    -1px 0 0 #fff,
    0 1px 0 #fff,
    0 -1px 0 #fff;
}
/* 호버 활성 — 기존 색상 톤 유지 + 더 진한 색 + 컬러 halo로 강조 (역할 시각 구분 유지) */
.pv-ruby.active-sent,
.pv-ruby[data-transient="1"] {
  color: #053a05; /* 진한 초록 (기본 #0d4d0d보다 더 진하게) */
  text-shadow:
    0 0 4px rgba(5, 58, 5, 0.35),
    0 0 3px #fff,
    0 0 2px #fff,
    1px 0 0 #fff,
    -1px 0 0 #fff,
    0 1px 0 #fff,
    0 -1px 0 #fff;
}
.pv-nat-inline.active-sent,
.pv-nat-inline[data-transient="1"] {
  color: #0e3a4a; /* 진한 티얼 (기본 #1f5a6e보다 더 진하게) */
  text-shadow:
    0 0 4px rgba(14, 58, 74, 0.35),
    0 0 3px #fff,
    0 0 2px #fff,
    1px 0 0 #fff,
    -1px 0 0 #fff,
    0 1px 0 #fff,
    0 -1px 0 #fff;
}
.pv-nat-inline .pv-align-span {
  border-radius: 2px;
  padding: 0 1px;
  cursor: help;
  transition: background 0.12s;
}
.pv-nat-inline .pv-align-span:hover,
.pv-nat-inline .pv-align-span.hl {
  background: rgba(34, 139, 34, 0.32);
  color: #0a3a0a;
}

/* 사이드 패널 */
.pv-side {
  width: 340px;
  flex-shrink: 0;
  background: #1f1f1f;
  border-left: 1px solid #3a3a3a;
  color: #e8e8e8;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pv-side-header {
  padding: 12px 14px;
  border-bottom: 1px solid #3a3a3a;
  font-size: 13px;
  font-weight: 800;
  color: #d8d8d8;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.pv-side-status {
  font-size: 11px;
  font-weight: 500;
  color: #909090;
}
.pv-vocab {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.pv-vocab-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid #2a2a2a;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s;
}
.pv-vocab-row:hover,
.pv-vocab-row.hl {
  background: rgba(34, 139, 34, 0.15);
}
.pv-vocab-word {
  font-weight: 800;
  color: #fff;
  word-break: break-word;
}
.pv-vocab-read {
  font-size: 12px;
  color: #909090;
  word-break: break-word;
}
.pv-vocab-mean {
  color: #c8c8c8;
  word-break: break-word;
}

/* 복합어휘 토글 (▾/▴) — 어휘장 행 안 작은 버튼 */
.pv-sub-toggle {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  background: transparent;
  color: #7fbf7f;
  border: 1px solid rgba(127, 191, 127, 0.35);
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.4;
  cursor: pointer;
  vertical-align: middle;
}
.pv-sub-toggle:hover {
  background: rgba(34, 139, 34, 0.18);
  border-color: rgba(127, 191, 127, 0.6);
}
.pv-vocab-row.pv-vocab-bundle.expanded {
  background: rgba(34, 139, 34, 0.08);
}

/* Sub-row — 펼쳐진 묶음의 구성 단어 */
.pv-sub-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 8px;
  padding: 5px 14px 5px 22px;
  background: #1a1a1a;
  border-bottom: 1px solid #262626;
  font-size: 12px;
  color: #a8a8a8;
  cursor: pointer;
  transition: background 0.12s;
}
.pv-sub-row:hover {
  background: rgba(34, 139, 34, 0.12);
}
.pv-sub-word {
  color: #d0d0d0;
  font-weight: 600;
}
.pv-sub-mean {
  color: #b0b0b0;
  font-style: italic;
}

/* 모바일 — M1은 데스크탑 우선, 좁은 화면에서 안내 */
@media (max-width: 720px) {
  .pv-pageWrap {
    padding: 12px 8px;
  }
  .pv-toolbar {
    gap: 6px;
    padding: 8px 6px;
    flex-wrap: wrap;
  }
  .pv-toolbar button,
  .pv-toolbar .pv-pageBox {
    padding: 4px 8px;
    font-size: 12px;
  }
}

/* iPad 세로/가로 — 사이드 폭 축소 + 페이지 패딩 절약 */
@media (max-width: 1024px) {
  .pv-side {
    width: 280px;
  }
  .pv-pageWrap {
    padding: 16px 12px;
  }
}
@media (max-width: 820px) {
  .pv-side {
    width: 240px;
  }
  .pv-vocab-row,
  .pv-sub-row {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px;
  }
  .pv-toolbar {
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* 터치 기기(iPad 등) — iOS Safari의 long-press 컨텍스트 메뉴/텍스트 선택 차단.
   롱프레스는 코르지나 저장 인터랙션으로 사용되므로 native UI와 충돌하면 안 됨. */
@media (pointer: coarse) {
  .pv-textLayer,
  .pv-textLayer span,
  .pv-vocab-row,
  .pv-sub-row {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  .pv-textLayer span[data-vid] {
    cursor: pointer;
  }
}

/* 헤더 PDF 토글 (reader 토글과 같은 패턴) */
.header-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  color: var(--green, #228b22);
  border: 1px solid rgba(34, 139, 34, 0.35);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s, opacity 0.12s;
}
.header-pdf-btn:hover:not(:disabled) {
  background: rgba(34, 139, 34, 0.10);
}
.header-pdf-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.header-pdf-btn[aria-pressed="true"] {
  background: var(--green, #228b22);
  color: #fff;
}