/* Reader floating menus: right-click context menu and inline evaluation popovers. Loads last. */

.rd-context-menu {
  position: absolute;
  z-index: 10000;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  font-family: inherit;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.rd-context-menu-title {
  font-size: 11px;
  color: var(--text-faint);
  padding: 4px 8px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
  word-break: break-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rd-context-menu-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rd-context-menu-item {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  color: var(--text-muted);
}

.rd-context-menu-item:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* 컬러 바리에이션 */
.rd-context-menu-item.item-danger:hover {
  background: hsla(0, 85%, 95%, 0.8);
  color: hsl(0, 75%, 45%);
}
.rd-context-menu-item.item-warning:hover {
  background: hsla(35, 90%, 94%, 0.8);
  color: hsl(35, 80%, 38%);
}
.rd-context-menu-item.item-primary:hover {
  background: hsla(215, 85%, 95%, 0.8);
  color: hsl(215, 75%, 42%);
}

@media (prefers-color-scheme: dark) {
  .rd-context-menu {
    background: rgba(26, 32, 44, 0.9);
  }
  .rd-context-menu-item.item-danger:hover {
    background: hsla(0, 50%, 20%, 0.5);
    color: hsl(0, 90%, 75%);
  }
  .rd-context-menu-item.item-warning:hover {
    background: hsla(35, 50%, 18%, 0.5);
    color: hsl(35, 90%, 70%);
  }
  .rd-context-menu-item.item-primary:hover {
    background: hsla(215, 50%, 20%, 0.5);
    color: hsl(215, 90%, 75%);
  }
}

/* 6. 인라인 형광펜 마킹 스타일 */
.rd-inline-mark {
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 2px dashed transparent;
  padding: 1px 0;
  border-radius: 2px;
}

/* 어색한 번역체: 빨간색 형광펜 */
.rd-inline-mark.mark-translation-noise {
  background: hsla(0, 85%, 93%, 0.7);
  border-bottom-color: hsla(0, 75%, 45%, 0.4);
}
.rd-inline-mark.mark-translation-noise:hover {
  background: hsla(0, 85%, 88%, 0.9);
  box-shadow: 0 0 4px hsla(0, 75%, 45%, 0.2);
}

/* 논리적 비약 / 알맹이 없음: 노란색 형광펜 */
.rd-inline-mark.mark-logical-leap,
.rd-inline-mark.mark-hollow-content {
  background: hsla(45, 90%, 91%, 0.7);
  border-bottom-color: hsla(45, 80%, 38%, 0.4);
}
.rd-inline-mark.mark-logical-leap:hover,
.rd-inline-mark.mark-hollow-content:hover {
  background: hsla(45, 90%, 85%, 0.9);
  box-shadow: 0 0 4px hsla(45, 80%, 38%, 0.2);
}

/* deep-dive 대상: 파란색 형광펜 */
.rd-inline-mark.mark-deep-dive-target {
  background: hsla(215, 85%, 93%, 0.7);
  border-bottom-color: hsla(215, 75%, 42%, 0.4);
}
.rd-inline-mark.mark-deep-dive-target:hover {
  background: hsla(215, 85%, 88%, 0.9);
  box-shadow: 0 0 4px hsla(215, 75%, 42%, 0.2);
}

/* 다크모드 대응 형광펜 튜닝 */
@media (prefers-color-scheme: dark) {
  .rd-inline-mark.mark-translation-noise {
    background: hsla(0, 50%, 25%, 0.45);
    border-bottom-color: hsla(0, 90%, 75%, 0.5);
    color: inherit;
  }
  .rd-inline-mark.mark-translation-noise:hover {
    background: hsla(0, 50%, 30%, 0.6);
  }

  .rd-inline-mark.mark-logical-leap,
  .rd-inline-mark.mark-hollow-content {
    background: hsla(45, 50%, 22%, 0.45);
    border-bottom-color: hsla(45, 90%, 70%, 0.5);
    color: inherit;
  }
  .rd-inline-mark.mark-logical-leap:hover,
  .rd-inline-mark.mark-hollow-content:hover {
    background: hsla(45, 50%, 28%, 0.6);
  }

  .rd-inline-mark.mark-deep-dive-target {
    background: hsla(215, 50%, 25%, 0.45);
    border-bottom-color: hsla(215, 90%, 75%, 0.5);
    color: inherit;
  }
  .rd-inline-mark.mark-deep-dive-target:hover {
    background: hsla(215, 50%, 30%, 0.6);
  }
}

/* 글 검증 및 후속 방향 평가 상자 */
.rd-eval-box {
  margin: 22px 28px 0;
  padding: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.rd-eval-title {
  font-size: 15.5px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--ink);
}

.rd-eval-desc {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 16px;
  line-height: 1.5;
}

.rd-eval-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 깃허브 스타일 라벨 칩 */
.rd-eval-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  background: var(--surface-2);
  color: var(--muted);
}

.rd-eval-chip-count {
  font-size: 11px;
  opacity: 0.8;
  background: rgba(0, 0, 0, 0.08);
  padding: 1px 6px;
  border-radius: 10px;
}

/* 다크 모드에서의 카운트 배경 조절 */
@media (prefers-color-scheme: dark) {
  .rd-eval-chip-count {
    background: rgba(255, 255, 255, 0.15);
  }
}

/* 컬러 스킨 */
/* danger (번역투/조악함) */
.rd-eval-chip-danger {
  background: hsla(0, 85%, 95%, 0.7);
  color: hsl(0, 75%, 45%);
  border-color: hsla(0, 75%, 45%, 0.15);
}
.rd-eval-chip-danger:hover {
  background: hsla(0, 85%, 90%, 0.9);
}
.rd-eval-chip-danger.is-active {
  background: hsl(0, 75%, 45%) !important;
  color: #fff !important;
  border-color: hsl(0, 75%, 45%) !important;
}

/* warning (알맹이 없음) */
.rd-eval-chip-warning {
  background: hsla(35, 90%, 94%, 0.7);
  color: hsl(35, 80%, 38%);
  border-color: hsla(35, 80%, 40%, 0.15);
}
.rd-eval-chip-warning:hover {
  background: hsla(35, 90%, 88%, 0.9);
}
.rd-eval-chip-warning.is-active {
  background: hsl(35, 80%, 38%) !important;
  color: #fff !important;
  border-color: hsl(35, 80%, 38%) !important;
}

/* success (논리 탄탄) */
.rd-eval-chip-success {
  background: hsla(140, 70%, 94%, 0.7);
  color: hsl(140, 65%, 32%);
  border-color: hsla(140, 65%, 35%, 0.15);
}
.rd-eval-chip-success:hover {
  background: hsla(140, 70%, 88%, 0.9);
}
.rd-eval-chip-success.is-active {
  background: hsl(140, 65%, 32%) !important;
  color: #fff !important;
  border-color: hsl(140, 65%, 32%) !important;
}

/* primary (deep-dive 대상) */
.rd-eval-chip-primary {
  background: hsla(215, 85%, 95%, 0.7);
  color: hsl(215, 75%, 42%);
  border-color: hsla(215, 75%, 42%, 0.15);
}
.rd-eval-chip-primary:hover {
  background: hsla(215, 85%, 90%, 0.9);
}
.rd-eval-chip-primary.is-active {
  background: hsl(215, 75%, 42%) !important;
  color: #fff !important;
  border-color: hsl(215, 75%, 42%) !important;
}

/* info (자연스러움) */
.rd-eval-chip-info {
  background: hsla(185, 80%, 94%, 0.7);
  color: hsl(185, 75%, 32%);
  border-color: hsla(185, 75%, 32%, 0.15);
}
.rd-eval-chip-info:hover {
  background: hsla(185, 80%, 88%, 0.9);
}
.rd-eval-chip-info.is-active {
  background: hsl(185, 75%, 32%) !important;
  color: #fff !important;
  border-color: hsl(185, 75%, 32%) !important;
}

/* 활성 상태 폰트 및 미세 애니메이션 */
.rd-eval-chip:active {
  transform: translateY(1px);
}
.rd-eval-chip.is-active .rd-eval-chip-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}

