/* ============ 글 내 티커 자동 툴팁 (1단계 MVP) ============ */

.ticker-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.85em;
  font-family: inherit;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color 0.15s, border-color 0.15s;
}

.ticker-badge-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
}

.ticker-badge.ticker-up {
  color: #d24f45;
  background: rgba(210, 79, 69, 0.08);
}
.ticker-badge.ticker-down {
  color: #1261c4;
  background: rgba(18, 97, 196, 0.08);
}
.ticker-badge.ticker-flat {
  color: #6b7280;
  background: rgba(107, 114, 128, 0.08);
}

.ticker-badge:hover,
.ticker-badge.ticker-badge-active {
  border-color: currentColor;
}

.ticker-tooltip {
  position: absolute;
  z-index: 9999;
  max-width: 300px; /* 차트가 들어가면서 260 -> 300 (가독성) */
  min-width: 200px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  background: var(--ticker-tt-bg, #ffffff);
  color: var(--ticker-tt-text, #111827);
  border: 1px solid var(--ticker-tt-border, #e2e8f0);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 10px 12px;
}

.ticker-tooltip-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 13.5px;
}

.ticker-tooltip-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
}

.ticker-tooltip-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 2px 0;
}

.ticker-tooltip-label {
  color: var(--ticker-tt-label, #6b7280);
  font-size: 12px;
  flex-shrink: 0;
}

.ticker-tooltip-value {
  font-weight: 600;
  text-align: right;
}

.ticker-tooltip-value.ticker-up { color: #d24f45; }
.ticker-tooltip-value.ticker-down { color: #1261c4; }
.ticker-tooltip-value.ticker-flat { color: #6b7280; }

.ticker-tooltip-link {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--ticker-tt-border, #e2e8f0);
  font-size: 12px;
  text-decoration: none;
  color: #2563eb;
}
.ticker-tooltip-link:hover { text-decoration: underline; }

/* ============ 툴팁 차트 (일/주/월 탭) ============ */

.ticker-tooltip-chart {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--ticker-tt-border, #e2e8f0);
  min-width: 260px; /* 시세 텍스트만으로는 툴팁이 200px까지 좁아져 차트가 답답해 보임 -> 차트가 폭을 벌림 */
}

.ticker-chart-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

.ticker-chart-tab {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--ticker-tt-border, #e2e8f0);
  background: transparent;
  color: var(--ticker-tt-label, #6b7280);
  cursor: pointer;
}

.ticker-chart-tab.active {
  background: #6366f1;
  border-color: #6366f1;
  color: #ffffff;
}

/* 네이버 차트 PNG는 흰 배경이라 다크모드 툴팁 안에서도 흰 카드로 자연스럽게 보이게 유지 */
.ticker-chart-img {
  display: block;
  width: 100%;
  border-radius: 6px;
  background: #ffffff;
}

/* ============ 언급 종목 요약 박스 (3단계) ============ */

.ticker-mentioned-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.ticker-mentioned-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #6b7280;
  margin-right: 4px;
  flex-shrink: 0;
}

.ticker-mentioned-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* 2026-07-28: 다크모드를 OS 설정(prefers-color-scheme) 기준으로 판정하던 버그 수정 -
   이 스킨의 다크모드는 사용자가 누르는 토글 스위치가 html.dark 클래스를 켜는 방식이라
   OS가 라이트여도 사이트는 다크일 수 있다(그 반대도 마찬가지). 그동안 이 위젯만 media
   query를 써서 토글과 무관하게 동작했던 게 실제 버그 원인 - html.dark #컨테이너ID
   !important 패턴(CLAUDE.md 규칙)으로 통일한다. .ticker-mentioned-box/.ticker-badge는
   본문(.post-single-body) 안에 렌더링돼 사이트 공통 "다크모드 글자색 강제 흰색" 블랑켓
   규칙(style.css)의 영향을 받으므로 !important 필수 - 이게 없으면 박스 배경은 그대로 흰색인데
   글자만 흰색으로 덮어써져서 흰 바탕에 흰 글자로 안 보이게 된다(실제로 리포트된 증상).
   색은 사이트에 이미 있는 "크림 카드" 다크모드 배색(#F5EFE0 배경 + #1A1A1A 테두리/글자,
   js/foreign-flow.js 매물대 위젯과 동일 조합)을 그대로 재사용해 일관성을 맞춘다. */
html.dark .ticker-tooltip {
  --ticker-tt-bg: #F5EFE0;
  --ticker-tt-text: #1A1A1A;
  --ticker-tt-border: #1A1A1A;
  --ticker-tt-label: #55523f;
}
html.dark .ticker-tooltip-value.ticker-up { color: #b23a32; }
html.dark .ticker-tooltip-value.ticker-down { color: #0d4a94; }
html.dark .ticker-tooltip-value.ticker-flat { color: #55523f; }
html.dark .ticker-tooltip-link { color: #0d4a94; }

html.dark .post-single-body .ticker-mentioned-box {
  background: #F5EFE0 !important;
  border-color: #1A1A1A !important;
}
html.dark .post-single-body .ticker-mentioned-title { color: #1A1A1A !important; }

/* 본문에 인라인으로 붙는 티커 배지(자동 툴팁)도 같은 블랑켓 규칙에 걸려 상승/하락 색이
   전부 흰색으로 덮어써지던 문제라 함께 고친다. 배지가 놓이는 배경이 둘로 나뉘므로 색도
   나눈다 - 본문 텍스트 사이(다크 배경) 인라인 배지는 밝은 톤, .ticker-mentioned-box(크림
   카드) 안 배지는 원래 라이트모드 색(진한 톤)을 그대로 !important로 보호만 한다. 뒤의
   .ticker-mentioned-box 규칙이 선택자 특이성이 더 높아 앞 규칙보다 우선 적용된다. */
html.dark .post-single-body .ticker-badge.ticker-up { color: #e8776d !important; background: rgba(232, 119, 109, 0.14) !important; }
html.dark .post-single-body .ticker-badge.ticker-down { color: #6fa8e8 !important; background: rgba(111, 168, 232, 0.14) !important; }
html.dark .post-single-body .ticker-badge.ticker-flat { color: #b9c0cc !important; background: rgba(185, 192, 204, 0.12) !important; }

html.dark .post-single-body .ticker-mentioned-box .ticker-badge.ticker-up { color: #d24f45 !important; background: rgba(210, 79, 69, 0.10) !important; }
html.dark .post-single-body .ticker-mentioned-box .ticker-badge.ticker-down { color: #1261c4 !important; background: rgba(18, 97, 196, 0.10) !important; }
html.dark .post-single-body .ticker-mentioned-box .ticker-badge.ticker-flat { color: #55523f !important; background: rgba(0, 0, 0, 0.06) !important; }