/* ─────────────────────────────────────────────────────────────────────────
 * 지수 대시보드 — prototype-v2 SoT: user-portal/index/index.html (inline <style>)
 *   ADR 0016 mobile-first — min-width 미디어 쿼리만, 768/1024 토큰.
 *   모바일에서는 14컬럼 시세표 → 핵심 5컬럼만 노출, 나머지는 가로 스크롤.
 * ──────────────────────────────────────────────────────────────────────── */

.idx-layout {
  padding: 8px 20px;
  max-width: var(--container-max);
  margin: 0 auto;
  overflow-x: clip;
}
@media (min-width: 768px) {
  .idx-layout { padding: 12px 40px; }
}

/* 목록 페이지 2단 구성 — 핵심 지표는 좌측, AI 해석은 우측 보조 영역 */
.idx-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-lg);
  align-items: start;
}
.idx-main-column { min-width: 0; }
.idx-sidebar { min-width: 0; }
@media (min-width: 1280px) {
  .idx-content-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--spacing-xl); }
  .idx-sidebar { position: sticky; top: 90px; }
}

/* ── Header ───────────────────────────────────────────────────────── */
.idx-page-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: var(--spacing-lg);
}
@media (min-width: 768px) {
  .idx-page-header { flex-direction: row; justify-content: space-between; align-items: flex-end; }
}
.idx-page-header h1 { font-size: 22px; font-weight: 800; margin: 0 0 6px; color: var(--text-main); }
@media (min-width: 768px) { .idx-page-header h1 { font-size: 26px; } }
.idx-page-header p { margin: 0; color: var(--text-muted); font-size: 13px; }
.idx-header-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* 검토의견서 #27 — text-dim(#CBD5E1)은 흰 배경 대비 미달 → text-secondary(4.5:1 충족) */
.idx-header-actions .stamp { font-size: 11px; color: var(--text-secondary); }

.idx-error-banner {
  background: var(--bg-accent-red, #fee2e2);
  color: #b91c1c; /* #9 — danger #dc2626 은 빨강 틴트 위 4.39:1 미달 (다크는 하단 override) */
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 13px;
}
[data-theme='dark'] .idx-error-banner { color: #fecaca; }

.idx-loading-note {
  color: var(--text-muted);
  font-size: 13px;
  padding: 12px;
}

/* ── Treemap ───────────────────────────────────────────────────── */
/* UI-20 (V1.7.2) — 지수 화면 톤 절제.
   최상위 프레임은 트리맵 섹션 1개만 남기고, 나머지 구획은 면·음영·구분선으로 표현한다. */
.idx-treemap-section {
  background: var(--surface-1, var(--bg-surface));
  border: none;
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--surface-1-shadow, none);
}
.idx-treemap-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
@media (min-width: 768px) {
  .idx-treemap-header { flex-direction: row; justify-content: space-between; align-items: flex-end; }
}
/* 검토의견서 #28 — 섹션 타이틀 크기 통일(16px) */
.idx-treemap-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}
.idx-treemap-title i { color: var(--primary); }
.idx-treemap-desc { font-size: 12px; color: var(--text-muted); }
.idx-treemap-legend {
  display: flex;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
}
/* #9 — 구 색상(#3b82f6 3.67:1 / #ef4444 3.76:1) 흰 배경 미달 → 접근성 트렌드 토큰 사용 */
.idx-treemap-legend .lg-down { color: var(--color-down); }
.idx-treemap-legend .lg-flat { color: var(--text-muted); }
.idx-treemap-legend .lg-up { color: var(--color-up); }

.idx-treemap-canvas {
  display: grid;
  /* minmax(0,1fr) — 언더스코어 지수명(신조선가_벌커_CAPE 등)은 줄바꿈이 안 돼
     min-content 가 1fr 트랙을 뚫고 패널 밖으로 카드가 삐져나온다 → 트랙 min 0 강제 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 768px) { .idx-treemap-canvas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .idx-treemap-canvas { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.idx-tm-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px;
  border-radius: var(--radius-md);
  /* UI-20 — 트리맵 타일: 섹션 내부이므로 테두리 제거(가라앉는 음영으로 구분) */
  border: none;
  background: var(--surface-1-sunken, var(--bg-darker));
  color: var(--text-main);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  min-height: 86px;
  min-width: 0;
}
.idx-tm-block:hover { transform: translateY(-2px); border-color: var(--primary); }
/* 전일대비 등락 색상 — 증권 관례: 상승 빨강 / 하락 파랑 / 보합 회색 */
.idx-tm-block.tm-up   { background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.03)); border-color: rgba(239, 68, 68, 0.25); }
.idx-tm-block.tm-down { background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.03)); border-color: rgba(59, 130, 246, 0.25); }
.idx-tm-block.tm-flat { background: var(--bg-darker); }

