/* frontend/css/reader.css */
/* EUNHA — 실험용 리더 모드 (전자책 + 보이스북) */
/* 메인 브레이크포인트: iPad Mini portrait (744px) */

/* ============================================================
   1. 헤더 토글 버튼
   ============================================================ */
.header-reader-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: rgba(34, 139, 34, 0.08);
  color: var(--green);
  border: 1px solid rgba(34, 139, 34, 0.2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  margin-right: 8px;
  position: relative;
}
.header-reader-btn:hover {
  background: rgba(34, 139, 34, 0.14);
  border-color: rgba(34, 139, 34, 0.35);
}
.header-reader-btn[aria-pressed="true"] {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.header-reader-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  margin-left: 2px;
  background: #fff3cd;
  color: #856404;
  font-size: 9px;
  font-weight: 800;
  border-radius: 6px;
  line-height: 1.3;
  letter-spacing: 0.4px;
}
.header-reader-btn[aria-pressed="true"] .header-reader-badge {
  background: rgba(255, 255, 255, 0.92);
  color: var(--green);
}

@media (max-width: 600px) {
  .header-reader-btn span:not(.header-reader-badge) { display: none; }
  .header-reader-btn { padding: 7px 9px; }
}

/* ============================================================
   2. 리더 모드 활성화 시 기존 UI 숨김
   ============================================================ */
body.reader-mode-active #inputPanel,
body.reader-mode-active #leftPanel,
body.reader-mode-active #rightPanel,
body.reader-mode-active #extrasPanel,
body.reader-mode-active #siteFooter,
body.reader-mode-active #mobileBottomBar,
body.reader-mode-active #mobileBottomBarFill,
body.reader-mode-active #usageDashboard {
  display: none !important;
}
body.reader-mode-active {
  padding: 0;
  background: #fafaf6;
}
body.reader-mode-active #app {
  display: block;
  padding: 0;
  margin: 0;
  max-width: none;
}
body.reader-mode-active #mainHeader {
  max-width: none;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(34, 139, 34, 0.12);
  margin: 0 0 0;
  position: sticky;
  top: 0;
  z-index: 50;
}

/* ============================================================
   3. 리더 컨테이너
   ============================================================ */
#readerContainer {
  display: block;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  min-height: calc(100dvh - 64px);
  position: relative;
}
#readerContainer[hidden] {
  display: none !important;
}

.reader-view {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 64px);
}
.reader-view[hidden] {
  display: none !important;
}

/* ============================================================
   4. 플로잉 뷰 (전자책 줄글)
   ============================================================ */