/* 비로그인 시 호버 효과 제거 및 비활성 처리 */
.rd-eval-chip.is-disabled {
  opacity: 0.75;
}

/* 다크모드 대응 색상 튜닝 */
@media (prefers-color-scheme: dark) {
  .rd-eval-chip-danger {
    background: hsla(0, 50%, 20%, 0.4);
    color: hsl(0, 90%, 75%);
    border-color: hsla(0, 90%, 75%, 0.2);
  }
  .rd-eval-chip-warning {
    background: hsla(35, 50%, 18%, 0.4);
    color: hsl(35, 90%, 70%);
    border-color: hsla(35, 90%, 70%, 0.2);
  }
  .rd-eval-chip-success {
    background: hsla(140, 45%, 16%, 0.4);
    color: hsl(140, 85%, 70%);
    border-color: hsla(140, 85%, 70%, 0.2);
  }
  .rd-eval-chip-primary {
    background: hsla(215, 50%, 20%, 0.4);
    color: hsl(215, 90%, 75%);
    border-color: hsla(215, 90%, 75%, 0.2);
  }
  .rd-eval-chip-info {
    background: hsla(185, 45%, 16%, 0.4);
    color: hsl(185, 85%, 70%);
    border-color: hsla(185, 85%, 70%, 0.2);
  }
}