/* 원문·번역본 동시에 보기 — 큰 창 하나에 왼쪽 원본, 오른쪽 번역본(translation_compare_view.js).
   테마 토큰으로 칠한다. 종이(쪽)만 늘 흰 바탕이다 — 문서는 원래 희다. */

/* 번역 카드(어두운 타일) 아래 단추 */
.summet-artifact-compare {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 13px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--surface-color);
  color: var(--text-color);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.summet-artifact-compare:hover {
  background: var(--sidebar-hover);
  border-color: var(--text-muted);
}

.summet-artifact-compare:active {
  transform: scale(0.97);
}

.ws-compare {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  flex-direction: column;
  background: var(--bg-color);
  color: var(--text-color);
  animation: ws-compare-in 0.2s ease;
}

@keyframes ws-compare-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.ws-compare__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
  background: var(--surface-color);
}

.ws-compare__title {
  min-width: 0;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-compare__hint {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 고른 글의 짝을 못 찾았다 — 잠깐 눈에 띄게 */
.ws-compare__hint--miss {
  color: var(--text-color);
  font-weight: 600;
}

/* 짝 단어를 찾는 중 — 흐리게 깜빡여 기다리는 중임을 알린다 */
.ws-compare__hint--busy {
  animation: ws-compare-busy 1.1s ease-in-out infinite;
}

@keyframes ws-compare-busy {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ws-compare__hint--busy { animation: none; }
}

.ws-compare__close {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.ws-compare__close:hover,
.ws-compare__close:focus-visible {
  background: var(--sidebar-hover);
  color: var(--text-color);
  outline: none;
}

/* 분할 — 왼쪽 폭은 split_pane.js 가 --split-left 로 정한다. */
.ws-compare__body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(200px, var(--split-left, 50%)) 14px minmax(200px, 1fr);
}

.ws-compare__pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ws-compare__pane-head {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
}

.ws-compare__pane-name {
  min-width: 0;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-compare__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--bg-color);
}

.ws-compare__pages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}

.ws-compare__notice {
  padding: 36px 16px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.ws-compare__notice[hidden] { display: none; }

/* 쪽 — 크기를 알기 전에는 A4 비율로 자리를 잡아 둔다(한꺼번에 다 보이는 것으로 읽혀 전부 그려지지 않게). */
.ws-compare__page {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1 / 1.414;
  background: #fff;
  color: #111827;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06), 0 6px 18px rgba(15, 23, 42, 0.06);
}

.ws-compare__page canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* 글 파일 — 쪽 그림 없이 글 칸 하나 */
.ws-compare__page--text {
  aspect-ratio: auto;
  padding: 20px 22px;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ws-compare__line--blank {
  min-height: 1em;
}

/* pdf.js 글자 층(pdf_viewer.css 의 .textLayer) — 투명한 글자를 쪽 그림 위 같은 자리에 깐다.
   clip: hidden 이면 끌어 고르거나 강조한 곳으로 옮길 때 브라우저가 층 안을 스크롤해 글자 층이 그림과 어긋난다(강조가 엉뚱한 줄에 그려졌다). */
.ws-compare .textLayer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  overflow: clip;
  line-height: 1;
  text-align: initial;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  z-index: 2;
}

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

.ws-compare .textLayer span.markedContent {
  top: 0;
  height: 0;
}

/* 고른 글은 브라우저가 글자 조각마다 칠해 겹친 곳은 진하고 낱말 사이는 끊겼다 — 숨기고 .ws-compare__sel 로 줄마다 한 띠를 그린다. */
.ws-compare .textLayer ::selection {
  background: transparent;
}

.ws-compare .textLayer br::selection {
  background: transparent;
}

/* 짝으로 찾은 글 */
/* 강조·고른 글 층 — 글자 층 위에 따로 얹는 칠(글자 층을 고치면 그 안의 선택이 풀린다). 쪽 그림 위·글자 층 아래, 글 파일은 글줄 아래.
   띠는 줄마다 하나(겹쳐 진해지지 않게 테두리 없이). */
.ws-compare__marks,
.ws-compare__sel {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.ws-compare__hl {
  position: absolute;
  border-radius: 2px;
}

.ws-compare__marks .ws-compare__hl {
  background: rgba(250, 204, 21, 0.45);
}

.ws-compare__sel .ws-compare__hl {
  background: rgba(37, 99, 235, 0.28);
}

.ws-compare__page--text .ws-compare__line {
  position: relative;
  z-index: 2;
}

/* 분할선 — 손잡이 모양은 split_pane.css, 여기서는 칸 사이에 놓기만 한다. */
.ws-compare__handle {
  background: var(--surface-color);
}

/* 좁은 화면 — 위(원본)·아래(번역본)로 쌓고 분할선은 없앤다. */
@media (max-width: 760px) {
  .ws-compare__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }

  .ws-compare__handle {
    display: none;
  }

  .ws-compare__hint {
    display: none;
  }
}