/* 맞춤 보기 — 구독 중인 지수 강조.
   트리맵은 "시장 종합"이라 보기 범위와 무관하게 전체 시장을 그리고, 개인화는 강조로 표현한다. */
.idx-tm-block { position: relative; }
.idx-tm-block.is-sub { box-shadow: inset 0 0 0 2px var(--primary); }
.idx-tm-sub-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}
.idx-tm-name { font-size: 13px; font-weight: 800; color: var(--text-main); max-width: 100%; overflow-wrap: anywhere; }
.idx-tm-value { font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }
.idx-tm-change { font-size: 12px; font-weight: 800; margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.idx-tm-change.tm-up   { color: #ef4444; }
.idx-tm-change.tm-down { color: #3b82f6; }
.idx-tm-change.tm-flat { color: var(--text-muted); }
.idx-tm-change .idx-tm-pct { font-size: 11px; font-weight: 700; opacity: 0.85; }
.idx-tm-change .idx-tm-flat-dash { color: var(--text-muted); }

/* ── Overview Section ──────────────────────────────────────────── */
/* UI-20 — 지표 리스트 섹션: 외곽 프레임 제거, 상단 구분선 + 여백으로 구획 */
.idx-overview-section {
  background: transparent;
  border: none;
  border-top: 1px solid var(--surface-divider, var(--glass-border));
  border-radius: 0;
  padding: 16px 2px 0;
  margin-bottom: 16px;
}
.idx-overview-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
@media (min-width: 1024px) {
  .idx-overview-toolbar { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
}
/* 검토의견서 #28 — 섹션 타이틀 크기 통일(16px) */
.idx-section-label {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  animation: live-pulse 1.6s infinite;
  display: inline-block;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.idx-overview-tools {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
@media (min-width: 768px) { .idx-overview-tools { flex-direction: row; align-items: center; flex-wrap: wrap; } }

/* 지수명 검색 */
.idx-search {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 7px 12px; border: 1px solid var(--glass-border); border-radius: 8px;
  background: var(--bg-surface); width: 260px; max-width: 100%;
}
.idx-search i { color: var(--text-muted); font-size: 13px; flex-shrink: 0; }
.idx-search input {
  flex: 1; min-width: 0; outline: none;
  /* 전역 input 규칙(0,3,1)이 더 강해 !important 로 이김 — 안쪽 박스(2겹) 제거 */
  width: auto !important; border: none !important; background: none !important; padding: 0 !important;
  font-size: 14px; font-family: inherit; color: var(--text-main);
}

.idx-category-menu {
  border-bottom: 1px solid var(--surface-divider, var(--glass-border));
  margin-bottom: 12px;
}
.idx-cat-chips {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.idx-cat-chips::-webkit-scrollbar { display: none; }
.idx-cat-chip {
  position: relative;
  flex-shrink: 0;
  padding: 10px 14px;
  margin-bottom: -1px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.idx-cat-chip:hover:not(.active) { color: var(--text-main); }
.idx-cat-chip.active {
  background: transparent;
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.idx-cat-chip.is-my i { color: #f59e0b; }

.idx-fav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.idx-fav-toggle input[type=checkbox] { cursor: pointer; }
.idx-fav-toggle i { color: #f59e0b; }

/* ── Quote Table ──────────────────────────────────────────────── */
/* UI-20 — 시세표: 외곽 테두리 제거(행 구분선이 이미 구조를 만든다) */
.idx-quote-table-wrap {
  overflow-x: hidden;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
}
.idx-quote-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  min-width: 0;
  table-layout: fixed;
}
.idx-quote-table thead {
  background: var(--bg-darker);
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.idx-quote-table th, .idx-quote-table td {
  padding: 9px 9px;
  text-align: left;
  border-bottom: 1px solid var(--glass-border);
  white-space: nowrap;
}
.idx-quote-table .qt-col-name { width: 21%; }
.idx-quote-table .qt-col-category { width: 88px; }
.idx-quote-table .qt-col-price { width: 72px; }
.idx-quote-table .qt-col-change { width: 92px; }
.idx-quote-table .qt-col-rate { width: 68px; }
.idx-quote-table .qt-col-prev { width: 76px; }
.idx-quote-table .qt-col-range { width: 124px; }
.idx-quote-table .qt-col-trend { width: 82px; }
.idx-quote-table .qt-col-date { width: 88px; }
.idx-quote-table th.qt-num, .idx-quote-table td.qt-num { text-align: right; font-variant-numeric: tabular-nums; }
.idx-quote-table th.qt-fav, .idx-quote-table td.qt-fav { width: 36px; text-align: center; }
.idx-quote-table th.qt-sortable { cursor: pointer; user-select: none; }
.idx-quote-table th.qt-sortable:hover { color: var(--primary); }
.idx-quote-table tbody tr { cursor: pointer; transition: background 0.12s; }
.idx-quote-table tbody tr:hover { background: var(--bg-surface); }

/* 행 끝 상세 이동 버튼 — 검토의견서 #29: ↗(새 탭 오해) 제거, '상세 ›' 텍스트 버튼(동일창 이동). */
.idx-quote-table th.qt-go, .idx-quote-table td.qt-go { width: 68px; text-align: center; }
.idx-qt-go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-decoration: none;
  border: 1px solid var(--glass-border);
  white-space: nowrap;
}
.idx-qt-go i { font-size: 10px; }
.idx-qt-go:hover { color: var(--primary); border-color: var(--primary); }

/* 상세 페이지 헤더의 목록 복귀 링크 */
.idx-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
}
.idx-detail-back:hover { color: var(--primary); }
.idx-quote-table .qt-strong { font-weight: 800; color: var(--text-main); }
.idx-quote-table .qt-dim { color: var(--text-muted); }
.idx-quote-name { font-weight: 700; color: var(--text-main); }
.idx-quote-change-value { display: block; }
.idx-quote-change-basis {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-muted);
}
/* 이슈 #93(검토의견서 #3) — 지수 약어 아래 국문 풀네임 병기 */
.idx-quote-korname {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.idx-ticker-korname {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
}
.idx-related-korname {
  display: block;
  margin-top: 1px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.idx-star-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  font-size: 13px;
  font-family: inherit;
}
.idx-star-btn:hover, .idx-star-btn.on { color: #f59e0b; }

.idx-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--bg-darker);
  color: var(--text-secondary);
}
/* 검토의견서 #30 / 이슈 #91 — 카테고리 색을 전 화면 공통 토큰으로 통일.
   As-Is 는 분류와 토큰이 어긋나 건화물에 컨테이너 색(--cat-freight), 컨테이너에 선가 색(--cat-shipprice)이
   들어가고 거시엔 색이 없었다. 분류명과 토큰명을 1:1로 맞춘 4종으로 재정의한다.
   (대시보드 CAT_COLOR = container/bulker/tanker/shipprice/macro 와 동일 기준) */
.idx-cat-badge.cat-container { background: color-mix(in srgb, var(--cat-container) 14%, transparent); color: var(--cat-container); }
.idx-cat-badge.cat-bulker    { background: color-mix(in srgb, var(--cat-bulker) 14%, transparent);    color: var(--cat-bulker); }
.idx-cat-badge.cat-tanker    { background: color-mix(in srgb, var(--cat-tanker) 14%, transparent);    color: var(--cat-tanker); }
.idx-cat-badge.cat-macro     { background: color-mix(in srgb, var(--cat-macro) 14%, transparent);     color: var(--cat-macro); }
.idx-cat-badge.cat-shipprice { background: color-mix(in srgb, var(--cat-shipprice) 14%, transparent); color: var(--cat-shipprice); }
.idx-cat-badge.cat-freight   { background: color-mix(in srgb, var(--cat-freight) 14%, transparent);   color: var(--cat-freight); }
.idx-cat-badge.cat-commodity { background: color-mix(in srgb, var(--cat-commodity) 14%, transparent); color: var(--cat-commodity); }
/* #9 — 다크에선 틴트 배경이 어두워져 원 톤이 4.5:1 미달 → 밝은 변형 텍스트로 대비 확보. */
[data-theme='dark'] .idx-cat-badge.cat-container { color: var(--cat-container-ondark); }
[data-theme='dark'] .idx-cat-badge.cat-bulker    { color: var(--cat-bulker-ondark); }
[data-theme='dark'] .idx-cat-badge.cat-tanker    { color: var(--cat-tanker-ondark); }
[data-theme='dark'] .idx-cat-badge.cat-macro     { color: var(--cat-macro-ondark); }
[data-theme='dark'] .idx-cat-badge.cat-shipprice { color: var(--cat-shipprice-ondark); }
[data-theme='dark'] .idx-cat-badge.cat-freight   { color: var(--cat-freight-ondark); }
[data-theme='dark'] .idx-cat-badge.cat-commodity { color: var(--cat-commodity-ondark); }

/* 52주 위치 — 시세표 셀 미니 막대 (저점→고점 그라데이션 + 현재값 dot). prototype qt-range 정합. */
.idx-quote-table td.idx-qt-range { min-width: 0; }

/* 5MA·20MA는 상세 차트에서 제공하므로 종합 표에서 제외한다.
   좁은 화면은 우선순위가 낮은 보조 열을 단계적으로 감춰 가로 스크롤 없이 핵심 값만 유지한다. */
@media (max-width: 1199px) {
  .idx-quote-table .qt-col-prev,
  .idx-quote-table .qt-col-range { display: none; }
  .idx-quote-table .qt-col-name { width: 26%; }
}
@media (max-width: 767px) {
  .idx-quote-table { font-size: 12px; }
  .idx-quote-table th, .idx-quote-table td { padding: 9px 5px; }
  .idx-quote-table .qt-col-category,
  .idx-quote-table .qt-col-rate,
  .idx-quote-table .qt-col-trend,
  .idx-quote-table .qt-col-date { display: none; }
  .idx-quote-table .qt-col-name { width: 42%; }
  .idx-quote-korname { overflow: hidden; text-overflow: ellipsis; }
}
.idx-qt-range-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  /* 증권 관례: 좌(저점, 파랑) → 중(주황) → 우(고점, 빨강). alpha 로 dim (dot 은 선명 유지). */
  background: linear-gradient(to right, rgba(59, 130, 246, 0.45) 0%, rgba(245, 158, 11, 0.45) 50%, rgba(239, 68, 68, 0.45) 100%);
}
.idx-qt-range-dot {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  background: var(--text-main);
  border: 2px solid var(--bg-surface);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.idx-qt-range-tick {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.idx-qt-empty { text-align: center; padding: 32px; color: var(--text-muted); font-size: 13px; }

.idx-spark-svg { display: block; width: 80px; height: 24px; }
.idx-spark-empty { color: var(--text-muted); font-size: 11px; }

/* ── Detail Section ───────────────────────────────────────── */
.idx-detail-section {
  display: grid;
  /* minmax(0,1fr) + 자식 min-width:0 — 내부 그리드(기간 5열·통계 3열·이력 테이블)의
     min-content 가 트랙을 뚫고 페이지가 축소 렌더되는 문제 가드 */
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 1024px) { .idx-detail-section { grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; } }
.idx-detail-section > * { min-width: 0; }

/* UI-20 — 차트 카드: 테두리 → surface-1 음영 */
.idx-main-chart-card {
  background: var(--surface-1, var(--bg-surface));
  border: none;
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--surface-1-shadow, none);
}
.idx-chart-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
@media (min-width: 768px) { .idx-chart-controls { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; } }
.idx-chart-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  /* nowrap + 제목 말줄임 — 지수명이 길어도 구독/AI 리포트 버튼이 다음 줄로 밀리지 않게
     (버튼 위치 고정이 실무 관례: 제목은 잘리고 버튼은 항상 우측 제자리) */
  flex-wrap: nowrap;
  min-width: 0;
}
.idx-chart-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
  /* 현재가가 제목 바로 옆에 붙도록 제목은 내용 폭만 차지(#33). 남는 공간은 .idx-chart-current
     의 margin-right:auto 가 먹어 버튼들은 그대로 우측에 고정된다. */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 검토의견서 #33 — 차트 위에 부유하던 현재가를 제목 영역으로 이동.
   제목보다 한 단계 낮은 위계(크기·굵기)로 두어 '제목의 부속 정보'로 읽히게 한다. */
.idx-chart-current {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-shrink: 0;
  margin-right: auto;
}
.idx-chart-current-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}
.idx-chart-current-chg {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.idx-chart-title-row .idx-chart-subscribe,
.idx-chart-title-row .idx-chart-report-btn { flex-shrink: 0; white-space: nowrap; }
.idx-chart-subscribe {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: var(--bg-darker);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}
.idx-chart-subscribe:hover { border-color: var(--primary); color: var(--primary); }
.idx-chart-subscribe.subscribed { background: rgba(245, 158, 11, 0.12); color: #f59e0b; border-color: rgba(245, 158, 11, 0.3); }

.idx-chart-report-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: var(--primary, #2563eb);
  color: #fff;
  border: 1px solid var(--primary, #2563eb);
  text-decoration: none;
  white-space: nowrap;
}
.idx-chart-report-btn:hover { opacity: 0.85; }

.idx-time-filters {
  display: inline-flex;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.idx-time-filter {
  background: var(--bg-surface);
  border: none;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
}
.idx-time-filter:not(:last-child) { border-right: 1px solid var(--glass-border); }
.idx-time-filter.active { background: var(--primary); color: #fff; }
/* 모바일: 지수 목록 인라인 상세의 기간 필터(일간/주간/월간/연간)를 전체폭 균등 분할 →
   버튼 뒤 빈 공간 제거. (상세 페이지의 스크롤 툴바 안 기간 필터는 대상 아님) */
@media (max-width: 767px) {
  .idx-chart-controls > .idx-time-filters { display: flex; width: 100%; }
  .idx-chart-controls > .idx-time-filters .idx-time-filter { flex: 1; text-align: center; }
}

.idx-chart-svg-wrap {
  margin-bottom: 14px;
}
.idx-chart-svg { width: 100%; height: 280px; }
.idx-chart-empty, .idx-chart-loading {
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* Stats / Range bar */
/* UI-20 — 통계 카드: 외곽 테두리 제거(행 구분선 유지) */
.idx-stats-card {
  border: none;
  border-radius: var(--radius-md);
  background: var(--surface-1-sunken, transparent);
  overflow: hidden;
}
.idx-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--glass-border);
}
.idx-stat-item { padding: 10px 12px; text-align: center; }
.idx-stat-item:not(:last-child) { border-right: 1px solid var(--glass-border); }
.idx-stat-label { font-size: 10px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; }
.idx-stat-value { font-size: 15px; font-weight: 900; color: var(--text-main); font-variant-numeric: tabular-nums; }
.val-up   { color: #ef4444; }
.val-down { color: #3b82f6; }

.idx-range-bar-wrap { padding: 12px 14px; }
.idx-range-bar-outer {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #3b82f6 0%, var(--bg-muted, var(--bg-darker)) 50%, #ef4444 100%);
  margin-bottom: 6px;
}
.idx-range-bar-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.idx-range-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 700;
}
.idx-range-cur { color: var(--primary); font-weight: 800; }

/* ── AI Panel ─────────────────────────────────────────────── */
/* UI-20 — AI 패널: 테두리 → 음영 서피스 */
.idx-ai-panel {
  background: var(--surface-1, var(--bg-surface));
  border: none;
  box-shadow: var(--surface-1-shadow, none);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: fit-content;
}
.idx-ai-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.idx-ai-panel-header > i { color: var(--primary); font-size: 16px; }
.idx-ai-panel-title { font-size: 13px; font-weight: 800; color: var(--text-main); }
.idx-ai-index-badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--primary);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
}
.idx-ai-panel-desc { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.55; }

.idx-ai-summary {
  background: var(--ai-bg);
  border: 1px solid var(--ai-border);
  border-left: 3px solid var(--ai-border-l);
  border-radius: var(--radius-md);
  padding: 12px;
}
.idx-ai-summary-header {
  font-size: 11px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.idx-ai-summary-text { font-size: 12.5px; color: var(--text-main); line-height: 1.6; }

.idx-ai-factors-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
/* UI-20 — AI 요인 항목: 패널 내부라 테두리 제거(틴트 배경으로만 구분) */
.idx-ai-factor-item {
  padding: 10px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--surface-1-sunken, var(--bg-darker));
}
.idx-ai-factor-item.factor-up   { background: rgba(239, 68, 68, 0.05); }
.idx-ai-factor-item.factor-down { background: rgba(59, 130, 246, 0.05); }
.factor-header {
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}
/* #9 — 구 색(#ef4444 3.76:1 / #3b82f6 3.68:1) 흰 배경 미달 → 트리맵 legend 와 동일 접근성 트렌드 토큰 */
.factor-up   .factor-header { color: var(--color-up); }
.factor-down .factor-header { color: var(--color-down); }
/* 검토의견서 #31 — 연관 뉴스 본문 최소 14px(KWCAG 가독성) */
.factor-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.factor-list li { color: var(--text-secondary); }
.factor-empty { color: var(--text-muted); font-style: italic; }

.idx-ai-related-news { display: flex; flex-direction: column; gap: 6px; }
.idx-related-news-header {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}
.idx-related-news-empty { font-size: 14px; color: var(--text-muted); font-style: italic; }

.idx-ai-ask-btn {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: none;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--primary);
  color: #fff;
}
.idx-ai-ask-btn:hover { opacity: 0.92; }

/* (idx-toast — 사문 제거: tsx 참조 0) */

/* ── 상세 페이지(IndexDetailPage) 프로토 파리티 ─────────────────────── */
/* 티커 헤더 */
.idx-ticker-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 14px;
}
.idx-ticker-id { flex: 1 1 auto; min-width: 200px; }
.idx-ticker-name-row { display: flex; align-items: center; gap: 10px; }
.idx-ticker-name { font-size: 1.5rem; font-weight: 800; color: var(--text-main); margin: 0; }
.idx-ticker-meta { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
.idx-ticker-price-block { text-align: right; }
.idx-ticker-price { font-size: 1.6rem; font-weight: 800; color: var(--text-main); }
.idx-ticker-change { font-size: 0.9rem; font-weight: 700; }
.idx-ticker-asof { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
/* 모바일 재배치 — 증권앱 관례: 좌측 정렬 단일 축(이름→값·등락→기준일),
   구독(★)은 카드 우측 상단 고정, 값 우측 배치·중앙 흔들림 제거 */
@media (max-width: 767px) {
  .idx-ticker-header {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 16px;
  }
  .idx-ticker-id { min-width: 0; }
  .idx-ticker-name-row { flex-wrap: wrap; gap: 8px; padding-right: 88px; } /* 우상단 구독 자리 */
  .idx-ticker-name { font-size: 1.25rem; overflow-wrap: anywhere; }
  .idx-ticker-header .idx-chart-subscribe { position: absolute; top: 12px; right: 12px; }
  .idx-ticker-price-block { text-align: left; }
  .idx-ticker-price { font-size: 1.75rem; line-height: 1.15; }
}

/* AI 한줄 판단 스트립 */
.idx-ai-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(37, 99, 235, 0.02));
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 12px;
  padding: 12px 18px;
  margin-bottom: 14px;
}
.idx-ai-strip-icon { color: var(--primary); }
.idx-ai-strip-label { font-size: 0.78rem; font-weight: 800; color: var(--primary); white-space: nowrap; }
.idx-ai-strip-text { font-size: 0.9rem; color: var(--text-main); line-height: 1.5; }
/* 모바일: 라벨-본문 가로 배치는 좌측이 비어 균형이 깨짐 → 라벨 줄 위, 본문 풀폭 아래 */
@media (max-width: 767px) {
  .idx-ai-strip { flex-wrap: wrap; row-gap: 6px; }
  .idx-ai-strip-text { flex: 1 0 100%; }
}
/* renderMarkdown 출력은 <p> 래핑 — 한줄 판단 strip 은 인라인 유지 */
.idx-ai-strip-text p { display: inline; margin: 0; }

/* 차트 툴바 (타입/MA/기간 세그) */
.idx-chart-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.idx-chart-seg { display: inline-flex; gap: 4px; }
/* 모바일: 차트 옵션을 숨은 가로 스와이프로 두지 않고 그룹별 전체폭으로 노출한다. */
@media (max-width: 767px) {
  .idx-chart-toolbar.chip-scroll-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    overflow-x: visible;
    padding-bottom: 2px;
  }
  .idx-chart-toolbar .idx-chart-seg {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
  .idx-chart-toolbar .idx-seg-btn { min-width: 0; text-align: center; }
  .idx-chart-toolbar .idx-time-filters { display: flex; width: 100%; }
  .idx-chart-toolbar .idx-time-filter { min-width: 0; flex: 1; text-align: center; }
  .idx-chart-toolbar .idx-event-toggle { justify-self: start; }
}
.idx-seg-btn {
  padding: 4px 11px;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
}
.idx-seg-btn:hover { border-color: var(--primary); color: var(--primary); }
.idx-seg-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* 기간별 변동 카드 */
.idx-card-subtitle { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); margin: 16px 0 10px; }
.idx-period-card { border-top: 1px solid var(--glass-border); margin-top: 16px; padding-top: 4px; }
.idx-period-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
/* 모바일: 5열 강제 시 셀 최소폭이 커 페이지가 벌어짐 → 유동 열(2~3열로 감김) */
@media (max-width: 767px) {
  .idx-period-grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
}
.idx-period-item { text-align: center; background: var(--bg-darker); border-radius: 8px; padding: 8px 4px; }
.idx-period-label { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 3px; }
.idx-period-val { font-size: 0.88rem; font-weight: 700; color: var(--text-main); }

/* 우측 컬럼: 연관뉴스 + 이력 */
.idx-detail-aside { display: flex; flex-direction: column; gap: 14px; }
.idx-hist-card {
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 14px 16px;
}
.idx-hist-card .idx-card-subtitle { margin-top: 0; }
.idx-hist-scroll { overflow-x: auto; } /* 좁은 화면에서 이력 테이블 가로 스크롤 격리 */
.idx-hist-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.idx-hist-table th { text-align: left; color: var(--text-muted); font-weight: 600; padding: 5px 6px; border-bottom: 1px solid var(--glass-border); }
.idx-hist-table th.qt-num, .idx-hist-table td.qt-num { text-align: right; }
.idx-hist-table td { padding: 5px 6px; border-bottom: 1px solid var(--glass-border); color: var(--text-main); }
.idx-hist-table tbody tr:last-child td { border-bottom: none; }

/* ── 지수 변동 이벤트 토글 (차트 헤더) ──────────────────────────────── */
.idx-event-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 6px;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border);
  background: var(--bg-darker);
  cursor: pointer;
  user-select: none;
}
.idx-event-toggle input { position: absolute; width: 0; height: 0; opacity: 0; }
.idx-event-toggle-track {
  position: relative;
  flex: none;
  width: 26px;
  height: 15px;
  border-radius: var(--radius-full);
  background: var(--glass-border-bright, var(--glass-border));
  transition: background 0.15s ease;
}
.idx-event-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}
.idx-event-toggle input:checked + .idx-event-toggle-track { background: var(--primary); }
.idx-event-toggle input:checked + .idx-event-toggle-track .idx-event-toggle-thumb { transform: translateX(11px); }
.idx-event-toggle input:focus-visible + .idx-event-toggle-track { outline: 2px solid var(--primary); outline-offset: 2px; }
.idx-event-toggle-label { font-size: 11.5px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .idx-event-toggle-track, .idx-event-toggle-thumb { transition: none; }
}

/* ── 지수 변동점 인라인 pill 마커 (차트 오버레이 — idx-chart-dot/tooltip 과 동일 %기반 패턴) ── */
.idx-event-marker {
  position: absolute;
  pointer-events: none; /* 앵커 자체는 비인터랙티브 — pill 만 클릭 가능 */
}
.idx-event-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.idx-event-dot.is-up { background: #10b981; }
.idx-event-dot.is-down { background: #ef4444; }

.idx-event-pill {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, calc(-100% - 10px));
  padding: 4px 8px;
  border-radius: 7px;
  border: 1px solid;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0.6;
  z-index: 5;
  pointer-events: auto;
  transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.idx-event-pill.is-up   { background: rgba(16, 185, 129, 0.10); border-color: rgba(16, 185, 129, 0.40); color: #10b981; }
.idx-event-pill.is-down { background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.40); color: #ef4444; }
.idx-event-pill::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 6px 5px 0;
}
.idx-event-pill.is-up::after   { border-color: rgba(16, 185, 129, 0.5) transparent transparent; }
.idx-event-pill.is-down::after { border-color: rgba(239, 68, 68, 0.5) transparent transparent; }
.idx-event-pill:hover,
.idx-event-pill:focus-visible,
.idx-event-pill.is-active {
  opacity: 1;
  z-index: 20;
  transform: translate(-50%, calc(-100% - 10px)) scale(1.06);
  box-shadow: var(--shadow-md);
}
/* hover/선택 시 배경을 불투명 채움 — 차트 선·다른 pill 위에서도 또렷하게(비침 방지). */
.idx-event-pill.is-up:hover,
.idx-event-pill.is-up:focus-visible,
.idx-event-pill.is-up.is-active   { background: #d1fae5; border-color: #10b981; }
.idx-event-pill.is-down:hover,
.idx-event-pill.is-down:focus-visible,
.idx-event-pill.is-down.is-active { background: #fee2e2; border-color: #ef4444; }
.idx-event-pill.is-up:hover::after,
.idx-event-pill.is-up:focus-visible::after,
.idx-event-pill.is-up.is-active::after   { border-top-color: #10b981; }
.idx-event-pill.is-down:hover::after,
.idx-event-pill.is-down:focus-visible::after,
.idx-event-pill.is-down.is-active::after { border-top-color: #ef4444; }
.idx-event-pill:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .idx-event-pill { transition: opacity 0.01ms; }
  .idx-event-pill:hover, .idx-event-pill:focus-visible, .idx-event-pill.is-active { transform: translate(-50%, calc(-100% - 10px)); }
}

/* ── 지수 변동점 원인 팝오버 — 마커 근처 앵커링(경량, 전체화면 딤 없음) ─────── */
.idx-event-popover-catcher {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 9500;
}
.idx-event-popover {
  position: absolute;
  width: min(320px, calc(100% - 20px));
  min-width: 240px;
  max-height: 260px;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 14px;
  line-height: 1.5; /* 차트 래퍼(.idx-chart-wrap)의 line-height:0 상속 차단 — 헤더·뉴스 텍스트 붕괴/겹침 방지 */
  z-index: 9600;
  animation: idx-event-popover-in 0.15s ease;
}
@keyframes idx-event-popover-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .idx-event-popover { animation: none; }
}

.idx-event-popover-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin: -14px -14px 12px;
  padding: 12px 14px 10px;
  border-radius: 12px 12px 0 0;
}
.idx-event-popover-head.is-up   { background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.02)); }
.idx-event-popover-head.is-down { background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.02)); }
.idx-event-popover-date { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.idx-event-popover-pct { font-size: 20px; font-weight: 800; margin-top: 2px; }
.idx-event-popover-pct.is-up   { color: #10b981; }
.idx-event-popover-pct.is-down { color: #ef4444; }
.idx-event-popover-close { background: none; border: none; font-size: 16px; color: var(--text-muted); cursor: pointer; padding: 4px; line-height: 1; }
.idx-event-popover-close:hover { color: var(--text-secondary); }
.idx-event-popover-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.idx-event-popover-why { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 12px; }
.idx-event-popover-news-label { font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.idx-event-popover-news-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.idx-event-popover-news-list li { display: flex; gap: 7px; align-items: baseline; }
.idx-event-popover-news-list li::before { content: '•'; flex-shrink: 0; color: rgba(0, 113, 205, 0.6); font-weight: 700; }
.idx-event-popover-news-list a { font-size: 13px; line-height: 1.4; color: var(--primary); text-decoration: none; }
.idx-event-popover-news-list a:hover { text-decoration: underline; }
.idx-event-popover-news-empty { font-size: 12.5px; color: var(--text-muted); }