.reader-flowing-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-bottom: 1px solid rgba(34, 139, 34, 0.08);
}
.reader-flowing-title {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.reader-flowing-meta {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.reader-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(34, 139, 34, 0.18);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.12s;
}
.reader-icon-btn:hover {
  background: rgba(34, 139, 34, 0.06);
  border-color: rgba(34, 139, 34, 0.3);
}

.reader-flowing-body {
  flex: 1;
  padding: 28px 28px 160px;
  font-family: "Iowan Old Style", "Charter", "Georgia", "Noto Serif KR", "Apple SD Gothic Neo", serif;
  font-size: 18px;
  line-height: 1.85;
  color: #1a1a1a;
  letter-spacing: 0.005em;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: break-word;
  /* 롱프레스 시 iOS/Android 텍스트 선택 콜아웃(복사 메뉴) 차단 */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.reader-empty-hint {
  color: var(--muted);
  font-size: 15px;
  text-align: center;
  padding: 80px 16px;
  font-style: italic;
}
.reader-sent {
  display: inline;
  cursor: pointer;
  border-radius: 4px;
  padding: 1px 2px;
  margin: 0 -2px;
  transition: background 0.18s, color 0.18s;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.reader-sent:hover {
  background: rgba(34, 139, 34, 0.06);
}
.reader-sent.playing {
  background: rgba(34, 139, 34, 0.16);
  color: #0f5e0f;
  box-shadow: inset 0 -2px 0 rgba(34, 139, 34, 0.6);
}
.reader-sent.tapped {
  background: rgba(34, 139, 34, 0.32);
  color: #0a4a0a;
}
.reader-sent.long-pressed {
  background: rgba(34, 139, 34, 0.42);
  color: #0a4a0a;
  box-shadow: 0 0 0 2px rgba(34, 139, 34, 0.5);
  transition: background 0.1s, box-shadow 0.1s;
}

/* 원문 단락 구분: 빈 줄 한 행. 들여쓰기는 첫 문장만 살짝. */
.reader-para-break {
  display: block;
  height: 1.1em;
  width: 100%;
}
.reader-flowing-body .reader-para-break + .reader-sent::before {
  content: "";
  display: inline-block;
  width: 1.2em;
}

/* 플로잉 뷰 하단 컨트롤 (sticky) — 단일 재생 행 */
.reader-flowing-controls {
  position: sticky;
  bottom: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(34, 139, 34, 0.12);
  padding: 14px 20px calc(14px + var(--safeBottom)) 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10;
}
.reader-flow-playback {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.reader-flow-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.reader-flow-side {
  display: flex;
  align-items: center;
}
.reader-flow-side-left { justify-content: flex-start; }
.reader-flow-side-right { justify-content: flex-end; }
.reader-autoplay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 12px;
  background: #fff;
  color: var(--green);
  border: 1px solid rgba(34, 139, 34, 0.22);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
  white-space: nowrap;
}
.reader-autoplay-btn:hover {
  background: rgba(34, 139, 34, 0.08);
  border-color: rgba(34, 139, 34, 0.4);
}
.reader-autoplay-btn[aria-pressed="true"] {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  box-shadow: 0 2px 8px rgba(34, 139, 34, 0.28);
}
.reader-autoplay-btn[aria-pressed="true"]:hover {
  background: #1c711c;
  border-color: #1c711c;
}
@media (max-width: 420px) {
  .reader-flow-playback { gap: 12px; }
  .reader-autoplay-btn span { display: none; }
  .reader-autoplay-btn { padding: 8px 10px; }
}
.reader-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(34, 139, 34, 0.25);
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
}
.reader-play-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(34, 139, 34, 0.32);
}
.reader-play-btn:active {
  transform: translateY(0);
}
.reader-nav-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #fff;
  color: var(--green);
  border: 1px solid rgba(34, 139, 34, 0.22);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.12s;
}
.reader-nav-icon-btn:hover:not(:disabled) {
  background: rgba(34, 139, 34, 0.08);
  border-color: rgba(34, 139, 34, 0.4);
}
.reader-nav-icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.reader-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.reader-toggle-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reader-switch {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.reader-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.reader-slider {
  position: absolute;
  inset: 0;
  background: #cfd5cf;
  border-radius: 999px;
  transition: background 0.15s;
}
.reader-slider::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.reader-switch input:checked + .reader-slider {
  background: var(--green);
}
.reader-switch input:checked + .reader-slider::before {
  transform: translateX(16px);
}

/* ============================================================
   5. 분석 뷰 (문장 카드 + 어휘 테이블)
   ============================================================ */
.reader-analysis-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-bottom: 1px solid rgba(34, 139, 34, 0.08);
  background: #fff;
}
.reader-analysis-title {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.reader-analysis-loading {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
}
.reader-analysis-loading[hidden] { display: none; }
.reader-analysis-meta {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.reader-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(34, 139, 34, 0.22);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: reader-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes reader-spin {
  to { transform: rotate(360deg); }
}
.reader-loading-dots {
  display: inline-block;
  min-width: 14px;
  text-align: left;
  letter-spacing: -1px;
}
/* 분석 중일 때 어휘 테이블/문장 카드 살짝 페이드 + 어휘장 자리에 스피너 행 */
.reader-analysis-view[data-loading="true"] .reader-sent-card,
.reader-analysis-view[data-loading="true"] .reader-vocab-section {
  opacity: 0.55;
  transition: opacity 0.2s;
}
.reader-analysis-body {
  flex: 1;
  padding: 20px 24px 140px;
  overflow-y: auto;
  /* 롱프레스 시 iOS/Android 텍스트 선택 콜아웃(복사 메뉴) 차단 */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.reader-vocab-table tbody tr,
.reader-sent-card * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.reader-sent-card {
  background: #fff;
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(34, 139, 34, 0.08);
}
.reader-sent-prev,
.reader-sent-next {
  font-family: "Iowan Old Style", "Charter", "Georgia", "Noto Serif KR", "Apple SD Gothic Neo", serif;
  font-size: 14px;
  line-height: 1.6;
  color: #9a9a9a;
  margin: 0;
  padding: 4px 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.reader-sent-prev:empty,
.reader-sent-next:empty {
  display: none;
}
/* 현재 문장: 상단 후리가나(ja, 한자 구간만) + 하단 직역(슬래시 리딩) — 기본 모드와 동일 레이아웃 */
.reader-sent-current {
  font-family: "Iowan Old Style", "Charter", "Georgia", "Noto Serif KR", "Apple SD Gothic Neo", serif;
  font-size: 19px;
  line-height: 3.1; /* 위 후리가나 + 아래 글로스 공간 */
  color: #0f0f0f;
  font-weight: 500;
  margin: 18px 0 6px;
  padding: 4px 0 12px;
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* 어휘 박스: 일반 span을 inline-block으로 — base는 안쪽 텍스트,
   직역(rv-rt)은 absolute로 base 아래에, 후리가나(rv-read)는 한자 구간 위에 띄움. */
.reader-sent-current .rv-ruby {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  /* line-height를 글자에 맞춰 타이트하게 — 주석을 글자에 바로 붙이기 위함.
     부모(.reader-sent-current)의 line-height는 위·아래 주석 공간 확보용. */
  line-height: 1.05;
  margin: 0 1px;
  padding: 0 2px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.reader-sent-current .rv-ruby .rv-rt {
  position: absolute;
  left: 50%;
  top: calc(100% + 1px); /* 글자 아래(슬래시 리딩) */
  transform: translateX(-50%);
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #4a7a4a;
  line-height: 1;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
/* 후리가나 — 한자 '구간' 위에만 (오쿠리가나·조사 제외) */
.reader-sent-current .rv-kanji {
  position: relative;
}
.reader-sent-current .rv-kanji .rv-read {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 3px);
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 500;
  color: #b03a2e;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
.reader-sent-current .rv-ruby.hl {
  background: rgba(34, 139, 34, 0.18);
  color: #0a4a0a;
}
.reader-sent-current .rv-ruby.hl .rv-rt {
  color: #0a4a0a;
  font-weight: 700;
}
.reader-sent-current .rv-ruby.hl .rv-read {
  color: #7c2418;
}

/* 펼쳐진 묶음 내부의 sub-unit 영역 — 그 부분만 강조 가능 */
.reader-sent-current .rv-sub {
  display: inline;
  border-radius: 3px;
  padding: 0 1px;
  margin: 0 -1px;
  transition: background 0.12s, color 0.12s;
}
.reader-sent-current .rv-sub.hl {
  background: rgba(34, 139, 34, 0.32);
  color: #073d07;
}
/* 펼쳐진 묶음은 점선 밑줄로 펼침 상태 시각화 (선택) */
.reader-sent-current .rv-ruby.expanded-bundle {
  border-bottom: 1px dashed rgba(34, 139, 34, 0.35);
}
/* 자연역: 원문 바로 아래 inline, 라벨 없음, 옅은 색상 */
.reader-sent-nat {
  font-family: "Iowan Old Style", "Charter", "Georgia", "Noto Serif KR", "Apple SD Gothic Neo", serif;
  font-size: 15px;
  line-height: 1.7;
  color: #5a5a5a;
  margin: 4px 0 12px;
  padding: 4px 0 4px 14px;
  border-left: 2px solid rgba(34, 139, 34, 0.25);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.reader-sent-nat:empty {
  display: none;
}
.reader-sent-nat .nat-span {
  display: inline;
  border-radius: 3px;
  padding: 0 2px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.reader-sent-nat .nat-span.hl {
  background: rgba(34, 139, 34, 0.18);
  color: #0a4a0a;
}

/* 어휘 섹션 */
.reader-vocab-section {
  margin-top: 18px;
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px 18px;
  border: 1px solid rgba(34, 139, 34, 0.08);
}
.reader-vocab-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px 10px;
  border-bottom: 1px solid rgba(34, 139, 34, 0.08);
  margin-bottom: 6px;
}
.reader-vocab-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
}
.reader-vocab-status {
  font-size: 11px;
  color: var(--muted);
}
.reader-vocab-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.reader-vocab-table thead th {
  text-align: left;
  padding: 8px 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.4px;
  border-bottom: 1px solid rgba(34, 139, 34, 0.1);
}
.reader-vocab-table th.rv-word { width: 30%; }
.reader-vocab-table th.rv-read { width: 26%; }
.reader-vocab-table th.rv-mean { width: 44%; }
.reader-vocab-table tbody tr {
  cursor: pointer;
  transition: background 0.12s;
}
.reader-vocab-table tbody tr:hover {
  background: rgba(34, 139, 34, 0.04);
}
.reader-vocab-table tbody tr.hl {
  background: rgba(34, 139, 34, 0.12);
}

/* 묶음 행: 약간 강조 + 펼침/접힘 인디케이터 */
.reader-vocab-table tbody tr.reader-vocab-bundle .rv-word {
  font-weight: 700;
}
.reader-vocab-table tbody tr.reader-vocab-bundle .rv-word::after {
  content: " ▾";
  color: var(--green);
  font-size: 11px;
  opacity: 0.7;
  display: inline-block;
  transition: transform 0.18s;
}
.reader-vocab-table tbody tr.reader-vocab-bundle.expanded .rv-word::after {
  transform: rotate(180deg);
  opacity: 1;
}

/* sub-unit 행: 들여쓰기 + 작게 + 점선 구분 */
.reader-vocab-table tbody tr.reader-vocab-sub {
  background: rgba(34, 139, 34, 0.03);
}
.reader-vocab-table tbody tr.reader-vocab-sub td {
  padding: 6px 6px 6px 6px;
  font-size: 12.5px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
  color: #4a4a4a;
  line-height: 1.4;
}
.reader-vocab-table tbody tr.reader-vocab-sub .rv-word {
  padding-left: 18px;
  position: relative;
  color: var(--green);
  font-weight: 500;
}
.reader-vocab-table tbody tr.reader-vocab-sub .rv-word::before {
  content: "↳";
  position: absolute;
  left: 4px;
  color: var(--green);
  opacity: 0.55;
}
.reader-vocab-table tbody tr.reader-vocab-sub.hl {
  background: rgba(34, 139, 34, 0.10);
}
.reader-vocab-table tbody td {
  padding: 9px 6px;
  vertical-align: top;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  line-height: 1.45;
}
.reader-vocab-table tbody tr:last-child td {
  border-bottom: none;
}
.reader-vocab-table .rv-word { font-weight: 600; color: #0f0f0f; }
.reader-vocab-table .rv-read { color: #5a5a5a; font-size: 13px; }
.reader-vocab-table .rv-mean { color: #2a2a2a; }
.reader-vocab-table .rv-empty {
  text-align: center;
  color: var(--muted);
  padding: 24px 6px;
  font-style: italic;
}

/* 분석 뷰 하단 컨트롤 — prev | play/pause | next */
.reader-analysis-controls {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(34, 139, 34, 0.12);
  padding: 10px 16px calc(10px + var(--safeBottom)) 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  z-index: 20;
  max-width: 720px;
  margin: 0 auto;
}

/* ============================================================
   6. 반응형 — iPad Mini 메인, 작은 모바일/큰 데스크탑
   ============================================================ */
/* iPad Mini portrait 기준 (744px) — 위 디폴트가 거의 이 폭에 맞춰져 있음 */

/* 작은 모바일 (~480px) */
@media (max-width: 480px) {
  .reader-flowing-header,
  .reader-analysis-header {
    padding: 10px 16px;
  }
  .reader-flowing-body {
    padding: 22px 18px 180px;
    font-size: 17px;
    line-height: 1.78;
  }
  .reader-analysis-body {
    padding: 14px 14px 160px;
  }
  .reader-sent-card {
    padding: 16px 14px;
    border-radius: 12px;
  }
  .reader-sent-current {
    font-size: 17px;
  }
  .reader-vocab-section {
    padding: 12px 12px 16px;
  }
  .reader-flowing-controls {
    padding: 10px 14px calc(10px + var(--safeBottom)) 14px;
    gap: 10px;
  }
  .reader-play-btn {
    width: 46px;
    height: 46px;
  }
}

/* 데스크탑 (~900px+) — 책 같은 중앙 정렬 */
@media (min-width: 900px) {
  .reader-flowing-body {
    font-size: 19px;
    line-height: 1.9;
    padding: 40px 56px 180px;
  }
  .reader-sent-current {
    font-size: 20px;
  }
}